关灯
开启左侧

Javascript实现动态时钟效果

[复制链接]
小川 发表于 2018-11-19 12:18:24 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
<style type="text/css">
    #box{
      width:200px;
      height:200px;
      background:pink;
      margin:100px auto;
      line-height:200px;
      text-align:center;
      border-radius:50%;
      box-shadow:0 0 100px pink;
      color:black;
    }
  </style>




<script type="text/javascript">
    function showtime(){
    var date=new Date();//创建一个日期对象的实例。这句代码这样理解,new代表创建,Date是一个时间对象,连起来就是创建对象,并用变量date接收,实例就是一个实实在在的东西,比如:老师让你去帮他拿一个文件,结果你的同桌去了,你们两呢都属于人这个对象,所以你拿和他拿都一样。
    console.log(date);//在控制台输出date的值
    var year=date.getFullYear();//引用了年这个方法(功能,意思是能实现什么,能干什么)getFullYear
    var month=date.getMonth()+1;//这里加一是因为我们观念上的月份和定义方法的月份不一样,定义方法的月份是0~11,我们观念上的月份呢是1~12,因此要加一
    var day=date.getDate();
    var hour=date.getHours();
    if(hour<10){
      hour='0'+hour;
    }//这里用if语句的原因是当我们的时间走到一位数字时就会出现闪动,会使整个代码混乱,为了解决这一缺点在个位数前面用拼接的方法加一个0,这样就形成了两位数,这样就不会出现闪动。分钟和秒也是一样
    var minute=date.getMinutes();
     if(minute<10){
      minute='0'+minute;
    }
    var second=date.getSeconds();
     if(second<10){
      second='0'+second;
    }
    var time=year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;
    var time1=document.getElementById('box');//在页面中根据ID查找标签对象,在文档中通过ID获得box的内容,并赋值给time 。(doucument意思是整个文档)
    time1.innerHTML=time;//innerHTML是整个标签的前后里面的内容,把time里面的内容赋值到了time1中(innerHTML 指HTML开始标记和结束标记之间的内容)
    setTimeout(showtime,1000);//一秒钟之后执行showTime.大家都知道,我们的HTML代码是从上往下执行的,当执行到shoutime时,会往下执行调用的函数,然后执行函数,又执行setTimeout方法,一直这样循环下去,就能实现时钟的不停跳动。
    }
    showtime();//函数需要调用才会执行
  </script>


 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 最佳新人

    注册账号后积极发帖的会员

1关注

1粉丝

105帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )