基于JavaScript实现数码时钟效果
更新时间：2020年03月30日 09:13:18 作者：zhaoke_930325
这篇文章主要为大家详细介绍了基于JavaScript实现数码时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现数码时钟效果展示的具体代码，供大家参考，具体内容如下
- 通过建立toDBl函数将小于10的时间前面补上“0”使得时钟正常运行。
- 通过for循环将数组中的每一项都赋值给img元素相对应的上面，str.charAt(i)通过i递增将str的每个数字输入到src中。
- 通过封装函数tick，并调用了一次，使得网页在刷新时不会出现图片变化。
- 通过getHours，getMinutes，getSeconds来获取当前时间的数值。并将其通过toDbl函数+‘ '（一个空的字符串），将数字转化为字符串，并将这些字符串添加到str中。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数码时钟2</title>
<style type="text/css">
*{
background-color: rgb(7,110,177);
vertical-align: middle;
}
#div1{
text-align: center;
width: 1300px;
height: 220px;
margin:0 auto;
}
span{
font-size: 50px;
color: white;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var aImg = document.getElementsByTagName('img');
function tick()
{
var oDate = new Date();
var str = toDbl(oDate.getHours())+toDbl(oDate.getMinutes())+toDbl(oDate.getSeconds());
for (var i = 0; i < aImg.length; i++) {
aImg[i].src='images/'+str.charAt(i)+'.jpg';
};
};
setInterval(tick,500);
tick();
};
function toDbl(n)
{
if (n<10) {
return '0'+n;
} else {
return ''+n;
}
};
</script>
</head>
<body>
<div id="div1">
<img src="images/1.jpg">
<img src="images/2.jpg">
<span>:</span>
<img src="images/3.jpg">
<img src="images/4.jpg">
<span>:</span>
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
</body>
</html>
更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了小程序实现Token生成与验证，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要给大家介绍了关于如何利用d3.js力导布局绘制资源拓扑图的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
今天小编就为大家分享一篇关于JS无限级导航菜单实现方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
a标签也和window.location一样，也有这样属性，因此可以利用它来分析网址，下面的实例代码，大家可以看看2014-10-10
javascript dom操作之cloneNode文本节点克隆使用技巧
文本克隆函数cloneNode他有两个参数——true or false2009-12-12
Bootstrap每天必学之模态框（Modal）插件,模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等,感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了JavaScript sort排序的使用方法,sort方法用于对数组的元素进行排序,排序顺序可以是字母或数字,并按升序或降序,默认排序顺序为按字母升序,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了javascript实现检验的各种规则,涉及javascript针对手机号、邮箱、网址、汉字及图片等相关检测技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，本篇文章给大家介绍ajax如何实现页面局部跳转与结果返回，感兴趣的朋友一起来学习2015-08-08
今天小编就为大家分享一篇在layui框架中select下拉框监听更改事件的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最新评论