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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
javascript清空table表格的方法
May 14 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 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
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
Python日志无延迟实时写入的示例
2019/07/11 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
《夸父追日》教学反思
2014/02/26 职场文书
后备干部培训方案
2014/05/22 职场文书
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python
vue里使用create, mounted调用方法
2022/04/26 Vue.js
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技