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 相关文章推荐
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
angularJS 入门基础
Feb 09 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
vue-router相关基础知识及工作原理
Mar 16 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
也谈php网站在线人数统计
2008/04/09 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
django中嵌套的try-except实例
2020/05/21 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
七一表彰活动方案
2014/01/18 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
售后服务承诺书范文
2014/03/26 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
销售团队激励口号
2014/06/06 职场文书