以下是html网页特效代码，点击运行按钮可查看效果： 以下是程序代码 以下是程序代码 <!DOCTYPE <a href="https://www.gaodaima.com/tag/html" title="查看更多关于html的文章" target="_blank">html</a> PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”></a>; <html xmlns=”<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/1999/xhtml”>" rel="nofollow">http://www.w3.org/1999/xhtml”></a>; <head> <meta http-equiv=”text-Type” text=”text/html; charset=gb2312″ /> <title> 纯<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/js" title="js" rel="nofollow" target="_blank">js</a>+<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/css" title="css" rel="nofollow" target="_blank">css</a>的液晶数码显示板效果 </title> <meta http-equiv=”pragma” text=”no-cache” /> <meta name=”description” text=”商务网站!” /> <meta name=”keywords” text=”联盟” /> <link rel=”icon” href=”<a href="http://pics.paipai.com/favicon.ico”" rel="nofollow">http://pics.paipai.com/favicon.ico”</a>; type=”image/x-icon” /> <link rel=”shortcut icon” href=”<a href="http://pics.paipai.com/favicon.ico”" rel="nofollow">http://pics.paipai.com/favicon.ico”</a>; type=”image/x-icon” /> <style type=”text/<a href="https://www.gaodaima.com/tag/css" title="查看更多关于css的文章" target="_blank">css</a>“> body{background:#660000;color:#aaa; } #win{ background:#343434; width:570px; border:5px solid #999 ; } .EShowPan{ background:#000; margin:5px;padding:10px; overflow:hidden;float:left; border:3px solid #666; } .EShowPan li{float:left;margin-right:3px;color:#B8B7BD;font-family:’黑体’;font-size:22px;list-style-type:none} .EShowPan li div{ width:10px;height:10px; border:2px solid #000; overflow:hidden; font-size:0px; position:relative; } </style> </head></font> <font face=Verdana><body> 纯JS+CSS的液晶数码彩显板效果<br/><br/></font> <font face=Verdana><div id=”win”> <ul id=”ETimer1″ class=”EShowPan”></ul> <div style=”clear:both”></div> <ul id=”ETimer2″ class=”EShowPan”></ul> <div style=”clear:both”></div> <ul id=”EData” class=”EShowPan”></ul> <div style=”clear:both”></div> <ul id=”EClockFull” class=”EShowPan”></ul> <ul id=”ECount” class=”EShowPan” style=”width:240px”></ul></font> <font face=Verdana> <div style=”clear:both”></div> </div> <script language=”<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/javascript" title="JavaScript" rel="nofollow" target="_blank">JavaScript</a>“> /* 数码显示板类 */ ENumber=function(ini){ this.ex=function (o,x){for(var k in x)o[k]=x[k];return o}; this.text=ini.text||”; this.color=ini.color||’red’; this.size=ini.size||”; this.shell=ini.UL.big?document.getElementById(ini.UL):ini.UL; this.init(); } /* 公共接口 */ ENumber.prototype={ init:function(){ this.map=’11010111,01000100,11100011,11100110,01110100,10110110,10110111,11000100,11110111,11110100′.split(‘,’); this.createUI(); } ,createUI:function(){ for (var i=0;i<this.text.length;i++) this.createChar(this.text.charAt(i)); } ,createChar:function(char){ var d=document,$=’createElement’ ,$$=’appendChild’,charShell=d[$](‘LI’) ,head=d[$](‘DIV’),foot=d[$](‘DIV’) ,x=String(this.map[char]) ,dir=[‘Top’,’Right’,’Bottom’,’Left’] ,def={background:this.color,top:’9px’,height:’3px’,width:’3px’} ,offset=’3px’ ,size=2; if(this.size==’big’){ def={background:this.color,top:’9px’,height:’8px’,width:’8px’}; offset=’15px’; charShell.style.marginRight=’5px’; } switch (char){ case ‘:’: this.ex(foot.style,def); this.ex(head.style,def); head.style.top=offset; foot.style.top=parseInt(offset)*2+’px’; break; case ‘.’: this.ex(foot.style,def); head.style.width=offset; break; case ‘-‘: this.ex(foot.style,{background:this.color,top:’-4px’,height:’2px’}); break; default: if(this.size==’big’){ size=7; this.ex(head.style,{width:’20px’,height:’20px’}) this.ex(foot.style,{width:’20px’,height:’20px’}) } if(//d/.test(char)){ for (var i=0;i<x.length;i++ ){ (i<4?head:foot).style[‘border’+dir[i%4]]=size+”px solid “+(x.charAt(i)==’1′?this.color:’#000′); }; }else{ charShell.innerHTML='<span style=”position:relative;top:8px”>’+char+'</span>’; return this.shell[$$](charShell); } } charShell[$$](head); charShell[$$](foot); this.shell[$$](charShell); } ,update:function(newString){ while(this.shell.firstChild) this.shell.removeChild(this.shell.firstChild); this.text=newString; this.init(); } } /* 扩展Date的模板 */ Date.prototype.show=function(x){ var f0=function(x,n){return (‘0000’+x).slice(-(n||2))} with(this) var $={ ‘y’:getFullYear(),’M+’:f0(getMonth()+1) ,’d+’:f0(getDate()) ,’h+’:f0(getHours()) ,’m+’:f0(getMinutes()),’s+’:f0(getSeconds()) ,’S+’:f0(getMilliseconds(),3) ,’w+’:’日一二三四五六’.charAt(getDay()) }; if(/y{4,}/i.test(x)){x=x.replace(/y{4,}/,$[‘y’])} else{x=x.replace(/y+/,f0($[‘yyyy’]))} for (var re in $){x=x.replace(new RegExp(re),$[re])} return x; } /* 创建4个显示板 */ vivi0=new ENumber({UL:’ETimer1′,color:’#FF00FF’,text:”}); vivi1=new ENumber({UL:’ETimer2′,color:’#FF1913′,text:”,size:’big’}); vivi2=new ENumber({UL:’EData’,color:’#FF9900′,text:”}); vivi3=new ENumber({UL:’EClockFull’,color:’#00FF00′,text:”}); vivi4=new ENumber({UL:’ECount’,color:’#0033FF’,text:”}); /* 定时更新显示内容 */ setInterval(function (){ vivi0.update(new Date().show(‘北京时间hh小时mm分ss秒’)); vivi1.update(new Date().show(‘秒表计时hh:mm:ss:S’)); vivi2.update(new Date().show(‘yyyy-MM-dd’)); vivi3.update(new Date().show(‘yyyy年MM月dd日 hh:mm:ss’)); vivi4.update(String(+new Date()/1000)); },300) </script> </body> </html></font> <a href=”http://<a href="https://www.gaodaima.com/tag/js" title="查看更多关于js的文章" target="_blank">js</a>.alixixi.com/”>欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>[/code]<br /><input onclick="runEx('CodeText67696')" type="button" value="运行代码"/> <input onclick="doCopy('CodeText67696')" type="button" value="复制代码"/> <input onclick="saveCode('CodeText67696')" type="button" value="另存代码"/><br /> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div> </div> <p>欢迎大家阅读<span style='color:red;'>《纯JS+CSS的液晶数码彩色显示板效果(无图…_css》</span>,跪求各位点评,若觉得好的话请收藏本文，by <strong>搞代码</strong></p> <hr /><div class="open-message">搞代码网（<a href="www.gaodaima.com" target="_blank" title="gaodaima.com">gaodaima.com</a>）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱<a>chengxuyuan@gaodaima.com</a>，我们会在看到邮件的第一时间内为您处理，或直接联系<a>QQ：872152909</a>。本网站采用<a href="https://www.gaodaima.com/go.html?url=http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow" target="_blank" title="BY-NC-SA授权协议">BY-NC-SA</a>协议进行授权 <br >转载请注明原文链接：<a href="https://www.gaodaima.com/22865.html" target="_blank" title="纯JS+CSS的液晶数码彩色显示板效果(无图_css">纯JS+CSS的液晶数码彩色显示板效果(无图_css</a><a id="spreadAds" target="_blank" href="" onclick="spreadAds()"></a><a id="spreadAds2" target="_blank" href=""></a> </div> <div class="article-social"> <a href="javascript:;" data-action="ding" data-id="22865" id="Addlike" class="action"><i class="fa fa-heart-o"></i>喜欢 (<span class="count">0</span>)</a><span class="or"><style>.article-social .weixin:hover{background:#fff;}</style><a class="weixin" style="border-bottom:0px;font-size:15pt;cursor:pointer;">赏<div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title"><center>[搞代码]</center></div><div class="popover-content"><img width="200px" height="200px" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png" ></div></div></div></a></span><span class="action action-share bdsharebuttonbox"><i class="fa fa-share-alt"></i>分享 (<span class="bds_count" data-cmd="count" title="累计分享0次">0</span>)<div class="action-popover"><div class="popover top in"><div class="arrow"></div><div class="popover-content"><a href="#" class="sinaweibo fa fa-weibo" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_qzone fa fa-star" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="qq fa fa-qq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_renren fa fa-renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin fa fa-weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_more fa fa-ellipsis-h" data-cmd="more"></a></div></div></div></span></div> </article> <footer class="article-footer"> <div class="article-tags"><i class="fa fa-tags"></i><a href="https://www.gaodaima.com/tag/css" rel="tag">css</a><a href="https://www.gaodaima.com/tag/html" rel="tag">html</a><a href="https://www.gaodaima.com/tag/java" rel="tag">java</a><a href="https://www.gaodaima.com/tag/javascript" rel="tag">JavaScript</a><a href="https://www.gaodaima.com/tag/js" rel="tag">js</a></div></footer> <nav class="article-nav"><div class="_d13vl98i0pw"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795176", container: "_d13vl98i0pw", async: true });</script> </nav><div id="donatecoffee" style="overflow:auto;display:none;"><img width="400" height="400" alt="支持作者一杯咖啡" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png"></div> <div class="related_top"> <div class="related_posts"><ul class="related_img"> <li class="related_box" > <a href="https://www.gaodaima.com/432440.html" title="java怎么样学java正确" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/6.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="java怎么样学java正确" /><br><span class="r_title">java怎么样学java正确</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432401.html" title="Java面试题（11）" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/1.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Java面试题（11）" /><br><span class="r_title">Java面试题（11）</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432366.html" title="软件构造 03 正则表达式" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/3.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="软件构造 03 正则表达式" /><br><span class="r_title">软件构造 03 正则表达式</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432360.html" title="类和对象的概念与类和对象的关系" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/6.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="类和对象的概念与类和对象的关系" /><br><span class="r_title">类和对象的概念与类和对象的关系</span></a> </li> </ul><div class="relates"><div class="_mw9fz31sqco"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795180", container: "_mw9fz31sqco", async: true });</script><ul><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432359.html">面向对象思想概述、类和对象概念、类和对象的关系</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432357.html">4.15软工学习周报</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432314.html">Java面向对象下笔记&1000以内素数</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432291.html">学习Java应该留意的问题</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432250.html">Java集合框架(四)-HashMap</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432246.html">java学习</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432243.html">Java 入门与进阶P-7.1+P-7.2</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432233.html">Java方法</a></li></ul></div></div> </div> <div id="comment-ad" class="banner banner-related"><div class="_9madbukio7r"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6677406", container: "_9madbukio7r", async: true });</script><!-- 多条广告如下脚本只需引入一次 --><script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script></div> <div id="respond" class="no_webshot"> <form action="https://www.gaodaima.com/asdloie8574asdqwexzxdqwertasdqwe.php" method="post" id="commentform"> <div class="comt-title"> <div class="comt-avatar pull-left"> <img src="https://cdn.v2ex.com/gravatar/?s=50" class="avatar avatar-108"> </div> <div class="comt-author pull-left"> 发表我的评论 </div> <a id="cancel-comment-reply-link" class="pull-right" href="javascript:;">取消评论</a> </div> <div class="comt"> <div class="comt-box"> <textarea placeholder="说点什么吧…" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"> 提交评论 评论通知 表情 贴图 加粗 删除线 居中 斜体 签到 Hi，您需要填写昵称和邮箱！ 昵称昵称 (必填) 邮箱邮箱 (必填) 网址网址
以下是程序代码 以下是程序代码 以下是程序代码 以下是程序代码