基于JavaScript实现数码时钟效果


Posted in Javascript onMarch 30, 2020

本文实例为大家分享了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时钟特效专题

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

Javascript 相关文章推荐
jquery解析xml字符串示例分享
Mar 25 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 #Javascript
基于JavaScript实现无缝滚动效果
Jul 21 #Javascript
基于JavaScript实现选项卡效果
Jul 21 #Javascript
基于JavaScript实现弹幕特效
Aug 27 #Javascript
js实现水平滚动菜单导航
Jul 21 #Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 #Javascript
JavaScript实现购物车基本功能
Jul 21 #Javascript
You might like
用缓存实现静态页面的测试
2006/12/06 PHP
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
php 字符串函数收集
2010/03/29 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
python非递归全排列实现方法
2017/04/10 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
求高于平均分的学生学号及成绩
2016/09/01 面试题
教师个人自我鉴定
2014/02/08 职场文书
大学生就业求职信
2014/06/12 职场文书
车间核算员岗位职责
2014/07/01 职场文书
终止劳动合同通知书
2015/04/16 职场文书
教师节倡议书2015
2015/04/27 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书