用JavaScript创建超酷时钟背景特效

Javascript

5个成员

用JavaScript创建超酷时钟背景特效

发表于 2016-12-24 • 3347 次查看

　　我们经常会在页面中添加一些JavaScript代码用来显示时间。但是有时加入一些代码可能会影响页面的布局。现在给你一段代码，它将给你生成一个跳动的时钟，而且时钟是叠加在背景上的，再也不用担心布局上的问题了。

　　一、把下面的代码加到<head></head>区域中:

<script language=JavaScript> <div class="bdsharebuttonbox"> <a href="#" class="bds_more" data-cmd="more"></a> <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a> <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a> <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a> <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a> </div>  </div> <div class="favorite pull-right"> <a title="收藏此新闻" id="favor_trigger" class="btn btn-raised btn-primary btn-sm" href="javascript:;" onclick="add_favorite('用JavaScript创建超酷时钟背景特效');"><i class="fa fa-star"></i> 收藏</a> </div> </div> </div> </div> <nav> <ul class="pager"> <li class="previous"><a href="http://www.php100.com/html/program/javascript/2013/0904/1407.html"><span aria-hidden="true">←</span>用JavaScript加密保护网站页面</a> </li> <li class="next"><a href="http://www.php100.com/html/program/javascript/2013/0904/1409.html">用JavaScript使链接按钮不断变化 <span aria-hidden="true">→</span> </a></li> </ul> </nav> <div id="SOHUCS"></div> <script> (function () { var appid = 'cyrfL3CY2', conf = 'prod_aa5e19082f498f3a0b0f4162d9213d3a'; var doc = document, s = doc.createElement('script'), h = doc.getElementsByTagName('head')[0] || doc.head || doc.documentElement; s.type = 'text/javascript'; s.charset = 'utf-8'; s.src = 'http://assets.changyan.sohu.com/upload/changyan.js?conf=' + conf + '&appid=' + appid; h.insertBefore(s, h.firstChild); window.SCS_NO_IFRAME = true; })() </script> <script> window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "32" }, "share": {}, "image": { "viewList": ["qzone", "tsina", "tqq", "renren", "weixin"], "viewText": "分享到：", "viewSize": "16" }, "selectShare": { "bdContainerClass": null, "bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "weixin"] } }; with (document)0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)]; </script> </div> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">延伸阅读 More</h3> </div> <div class="panel-body"> </div> </div> </div> </div> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-md-2"> <h3>联系我们</h3> <ul class="list-unstyled ul-contact"> <li><a href="tencent://message/?uin=435399051&Site=&menu=yes"><i class="fa fa-qq"></i> 销售咨询</a></li> <li><a href="tencent://message/?uin=435399051&Site=&menu=yes"><i class="fa fa-qq"></i> 合作联系</a></li> <li><a href="tencent://message/?uin=435399051&Site=&menu=yes"><i class="fa fa-qq"></i> 会员问题 </a></li> <li><a href="tencent://message/?uin=435399051&Site=&menu=yes"><i class="fa fa-qq"></i> 友情链接</a></li> <li><a href="tencent://message/?uin=435399051&Site=&menu=yes"><i class="fa fa-qq"></i> 网站投稿</a></li> <li><a href="http://weibo.com/338213336"><i class="fa fa-weibo"></i> 官方微博</a></li> </ul> </div> <div class="col-md-2"> <h3>微信</h3> <img src="http://www.php100.com/statics/images//php100/weixin_b.jpg" height="120"/> </div> <div class="col-md-8"> <h3>友情链接与合作伙伴</h3> <ul class="list-inline ul-links"> <li><a href="http://code4app.com/" title="iOS开发" target="_blank">iOS开发</a></li> <li><a href="http://www.apkbus.com/" title="Android开发" target="_blank">Android开发</a></li> <li><a href="http://www.codefans.net/" title="源码爱好者" target="_blank">源码爱好者</a></li> <li><a href="http://www.fengniao.com" title="摄影" target="_blank">摄影</a></li> <li><a href="http://www.knowsky.com/" title="动态网站制作" target="_blank">动态网站制作</a></li> <li><a href="http://www.admin5.com" title="A5站长网" target="_blank">A5站长网</a></li> <li><a href="http://www.win8china.com/" title="Win8之家" target="_blank">Win8之家</a></li> <li><a href="http://download.pcpop.com" title="手机软件" target="_blank">手机软件</a></li> <li><a href="http://app.hiapk.com/" title="安卓软件" target="_blank">安卓软件</a></li> <li><a href="http://www.lagou.com/" title="招聘网" target="_blank">招聘网</a></li> <li><a href="http://www.hicode.cn" title="大众源码" target="_blank">大众源码</a></li> <li><a href="http://www.oschina.net/" title="开源中国" target="_blank">开源中国</a></li> <li><a href="http://www.devstore.cn/" title="DevStore" target="_blank">DevStore</a></li> <li><a href="http://www.zbj.com/" title="猪八戒威客网" target="_blank">猪八戒威客网</a></li> <li><a href="http://www.woshipm.com" title="人人都是产品经理" target="_blank">人人都是产品经理</a></li> <li><a href="http://www.tedu.cn/" title=" it培训" target="_blank"> it培训</a></li> <li><a href="http://java.tedu.cn/" title=" java培训" target="_blank"> java培训</a></li> <li><a href="http://www.apkbus.com/" title="安卓巴士" target="_blank">安卓巴士</a></li> <li><a href="http://www.phpwind.net" title="PHPwind论坛" target="_blank">PHPwind论坛</a></li> <li><a href="http://www.xinge.com/" title="信鸽" target="_blank">信鸽</a></li> <li><a href="http://www.lampbrother.net/" title="兄弟连PHP培训" target="_blank">兄弟连PHP培训</a></li> <li><a href="http://www.downkr.com/" title="当客软件园" target="_blank">当客软件园</a></li> <li><a href="http://www.kuqin.com/" title="IT程序猿" target="_blank">IT程序猿</a></li> <li><a href="http://www.111cn.net/" title="一聚教程" target="_blank">一聚教程</a></li> <li><a href="http://www.yixieshi.com/" title="互联网的一些事" target="_blank">互联网的一些事</a></li> <li><a href="http://www.xker.com/" title="新客网" target="_blank">新客网</a></li> <li><a href="http://www.itheima.com/" title="黑马程序员" target="_blank">黑马程序员</a></li> <li><a href="http://www.hxsd.com/" title="火星时代" target="_blank">火星时代</a></li> <li><a href="http://info.gongchang.com/" title="工厂网资讯" target="_blank">工厂网资讯</a></li> <li><a href="http://www.51testing.com/html/index.html" title="51软件测试网" target="_blank">51软件测试网</a></li> <li><a href="http://baike.hao123.cn/it/ " title="hao123it" target="_blank">hao123it</a></li> <li><a href="http://www.enkj.com/" title="亿恩科技" target="_blank">亿恩科技</a></li> <li><a href="http://thinksns.com/" title="ThinkSNS" target="_blank">ThinkSNS</a></li> <li><a href="http://www.9miao.com/" title="开源社区" target="_blank">开源社区</a></li> <li><a href="http://www.huibo.com" title="重庆人才网" target="_blank">重庆人才网</a></li> <li><a href="http://edu.51cto.com/" title="51CTO学院" target="_blank">51CTO学院</a></li> </ul> </div> </div> </div> </div> <div class="copyright"> <p>Copyright (C) 2007-2014 PHP100.com, All Rights Reserved 版权所有粤ICP备15117877号-4</p> </div> <div style="position:fixed;top:30%;right:20px;background:#fff;"> <div style="height: 10px; background-color: rgb(222, 222, 222);"></div> <div style="border: 3px solid rgb(222, 222, 222);"> <a><img style="width:136px;" src="http://www.php100.com/statics/images//php100/weixin_b.jpg" class="weixin"></a> <p style="margin-left:2px; font-size: 12px; margin-bottom: 5px;">粤ICP备15117877号-3</p> </div> </div> <script type="text/javascript"> $(function () { $.material.init(); $('[data-toggle="tooltip"]').tooltip(); }); </script> <div style="display:none"> <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1257119077'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/stat.php%3Fid%3D1257119077' type='text/javascript'%3E%3C/script%3E"));</script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?5e655533bed92260f45db8f858ef64c6"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </body> </html>

只看楼主回复倒序查看回复

发表回复

你还没有登录，请先登录或注册！

(大小不能超过2MB，文件类型支持png ,jpg ,gif ,doc ,xls ,txt ,rar ,zip .)