Javascript实现动态时钟效果
时间:2018-11-18
这篇文章主要为大家介绍了Javascript实现动态时钟效果,非常详细的注释代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现动态时钟效果的具体代码,供大家参考,具体内容如下
1.css代码
<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>
2.JS代码
<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>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Codeforces 716A Crazy Computer
- Hadoop数据分析平台实战——240JavaSDK数据收集引擎编写离线数据分析平台实战——240JavaSDK数据收集引擎编写
- Hadoop离线数据分析平台实战——290活跃用户分析Hadoop离线数据分析平台实战——290活跃用户分析
- Codeforces 719B Anatoly and Cockroaches
- 【一起学Python】爬取前程无忧招聘信息并写入Excel
- 【一起学Python】爬取网易云歌词
- Hadoop离线数据分析平台实战——370外链信息分析Hadoop离线数据分析平台实战——370外链信息分析
- POJ 1067 取石子游戏
- 【一起学Python】STEAM游戏评测爬虫
- Open Judge 2750 鸡兔同笼
- POJ 1017 Packets
- Hadoop离线数据分析平台实战——380MapReduce程序优化Hadoop离线数据分析平台实战——380MapReduce程序优化
- 配置远程访问Jupyter+腾讯云超划算活动上车
- HDU 4256 The Famous Clock
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 删除排序链表中重复元素的方法
- java异常体系及1.7中的try-with-resources
- JAVA中的静态代理、动态代理以及CGLIB动态代理分析
- 基于centos7 搭建storm1.2.3集群过程
- JAVA中的浅克隆和深克隆分析
- mysql表占用多少磁盘空间以及清理表空间
- 基于docker快速搭建hbase集群
- 在springboot中对kafka进行读写操作
- [883]python安装包出现Retrying
- 深入理解java虚拟机学习笔记(三)-虚拟机性能监控与故障处理工具
- [884]Elasticsearch可视化工具
- 如何控制nodejs的线程数
- 算法篇:链表之合并有序链表
- 速读原著-UnixLinux基础(六)
- Python GUI编程:Tkinter