Javascript实现动态时钟效果


Posted in Javascript onNovember 17, 2018

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

效果图:

Javascript实现动态时钟效果

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

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

Javascript 相关文章推荐
jQuery参数列表集合
Apr 06 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
DWR中各种java方法的调用
May 04 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
小程序实现发表评论功能
Jul 06 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
mocha的时序规则讲解
Feb 16 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
使用Javascript简单计算器
Nov 17 #Javascript
JS实现图片切换效果
Nov 17 #Javascript
js实现导航跟随效果
Nov 17 #Javascript
JavaScript实现新年倒计时效果
Nov 17 #Javascript
JS实现倒计时图文效果
Nov 17 #Javascript
javaScript实现游戏倒计时功能
Nov 17 #Javascript
Javascript实现时间倒计时功能
Nov 17 #Javascript
You might like
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
python中int与str互转方法
2018/07/02 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
python温度转换华氏温度实现代码
2020/12/06 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
会计专业个人求职信范文
2014/01/08 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
2016年学校招生广告语
2016/01/28 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
解析MySQL binlog
2021/06/11 MySQL
spring boot中nativeQuery的用法
2021/07/26 Java/Android
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript