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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
js原生map实现的方法总结
Jan 19 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引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
简单谈谈json跨域
2016/03/13 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
python基础教程之循环介绍
2014/08/29 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python小程序实现刷票功能详解
2019/07/17 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
python如何查看网页代码
2020/06/07 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
python palywright库基本使用
2021/01/21 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
我的中国梦演讲稿1000字
2014/08/19 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
人事专员岗位职责
2015/02/03 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js
详解flex:1什么意思
2022/07/23 HTML / CSS