js数字时钟

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<script>
function set(obj){
if(obj<10){
return ‘0‘+obj;

}
else
return ‘‘+obj;
}
window.onload=function(){

var aImg=document.getElementsByTagName(‘img‘);
function tick(){
var oDate=new Date();
var str=set(oDate.getHours())+set(oDate.getMinutes())+set(oDate.getSeconds());

for(var i=0;i<str.length;i++){
aImg[i].src=‘img/‘+str[i]+‘.png‘;
}
}
tick();
setInterval(tick
,1000);

//alert(str);
};
</script>
</head>
<body style="background:red; color:red; font-size:50px">
<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=‘mg\0.png‘ />
</body>
</html>

定时器小应用+date对象。。。

关键在于字符串的处理。。。。

将date对象中获取的数字不会按字符串加在一起,自定义set函数将返回值全变为字符串并在个位数前补0.。。。。。

再处理每个img标签。。。配以炫酷的png/jpg图像,效果好的很。。。。

时间: 2024-10-11 04:37:38

js数字时钟的相关文章

js之数字时钟

以下是我用js写的数字时钟年月日,日期时间的源码,请多指教: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

js数字滑动时钟

js数字滑动时钟: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,ul{margin:0;padding: 0;} .content{margin:100px auto;width

JS框架_(Vue.js)带有星期日期的数字时钟

数字时钟效果: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue.js带有星期日期的数字时钟代码</title> <style> html, body { height: 100%; } body { background:#C7C7C7; } p { margin: 0; padding: 0; } #clock { fon

JS — 实现简单的数字时钟

js实现简单的数字时钟 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS — 实现简单的数字时钟效果</title> 6 <link rel="stylesheet" type="text/css" href=""> 7 </head>

js实现动态数字时钟

1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS — 实现简单的数字时钟效果</title> <link rel="stylesheet" type="text/css" href=""> </head> <body&g

JS制作一个创意数字时钟

通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模型,从特殊到一般. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>cnblog头部轮播图</title&

数字时钟小插件

学习js中----今天试着写了下数字时钟. html代码如下: <body style="font-size:50px;background:black;color:#fff;"> <img src="img/1.png"> <img src="img/4.png"> : <img src="img/0.png"> <img src="img/6.png"

Css3+jQuery打造的一款带动画效果的数字时钟

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Css3+jQuery打造的一款带动画效果的数字时钟丨任E行F9行车记录仪|gopro官网|电影院座椅|</title> <style type="text/css&quo

【canvas】绘制一个数字时钟

使用canvas绘制一个数字时钟 基础内容 下面是此案例中会使用到的一些绘图API //获取绘图上下文 var ctx = canvas.getContext('2d'); //绘制直线 ctx.moveTo(100, 100); ctx.lineTo(700, 700); //绘制曲线 ctx.arc( centerx, centery, radius, //圆心的坐标以及半径的值 startingAngle,endingAngle, //从哪个弧度制开始到那个弧度值结束 anticlockw