js+css3实现炫酷时钟


Posted in Javascript onAugust 18, 2020

本文实例为大家分享了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>

js

(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+css3实现炫酷时钟

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript常考语句107条收集
Mar 09 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
React Native项目框架搭建的一些心得体会
May 28 Javascript
纯js+css实现在线时钟
Aug 18 #Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 #Javascript
js+css实现扇形导航效果
Aug 18 #Javascript
js实现3D旋转效果
Aug 18 #Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 #Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 #Javascript
javascript实现移动端上传图片功能
Aug 18 #Javascript
You might like
一个目录遍历函数
2006/10/09 PHP
[转帖]PHP世纪万年历
2006/12/06 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
python代码过长的换行方法
2018/07/19 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
企业宣传工作方案
2014/06/02 职场文书
中秋节主题班会
2015/08/14 职场文书