通过JS制作一个简易数码时钟

　　设计思路：

　　数码时钟即通过图片数字来显示当前时间，需要显示的图片的URL根据时间变化而变化。

　　a、获取当前时间Date()并将当前时间信息转换为一个6位的字符串;

　　b、根据时间字符串每个位置对应的数字来更改图片的src的值，从而实现更换显示图片;

　　构建HTML基础并添加样式。

 1 <div id="div1">
 2     <img src='./数字时钟（1）_files/0.jpg'>
 3     <img src='./数字时钟（1）_files/0.jpg'>
 4     :
 5     <img src='./数字时钟（1）_files/0.jpg'>
 6     <img src='./数字时钟（1）_files/0.jpg'>
 7     :
 8    <img src='./数字时钟（1）_files/0.jpg'>
 9    <img src='./数字时钟（1）_files/0.jpg'>
10 </div>

　　style样式

#div1{width:50%;margin:300px auto;background:black;}

　　获取图片元素以及当前时间：

    var oDiv=document.getElementById('div1');var aImg=oDiv.getElementsByTagName('img');var oDate=new Date();var str=oDate.getHours()+oDate.getMinutes()+oDate.getSeconds();

　　这里出现两个问题

　　1、oDate.getHours()返回的都是数字，这样编写为数字相加，而非字符串相加。

　　2、当获取的值为一位数时，会造成字符串的个数少于6，不满足初始设计要求。

　　解决以上两个问题的代码解决方案：

　　var oDiv=document.getElementById('div1');var aImg=oDiv.getElementsByTagName('img');var oDate=new Date();function twoDigitsStr(){if(n<10){return '0'+n;}else{return ''+n;}}var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());

　　设置所有图片的src值：

for(var i=0;i<aImg.length;i++){aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";}

　　通过setInterval()来实现每隔1秒进行重新获取当前时间以及图片src值：

    var oDiv=document.getElementById('div1');var aImg=oDiv.getElementsByTagName('img');setInterval(function tick(){var oDate=new Date();var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());for(var i=0;i<aImg.length;i++){aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";}},1000);

　　但是还是有一个问题，网页在打开的初始阶段，显示时间为00：00：00，这是因为定时器有个特性，当定时器被打开后，不会立刻执行里面的函数，而是在1秒后执行。解决代码：

var oDiv=document.getElementById('div1');
var aImg=oDiv.getElementsByTagName('img');
function tick()
{var oDate=new Date();var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());for(var i=0;i<aImg.length;i++){aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";}}setInterval(tick,1000);tick();

　　问题：代码setInterval(tick,1000);中函数tick没有带括号，那么JS中函数带括号与不带括号有什么区别？

　　完整的数码时钟制作JS代码为：

    function twoDigitsStr(n){if(n<10){return '0'+n;}else{return ''+n;}}
window.onload=function()
{var oDiv=document.getElementById('div1');var aImg=oDiv.getElementsByTagName('img');function tick(){var oDate=new Date();var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());for(var i=0;i<aImg.length;i++){aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";}}setInterval(tick,1000);tick();
}

　　当然，如果有好的创意图片，可以将上述数字图片进行替换，生成各种炫目的数码时钟效果。譬如：

转载于:https://www.cnblogs.com/f6056/p/9294508.html

通过JS制作一个简易数码时钟相关推荐

用JS制作一个简易GPA计算器
这是我第一次使用JS,有问题的地方还希望大佬指出程序的容错性还没做到完美,日后补充 <!DOCTYPE html> <html><head><meta ch ...
html中各种js效果图,HTML+CSS+JS制作一个漂亮的橙子动态时钟
HTML+CSS+JS制作一个漂亮的橙子动态时钟 1. 效果图: 2. 背景产生: 利用四块与圆同高的矩形转一定的角度将圆切分成八块形成橙子内里,利用径向渐变形成橙皮. background: rad ...
制作一个简易的计算器
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一 ...
使用 Vue.js 制作一个简单的调查问卷平台
使用 Vue.js 制作一个简单的调查问卷平台原文 https://github.com/pramper/Demos/tree/master/Vue-Demos/Questionnaire 主题 ...
使用 ale.js 制作一个小而美的表格编辑器（2）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
使用 ale.js 制作一个小而美的表格编辑器（3）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
用JS制作一个信息管理平台完整版
前言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
使用 ale.js 制作一个小而美的表格编辑器（1）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
使用 ale.js 制作一个小而美的表格编辑器（4）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
jsp循环输出表格_使用 ale.js 制作一个小而美的表格编辑器（1）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...

通过JS制作一个简易数码时钟

通过JS制作一个简易数码时钟相关推荐

最新文章

热门文章