基于javascript实现动态时钟效果

2024-03-15 08:56:05

本文实例讲解了javascript动态时钟效果的实现方法，分享给大家供大家参考，具体内容如下

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态时钟</title>
<script type="text/javascript">
//在网页上输出：今天的日期、星期、现在的时间（动态时钟）
function start()
{
  var today=new Date();
  var year=today.getFullYear();
  var month=today.getMonth()+1;
  var day=today.getDate();
  var hours=today.getHours();
  var minutes=today.getMinutes();
  var seconds=today.getSeconds();
  //如果是单位数字，前面补0
  month=month<10? "0"+month :month;
  day=day<10? "0"+day :day;
  hours=hours<10? "0"+hours :hours;
  minutes=minutes<10? "0"+minutes :minutes;
  seconds=seconds<10? "0"+seconds :seconds;
  //时间信息连成字符串
  var str="今天是"+year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;
  //获取id=result的内容
  var obj=document.getElementById("result");
  obj.innerHTML=str;
  //延时器
  window.setTimeout("start()",1000);
}
</script>
</head>

<body onload="start()">
<div id="result"></div>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

js实现倒计时时钟的示例代码

如下所示: 复制代码代码如下:  <SCRIPT language=JavaScript1.2>function setcountdown(theyear,themonth,theday){yr=theyear;mo=themonth;da=theday}setcountdown(2008,7,12)var occasion="2008北京奥运会"var message
JavaScript实现简单的时钟实例代码

复制代码代码如下: <html> <head> <title>JS实现简单的时钟</title><script> function displayTime() { document.getElementById("time").innerHTML = new Date().toTimeString(); } setInterval(displayTime,1000); // 每隔1秒钟调用dis
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&q
一个简易时钟效果js实现代码

本文实例为大家分享了js时钟特效的具体代码,供大家参考,具体内容如下 js代码 var canvas = document.getElementById("clock"); var clock = canvas.getContext("2d"); function zhong() { clock.save(); //开始画外层圆 clock.translate(200, 200); clock.strokeStyle = 'black'; clock.lineWi
js实现简单的秒表走动的时钟特效

本文实例介绍了javascript实现简单的秒表走动的时钟特效.分享给大家供大家参考.具体如下: 运行效果图如下: 实现代码: <html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds(
js实现一个简单的数字时钟效果

效果图: 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>一个简单的数字时钟</title> <script type="text/javascript" charset="utf-8
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时

时间对象作为非常重要的一个对象,对我们学.net的人来说,并不是很重要,但这并不意味着我们可以忽略,事实上,用得着的时候还是很多的,如果完全依赖JS处理时间,那是会出问题的,因为JS总是假设本地机器上的时间是正确的.还有个原因,他总按照GTM市区来计量.我们只是返回当前date对象的副本,我们即便是修改,那也不会对对象本身有任何影响. 演示一:动态的时钟(来个复杂的) 11:55:13 演示二:显示完整的一些方法(事实上我很讨厌有些格式了) Mon Oct 1 22:35:25 UTC+0800
js实现的跟随鼠标移动的时钟效果(中英文日期显示)

中文日期限制 "; props2=""; Split=360/n; Dsplit=360/D.length; HandHeight=ClockHeight/4.5 HandWidth=ClockWidth/4.5 HandY=-7; HandX=-2.5; scrll=0; step=0.06; currStep=0; y=new Array();x=new Array();Y=new Array();X=new Array(); for (i=0; i '+props2+D
html5 canvas js(数字时钟)实例代码

复制代码代码如下: <!doctype html><html> <head> <title>canvas dClock</title> </head> <body> <canvas id = "clock" width = "500px" height = "200px"> 您的浏览
超级可爱纯js网页时钟

//oObj input requires that a matrix filter be applied. //deg input defines the requested angle of rotation. var deg2radians = Math.PI * 2 / 360; function MatrixFilter(obj) { if(!obj.filters)return; //alert(obj.filters.item(0)); var Matrix; for(p in o

基于javascript实现动态时钟效果

相关推荐

随机推荐