js+css3实现炫酷时钟

2024-12-20 01:11:55

本文实例为大家分享了js+css3实现炫酷时钟的具体代码，供大家参考，具体内容如下

html

<body>
    <ul id='box'></ul>
</body>

css

<style>
      *{
        margin: 0;
        padding: 0;
      }
      body{
        background-color: #aaa;
      }
      ul{
        width: 400px;
        height: 400px;
        border: 5px solid skyblue;
        margin: 100px auto 0 auto;
        border-radius: 50%;
         background: radial-gradient(green 50%, yellow 100%);;
        position: relative;

      }
      ul li{
        width: 2px;
        height: 15px;
        list-style: none;
        background-color: #fff;
        position: absolute;
        left: 199px;
        transform-origin: center 200px;
      }

      h1{
        width: 2px;
        height: 180px;
        background-color: orange;
        position: absolute;
        left: 199px;
        top:20px;
        -transition: 1s linear;
        transform-origin: center 180px;
      }
      h2{
        width: 6px;
        height: 160px;
        background-color: #fff;
        position: absolute;
        left: 197px;
        top:40px;
        transform-origin: center 160px;
        border-radius:20%;
      }

      h3{
        width: 8px;
        height: 140px;
        background-color: #fff;
        position: absolute;
        left: 196px;
        top:60px;
        transform-origin: center 140px;
        transform: rotate(0deg);
        border-radius: 20%;
      }
      h4{
        width: 30px;
        height: 30px;
        position: absolute;
        left: 185px;
        top:185px;
        border-radius: 50%;
        background-color: orange;
      }

      span{
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 24px;
        position: absolute;
        left: -10px;
        top: 28px;
        color: #fff;
      }

</style>

(function(){
      var oUl=document.getElementById('box');
      var timer=null;
      for(var i=0,j=0;i<60;i++,j+=6){
        var oLi=document.createElement('li');
        oLi.style.transform='rotate('+j+'deg)';
        if(i%5==0){
          oLi.style.height='20px';
          var oSpan=document.createElement('span');
          oSpan.style.transform='rotate('+(-j)+'deg)';
          if(i==0){
            oSpan.innerHTML='12';
            oSpan.style.fontSize='30px';
            oSpan.style.left='-17px';
          }else{
            oSpan.innerHTML=parseInt(i/5);
            if(i%15==0){
              oSpan.style.fontSize='36px';
            }
          }
          oLi.appendChild(oSpan);
        }
        if(i==0){
          var oH1=document.createElement('h1');
          var oH2=document.createElement('h2');
          var oH3=document.createElement('h3');
          var oH4=document.createElement('h4');
          oUl.appendChild(oH1);
          oUl.appendChild(oH2);
          oUl.appendChild(oH3);
          oUl.appendChild(oH4);
        }
        oUl.appendChild(oLi);
      }
      var oH=document.getElementsByTagName('h3')[0];
      var oM=document.getElementsByTagName('h2')[0];
      var oS=document.getElementsByTagName('h1')[0];
      timer=setInterval(function(){
         var now = new Date();
         var s=now.getSeconds();
         var m=now.getMinutes()+s/60;
         var h=now.getHours()+m/60;
         oS.style.transform='rotate('+s*6+'deg)';
         oM.style.transform='rotate('+m*6+'deg)';
         oH.style.transform='rotate('+(h%12)*30+'deg)';
      },30);

    })();

作品截图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js实现时钟定时器

本文实例为大家分享了js实现时钟定时器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>时钟</title> <script type="text/javascript"> function showClock(){ // 1. 获取当前时间 var time = new Da
js实现小时钟效果

本文实例为大家分享了js实现小时钟效果的具体代码,供大家参考,具体内容如下今天给大家分享一下制作小时钟先给大家把代码分享出来首先 JavaScript 代码 <script> function setTime(){ var now = new Date(); var year = now.getFullYear(); //获取现在的年份. var mouth = now.getMonth() + 1; //获取本年的月份,默认的是 0-11:所以进行加 1 操作: var date =
html5 canvas js(数字时钟)实例代码

复制代码代码如下: <!doctype html><html> <head> <title>canvas dClock</title> </head> <body> <canvas id = "clock" width = "500px" height = "200px"> 您的浏览
javascript实现简易数码时钟

本文实例为大家分享了javascript实现简易数码时钟的具体代码,供大家参考,具体内容如下通过这个小例子复习一下Date对象的基本使用. 还可以用Date对象做定时器,计时器等等. 效果如图: 可以自己去找炫一点的图片来代替文字,原理都是一样,只是如果用图片代替文字,则定时切换图片即可. HTML代码: <div id="clock"> <p></p> <p></p> <p></p> </di
js实现一个简单的数字时钟效果

效果图: 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>一个简单的数字时钟</title> <script type="text/javascript" charset="utf-8
JS实现网页时钟特效

本文实例为大家分享了JS实现网页时钟特效的具体代码,供大家参考,具体内容如下主要逻辑根据JS 的Date属性求得当前的时分秒之后,按照 360/(时|分|秒) 来对三个指针元素进行旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
JavaScript实现简单的时钟实例代码

复制代码代码如下: <html> <head> <title>JS实现简单的时钟</title><script> function displayTime() { document.getElementById("time").innerHTML = new Date().toTimeString(); } setInterval(displayTime,1000); // 每隔1秒钟调用dis
javascript canvas时钟模拟器

canvas时钟模拟器,供大家参考,具体内容如下主要功能能够显示当前的时间,也能够切换夜晚模式和白天模式主要代码 h = h > 12 ? h : h - 12 // 下午时间修正 // 如果画布状态很混沌的话多使用ctx.restore()恢复到最初状态而不要强行再用同样的方法矫正状态,比如使用rotate顺时针旋转n度之后,再使用rotate以同样的逆时针角度转回去. 参考代码 <!DOCTYPE html> <html lang="en"> &
五步轻松实现JavaScript HTML时钟效果

学了一段时间的HTML.CSS和JS后,给大家做一款漂亮的不像实力派的HTML时钟,先看图: 涉及到的知识点有: CSS3动画.DOM操作.定时器.圆点坐标的计算(好多人是不是已经还给自己的老师了~) 接下来,我们用5步来制作它 step1.准备HTML 首先,我们需要准备HTML结构,背景.表盘.指针(时针.分针.秒针).数字. <div id="clock"> <div class="bg"> <div class="p
JavaScript编写开发动态时钟

本文实例为大家分享了JavaScript编写开发动态时钟的具体代码,供大家参考,具体内容如下效果图: 实质上就是调用时间库,再添加一个颜色数组,给显示的时间嵌套一个div盒子,再将颜色数组的颜色设置随机变化,这样就使得时间变化的时候颜色也会发生变化. 完整源代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页时钟</title> &l

js+css3实现炫酷时钟

相关推荐

随机推荐