js代码写一个时钟(js数字时钟)
admin 发布:2022-12-19 23:10 170
今天给各位分享js代码写一个时钟的知识,其中也会对js数字时钟进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
如何使用JS实现一个简易数码时钟
设计思路:
数码时钟即通过图片数字来显示当前时间,需要显示的图片的URL根据时间变化而变化。
a、获取当前时间Date()并将当前时间信息转换为一个6位的字符串;
b、根据时间字符串每个位置对应的数字来更改图片的src的值,从而实现更换显示图片;
构建HTML基础并添加样式。
div id="div1"
img src='./数字时钟(1)_files/0.jpg'
img src='./数字时钟(1)_files/0.jpg'
:
img src='./数字时钟(1)_files/0.jpg'
img src='./数字时钟(1)_files/0.jpg'
:
img src='./数字时钟(1)_files/0.jpg'
img src='./数字时钟(1)_files/0.jpg'
/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(n10)
{return '0'+n;}
else
{return ''+n;}
}
var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());
设置所有图片的src值:
for(var i=0;iaImg.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;iaImg.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;iaImg.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(n10)
{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;iaImg.length;i++)
{
aImg[i].src="./数字时钟(1)_files/"+str.charAt(i)+".jpg";
}
}
setInterval(tick,1000);
tick();
}
如何用javascript实现一个时钟?
function init(){
clock();
setInterval(clock,1000);
}
function clock(){
var now = new Date();
var ctx = document.getElementById('canvas').getContext('2d');
ctx.save();
ctx.clearRect(0,0,150,150);
ctx.translate(75,75);
ctx.scale(0.4,0.4);
ctx.rotate(-Math.PI/2);
ctx.strokeStyle = "black";
ctx.fillStyle = "white";
ctx.lineWidth = 8;
ctx.lineCap = "round";
// Hour marks
ctx.save();
for (var i=0;i12;i++){
ctx.beginPath();
ctx.rotate(Math.PI/6);
ctx.moveTo(100,0);
ctx.lineTo(120,0);
ctx.stroke();
}
ctx.restore();
// Minute marks
ctx.save();
ctx.lineWidth = 5;
for (i=0;i60;i++){
if (i%5!=0) {
ctx.beginPath();
ctx.moveTo(117,0);
ctx.lineTo(120,0);
ctx.stroke();
}
ctx.rotate(Math.PI/30);
}
ctx.restore();
var sec = now.getSeconds();
var min = now.getMinutes();
var hr = now.getHours();
hr = hr=12 ? hr-12 : hr;
ctx.fillStyle = "black";
// write Hours
ctx.save();
ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
ctx.lineWidth = 14;
ctx.beginPath();
ctx.moveTo(-20,0);
ctx.lineTo(80,0);
ctx.stroke();
ctx.restore();
// write Minutes
ctx.save();
ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(-28,0);
ctx.lineTo(112,0);
ctx.stroke();
ctx.restore();
// Write seconds
ctx.save();
ctx.rotate(sec * Math.PI/30);
ctx.strokeStyle = "#D40000";
ctx.fillStyle = "#D40000";
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(-30,0);
ctx.lineTo(83,0);
ctx.stroke();
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(95,0,10,0,Math.PI*2,true);
ctx.stroke();
ctx.fillStyle = "#555";
ctx.arc(0,0,3,0,Math.PI*2,true);
ctx.fill();
ctx.restore();
ctx.beginPath();
ctx.lineWidth = 14;
ctx.strokeStyle = '#325FA2';
ctx.arc(0,0,142,0,Math.PI*2,true);
ctx.stroke();
ctx.restore();
}
js怎么写一个时钟?每秒跳一次的那种
html
head
script type="text/javascript"
!--
window.onload=function(){
var oDiv=document.getElementById('time'); // 获取DIV
function theTime(){
var theDate=new Date(); // 创建一个日期对象
var year=theDate.getFullYear();; // 获取年份
var month=theDate.getMonth(); // 获取月份
var day=theDate.getDate(); //获取日
var hour=theDate.getHours(); //获取小时
var minues=theDate.getMinutes(); // 获取分钟
var second=theDate.getSeconds(); // 获取秒
oDiv.innerHTML="现在的时间是"+year+"年"+month+"月"+day+"日 "+hour+":"+minues+":"+second;
}
theTime(); // 执行时间函数
setInterval(theTime,1000); // 更新时间
}
//--
/script
/head
div id="time"/div
/html
你试下,,,,
js代码写一个时钟的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于js数字时钟、js代码写一个时钟的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-18百度推广多少钱一个月,现在百度推广多少钱
- 05-18做一个网站需要多少钱大概,做一个网站需要多少钱大概中公
- 05-16如何做一个网站,如何做一个网站系统
- 05-15如何制作一个网页网站,如何制作一个网页?
- 05-14做一个网站需要什么,做一个网站需要什么物理设备
- 05-09网页代码,网页代码快捷键
- 05-06单页网站的代码(完整的网页代码)[20240506更新]
- 05-06个人主页图片代码(个人主页图片代码怎么弄)[20240506更新]
- 05-06提取微信名片代码(微信名片信息提取)[20240506更新]
- 05-06php后台权限管理代码(php管理员权限)[20240506更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接