javascript实现数字时钟效果


Posted in Javascript onFebruary 06, 2021

本文实例为大家分享了javascript实现数字时钟效果的具体代码,供大家参考,具体内容如下

效果图

javascript实现数字时钟效果

需求分析

1、通过date获取时间
2、通过间隔定时器setInterval动态获取时间
3、间隔定时器setInterval间隔设置为1000毫秒(1秒)获取一次时间
4、为了样式好看,我们这是用数字图片来代替数字的

源代码

HTML部分

<div id="div">
 <img src="img/0.png" />
 <img src="img/0.png" />
 时
 <img src="img/0.png" />
 <img src="img/0.png" />
 分
 <img src="img/0.png" />
 <img src="img/0.png" />
 秒
</div>

css部分

<style>
/*无*/ 
</style>

JavaScript部分

<script>
 // 需求:数码时钟
 var date = new Date();
 var imgArr = document.getElementsByTagName('img');//获取img图片的一个集合
 var hours,minutes,seconds;
 var timre = setInterval(function () {
 date = new Date();
 // 获取小时
 hours = date.getHours();
 
 imgArr[0].src = "img/" + parseInt(hours / 10) + ".png"
 imgArr[1].src = "img/" + hours % 10 + ".png"
 // 获取分钟
 minutes = date.getMinutes();
 imgArr[2].src = "img/" + parseInt(minutes / 10) + ".png"
 imgArr[3].src = "img/" + minutes % 10 + ".png"
 // 获取秒
 seconds = date.getSeconds();
 imgArr[4].src = "img/" + parseInt(seconds / 10) + ".png"
 imgArr[5].src = "img/" + seconds % 10 + ".png"
 console.log(hours);
 console.log(minutes);
 console.log(seconds);
 }, 1000)
</script>

总代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <div id="div">
 <img src="img/0.png" />
 <img src="img/0.png" />
 时
 <img src="img/0.png" />
 <img src="img/0.png" />
 分
 <img src="img/0.png" />
 <img src="img/0.png" />
 秒
 </div>
</body>

</html>
<script>
 // 需求:数码时钟
 var date = new Date();
 var imgArr = document.getElementsByTagName('img');//获取img图片的一个集合
 var hours,minutes,seconds;
 var timre = setInterval(function () {
 date = new Date();
 // 获取小时
 hours = date.getHours();
 
 imgArr[0].src = "img/" + parseInt(hours / 10) + ".png"
 imgArr[1].src = "img/" + hours % 10 + ".png"
 // 获取分钟
 minutes = date.getMinutes();
 imgArr[2].src = "img/" + parseInt(minutes / 10) + ".png"
 imgArr[3].src = "img/" + minutes % 10 + ".png"
 // 获取秒
 seconds = date.getSeconds();
 imgArr[4].src = "img/" + parseInt(seconds / 10) + ".png"
 imgArr[5].src = "img/" + seconds % 10 + ".png"
 }, 1000)
</script>

所用图片:

javascript实现数字时钟效果

由于你们没有图片,直接复制代码,展示不出效果,大家可以自己找几张图片来代替,稍微修改下即可,只要能看得懂代码,修改起来莫得问题啦

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

Javascript 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
Extjs学习笔记之六 面版
Jan 08 Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
JavaScript WeakMap使用详解
Feb 05 #Javascript
JavaScript 声明私有变量的两种方式
Feb 05 #Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 #Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 #Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 #Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 #Javascript
关于element的表单组件整理笔记
Feb 05 #Javascript
You might like
综合图片计数器
2006/10/09 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php 伪静态之IIS篇
2014/06/02 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
python中readline判断文件读取结束的方法
2014/11/08 Python
Python中print和return的作用及区别解析
2019/05/05 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
python实现简单坦克大战
2020/03/27 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
Android interview questions
2016/12/25 面试题
什么是事务?事务有哪些性质?
2012/03/11 面试题
运动会邀请函范文
2014/01/31 职场文书
捐助感谢信
2015/01/22 职场文书
裁员通知
2015/04/25 职场文书
搭讪开场白台词大全
2015/05/28 职场文书