CSS3实现一个实时钟表的功能

2018年9月6日22:58:06 5 阅读(4,409)
本文最后更新于2018年9月12日,已超过一年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

这两天一直因为在webstorm中安装依赖而脑壳疼,之前用的npm来安装,后来嫌速度慢,所以用了淘宝的国内镜像,然后用cnpm来安装,用了之后发现没有改善,而且更卡了,cpu有时候都可以跑到100%,能亲身感受到小风扇转的更快了,呼呼的~那我还是换回npm吧,虽然速度慢点,但是也不至于卡死=。=

:-( 不想这些事了,转移一下注意力吧,闲着也是闲着,就来做一个小东西来玩一下,于是就想到了钟表,实现的逻辑也不复杂,调用setInterval方法,每隔1s执行一次函数,然后时间转换为指针旋转度数。

效果图:

CSS3实现一个实时钟表的功能

css代码:

  1. <style id="css">
  2.         #boxwidth:200px;height:200px;border:1px solid black;position:relative;border-radius:50%;margin:100px auto;background-imageurl("");background-size: cover;}
  3.         #listlist-style:none;position:relative;height:100%;margin:0;padding:0; }
  4.         #list li{ width:1px;height:6px;background:#000;position:absolute;left:99px;top:0;transform-origin:center 100px;-moz-transform-origin:center 100px;-webkit-transform-origin:center 100px;-o-transform-origin:center 100px; }
  5.         #list li:nth-child(5n+1){ width:2px;height:10px; }
  6.         #ico,#hour,#min,#secposition:absolute;background:#000; }
  7.         #icowidth:10px;height:10px;border-radius:50%;left:95px;top:95px; }
  8.         #hourwidth:4px;height:50px;left:98px;top:50px;transform-origin:bottombottom;-moz-transform-origin:bottombottom;-webkit-transform-origin:bottombottom;-o-transform-origin:bottombottom; }
  9.         #minwidth:2px;height:70px;left:99px;top:30px;background:#300;transform-origin:bottombottom;-moz-transform-origin:bottombottom;-webkit-transform-origin:bottombottom;-o-transform-origin:bottombottom; }
  10.         #secwidth:2px;height:90px;left:99px;top:10px;background:red;transform-origin:bottombottom;-moz-transform-origin:bottombottom;-webkit-transform-origin:bottombottom;-o-transform-origin:bottombottom; }
  11.         #number_time { text-aligncenter;}
  12.     </style>

js代码:

  1. window.onload=function(){
  2.             var list=document.getElementById("list");
  3.             var hour=document.getElementById("hour");
  4.             var mins=document.getElementById("min");
  5.             var sec=document.getElementById("sec");
  6.             var css=document.getElementById("css");
  7.             var lis="";
  8.             forvar i=0;i<60;i++ ){
  9.                 lis+=" <li></li> ";
  10.                 css.innerHTML+="#list li:nth-of-type("+(i+1)+"){ transform:rotate( "+i*6+"deg );-moz-transform:rotate( "+i*6+"deg );-webkit-transform:rotate( "+i*6+"deg );-o-transform:rotate( "+i*6+"deg ); }";
  11.             }
  12.             list.innerHTML=lis;
  13.             toTime();
  14.             setInterval( toTime,1000 );
  15.             setInterval( toTime2,1000 );
  16.             function toTime(){
  17.                 var date=new Date();
  18.                 var s=date.getSeconds();
  19.                 var m=date.getMinutes()+s/60;
  20.                 var h=date.getHours()+m/60;
  21.                 hour.style.WebkitTransform=" rotate( "+ h*30 +"deg ) ";
  22.                 mins.style.WebkitTransform=" rotate( "+ m*6 +"deg ) ";
  23.                 sec.style.WebkitTransform=" rotate( "+ s*6 +"deg ) ";
  24.             }
  25.             function toTime2() {
  26.                     var today = new Date();
  27.                     var w;  /*星期几*/
  28.                     switch(today.getUTCDay()){
  29.                         case 1:
  30.                             w="一";
  31.                             break;
  32.                         case 2:
  33.                             w="二";
  34.                             break;
  35.                         case 3:
  36.                             w="三";
  37.                             break;
  38.                         case 4:
  39.                             w="四";
  40.                             break;
  41.                         case 5:
  42.                             w="五";
  43.                             break;
  44.                         case 6:
  45.                             w="六";
  46.                             break;
  47.                         case 7:
  48.                             w="天";
  49.                             break;
  50.                     }
  51.                     var d = today.getUTCFullYear()+"年"
  52.                             +(today.getUTCMonth()+1)+"月"+today.getUTCDate()+"日"
  53.                             +"  星期"+w;
  54.                     var t = today.toLocaleTimeString();
  55.                     var h = today.getHours();
  56.                     var m = today.getMinutes();
  57.                     var s = today.getSeconds();
  58.                     document.getElementById("number_time").innerHTML = d+"<br>"+t;
  59.             }
  60.         }

html代码:

  1. <div id="box">
  2.     <ul id="list"></ul>
  3.     <div id="hour"></div>
  4.     <div id="min"></div>
  5.     <div id="sec"></div>
  6.     <div id="ico"></div>
  7. </div>
  8. <div id="number_time"></div>

在线demo:点击预览

 

完。


 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛

目前评论:5   其中:访客  4   博主  1

    • 红嘴鸭 红嘴鸭 1

      感谢分享,我好好学习一下

      • 惠帮帮众包 惠帮帮众包 1

        厉害了 大佬

        • 一抹阳光 一抹阳光 0

          要是能做成一个WP右侧小工具就好了!

            • 舍得 舍得

              @一抹阳光 有现成的,引用一段代码就可以实现。

            • 贵安服贸 贵安服贸 1

              感谢分享!