当前位置：文档之家 › javascript动态时钟源代码

javascript动态时钟源代码

  • 格式：docx
  • 大小：12.34 KB
  • 文档页数：2

下载文档原格式

  / 2

合集下载

javascript实现动态时钟的启动和停止

javascript实现动态时钟的启动和停止

javascript实现动态时钟的启动和停⽌javascript实现动态时钟的启动和停⽌，点击开始按钮，获取当前时间，点击停⽌按钮，时间停⽌<!DOCTYPE html><html><head><meta charset="UTF-8"><title>动态时钟的启动和停⽌</title></head><body background="img/2.jpg" style="background-repeat: no-repeat;margin-left: 180px;"><!--1.显⽰当前时间2.启动秒表3.停⽌时钟--><h1>动态时钟</h1><p>当前时间：<span id="clock" style="color: #FF0000;"/> </span></p><p><input type="button" value="start" onclick="start()" style="color: #FF0000;"/><input type="button" value="stop" onclick="stop()" style="color: #FF0000;"/></p></body><script type="text/javascript">var timer;function start(){//设置定时器（⽅法的实现，毫秒数）timer=setInterval(function(){var now=new Date();var time=now.toLocaleTimeString();var c=document.getElementById("clock");c.innerHTML=time;},1000);}function stop(){//暂停清楚定时器clearInterval(timer);}</script></html>效果截图：更多JavaScript时钟特效点击查看：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JavaScript实现简单钟表时钟

JavaScript实现简单钟表时钟

JavaScript实现简单钟表时钟本⽂实例为⼤家分享了JavaScript实现简单钟表时钟的具体代码，供⼤家参考，具体内容如下效果图：主要思想：1.先画⼀个圆表盘。

2.再⽤js循环画刻度（每⼀个刻度都是li标签）。

3.再画时分秒指针。

4.再⽤JS让指针动起来。

代码中有详细的注释可以直接看代码。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><style id="style">ul{list-style: none;}#circle{width: 200px;height: 200px;border-radius: 100px;border: 1px solid black;}#kedu li{width: 1px;height: 6px;border-radius: 10px;background-color: black;transform-origin: center 101px;/*设置li标签的旋转中⼼和旋转半径。

*/position: absolute;left: 109px;top: 9px;}#kedu li:nth-of-type(5n+1){height: 12px;width: 2px;}/* 秒针的绘制，⽤transform把div绘制成线条，后⾯的指针都是在这样。

关于Javascript中页面动态钟表的简单实现

关于Javascript中页面动态钟表的简单实现

关于Javascript中页⾯动态钟表的简单实现1、问题并不繁琐，在于HTML中 DOM（⽂档对象模型）⽅法的掌握，我的钟表实现重点⽤到了三个函数和⼀个事件A）setInterval() ⽅法可按照指定的周期（以毫秒计）来调⽤函数或计算表达式。

setInterval() ⽅法会不停地调⽤函数，直到 clearInterval() 被调⽤或窗⼝被关闭。

由 setInterval() 返回的 ID 值可⽤作 clearInterval() ⽅法的参数。

简⽽⾔之，这个⽅法有两个参数，第⼀个参数是指定需要被调⽤的函数，第⼆个参数是指定时间，即以多少毫秒为周期（1000毫秒=1秒）去重复调⽤指定的⽅法。

结束标志看上述W3c的标准解释。

B）new Date(); 在JavaScript中，所有的变量在该语⾔中是当做对象来看待的，在使⽤封装好的⽅法时需要使⽤new开辟出来，具体不在详细介绍，有⾼⼿⽐我讲述的会更详细。

C）需要查找⽂档中的⼀个特定的元素，最有效的⽅法是 getElementById()。

在操作⽂档的⼀个特定的元素时，最好给该元素⼀个 id 属性，为它指定⼀个（在⽂档中）唯⼀的名称，然后就可以⽤该 ID 查找想要的元素。

所以，在div中加⼀个Id⽤此⽅法调⽤，就实现了连接。

事件： window.onload window.onload是⼀个事件，当⽂档加载完成之后就会触发该事件，可以为此事件注册事件处理函数，并将要执⾏的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。

以下是程序实现注意<body>标签中写的<div id ="timeshow"></div>此处之所以给div写id就是为了script标签中document.getElementById⽅法的调⽤。

注释1：window.onload=function(){ 整个script标签内的所有语句 } 之所以加这个⽅法，在⼀定程度上讲是为了安全性，保证这些代码在⽂本代码运⾏之后⼀定运⾏，等于加个安全措施，⾄于安全措施有没有必要加，看官试试就好。

javascript实现数字时钟效果

javascript实现数字时钟效果

javascript实现数字时钟效果本⽂实例为⼤家分享了javascript实现数字时钟效果的具体代码，供⼤家参考，具体内容如下效果图需求分析1、通过date获取时间2、通过间隔定时器setInterval动态获取时间3、间隔定时器setInterval间隔设置为1000毫秒（1秒）获取⼀次时间4、为了样式好看，我们这是⽤数字图⽚来代替数字的源代码HTML部分<div id="div"><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="img/0.png" />秒</div>css部分<style>/*⽆*/</style>JavaScript部分<script>// 需求:数码时钟var date = new Date();var imgArr = document.getElementsByTagName('img');//获取img图⽚的⼀个集合var hours,minutes,seconds;var timre = setInterval(function () {date = new Date();// 获取⼩时hours = date.getHours();imgArr[0].src = "img/" + parseInt(hours / 10) + ".png"imgArr[1].src = "img/" + hours % 10 + ".png"// 获取分钟minutes = date.getMinutes();imgArr[2].src = "img/" + parseInt(minutes / 10) + ".png"imgArr[3].src = "img/" + minutes % 10 + ".png"// 获取秒seconds = date.getSeconds();imgArr[4].src = "img/" + parseInt(seconds / 10) + ".png"imgArr[5].src = "img/" + seconds % 10 + ".png"console.log(hours);console.log(minutes);console.log(seconds);}, 1000)</script>总代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="div"><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="img/0.png" />秒</div></body></html><script>// 需求:数码时钟var date = new Date();var imgArr = document.getElementsByTagName('img');//获取img图⽚的⼀个集合 var hours,minutes,seconds;var timre = setInterval(function () {date = new Date();// 获取⼩时hours = date.getHours();imgArr[0].src = "img/" + parseInt(hours / 10) + ".png"imgArr[1].src = "img/" + hours % 10 + ".png"// 获取分钟minutes = date.getMinutes();imgArr[2].src = "img/" + parseInt(minutes / 10) + ".png"imgArr[3].src = "img/" + minutes % 10 + ".png"// 获取秒seconds = date.getSeconds();imgArr[4].src = "img/" + parseInt(seconds / 10) + ".png"imgArr[5].src = "img/" + seconds % 10 + ".png"}, 1000)</script>所⽤图⽚：由于你们没有图⽚，直接复制代码，展⽰不出效果，⼤家可以⾃⼰找⼏张图⽚来代替，稍微修改下即可，只要能看得懂代码，修改起来莫得问题啦以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JS实现动态日期

JS实现动态日期

JS实现动态⽇期JS实现动态⽇期<html><head><meta charset="utf-8"><title></title></head><body><h1 id="time"></h1><script type="text/javascript">function week(option){// switch(option){// case 1:// return "星期⼀";// case 2:// return "星期⼆";// case 3:// return "星期三";// case 4:// return "星期四";// case 5:// return "星期五";// case 6:// return "星期六";// case 0:// return "星期⽇";// }var week = "⽇⼀⼆三四五六";return "星期" + week.charAt(option);}function setTime(){var dateTime = new Date();var year = dateTime.getFullYear();var month = dateTime.getMonth()+1;month = month < 10 ? "0" + month : month;var date = dateTime.getDate();date = date < 10 ? "0" + date : date;var hour = dateTime.getHours();hour = hour < 10 ? "0" + hour : hour;var minute = dateTime.getMinutes();minute = minute < 10 ? "0" + minute : minute;var second = dateTime.getSeconds();second = second < 10 ? "0" + second : second;var day = week(dateTime.getDay());var str = `${year}年${month}⽉${date}⽇ ${hour}:${minute}:${second} ${day}`;// console.log(str);document.getElementById("time").innerHTML = str;// setTimeout("setTime()",1000);}setTime();setInterval("setTime()",1000);function test(message){console.log(message);}</script></body></html>。

简单的JS时间,秒针会跳动

简单的JS时间,秒针会跳动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>简单的JS时钟 - 我爱模板网</title><style>h1{width:450px; height:50px; line-height:50px; margin:0 auto; font-family:"微软雅黑"; color:#666;}span#seconds{font-size:18px;}</style><script>window.onload = function(){var showTime = function(){var myDate = new Date();var myYear = myDate.getFullYear();var myMonth = myDate.getMonth();var myDay = myDate.getDate();var myHours = myDate.getHours();var myMinutes = myDate.getMinutes();if(myMinutes < 10){myMinutes = "0"+myMinutes;}var mySeconds = myDate.getSeconds();if(mySeconds < 10){mySeconds = "0"+mySeconds;}var myTime = document.getElementById("myTime");myTime.innerHTML = myYear+" - "+myMonth+" - "+myDay+" "+myHours+" : "+myMinutes+"<span id='seconds'>"+mySeconds+"</span>";}setInterval(showTime,1000); }</script></head><body><script></script><h1 id="myTime"></h1></body></html>。

JS实现动态倒计时功能(天数时分秒)

JS实现动态倒计时功能（天数时分秒）在JS中，可以使用`setInterval(`方法来实现动态倒计时功能。

以下是一个完成该功能的完整代码示例：```javascript//获取倒计时容器元素const countdownContainer =document.getElementById('countdown');//设置倒计时的目标日期和时间const targetDate = new Date('October 31, 202400:00:00').getTime(;//更新倒计时function updateCountdow//获取当前日期和时间const currentDate = new Date(.getTime(;//计算距离目标日期和时间的毫秒数const distance = targetDate - currentDate;//计算剩余的天数、小时、分钟和秒数const days = Math.floor(distance / (1000 * 60 * 60 * 24));const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));const seconds = Math.floor((distance % (1000 * 60)) / 1000);//将剩余时间显示在倒计时容器中countdownContainer.innerHTML = `剩余时间：${days}天 ${hours}时 ${minutes}分 ${seconds}秒`;//判断是否达到目标日期和时间，如果达到则停止倒计时if (distance < 0)clearInterval(countdownInterval);countdownContainer.innerHTML = '倒计时已结束';}//每秒钟更新一次倒计时const countdownInterval = setInterval(updateCountdown, 1000);```在上述代码中，首先获取了用于显示倒计时的容器元素`countdownContainer`。

js显示动态时间的方法详解

js显⽰动态时间的⽅法详解本⽂实例讲述了js显⽰动态时间的⽅法。

分享给⼤家供⼤家参考，具体如下：Date对象的⽅法Date 对象能够使你获得相对于国际标准时间（格林威治标准时间，现在被称为 UTC-Universal Coordinated Time）或者是Flash 播放器正运⾏的操作系统的时间和⽇期。

要使⽤Date对象的⽅法，你就必须先创建⼀个Date对象的实体（Instance）。

Date 对象必须使⽤ Flash 5 或以后版本的播放器。

Date 对象的⽅法并不是静态的，但是在使⽤时却可以应⽤于所指定的单独实体。

Date 对象的⽅法简介：·getDate ｜根据本地时间获取当前⽇期(本⽉的⼏号)·getDay ｜根据本地时间获取今天是星期⼏(0-Sunday,1-Monday...)·getFullYear ｜根据本地时间获取当前年份(四位数字)·getHours ｜根据本地时间获取当前⼩时数(24⼩时制,0-23)·getMilliseconds ｜根据本地时间获取当前毫秒数·getMinutes ｜根据本地时间获取当前分钟数·getMonth ｜根据本地时间获取当前⽉份(注意从0开始:0-Jan,1-Feb...)·getSeconds ｜根据本地时间获取当前秒数·getTime ｜获取UTC格式的从1970.1.1 0:00以来的毫秒数·getTimezoneOffset ｜获取当前时间和UTC格式的偏移值(以分钟为单位)·getUTCDate ｜获取UTC格式的当前⽇期(本⽉的⼏号)·getUTCDay ｜获取UTC格式的今天是星期⼏(0-Sunday,1-Monday...)·getUTCFullYear ｜获取UTC格式的当前年份(四位数字)·getUTCHours ｜获取UTC格式的当前⼩时数(24⼩时制,0-23)·getUTCMilliseconds ｜获取UTC格式的当前毫秒数·getUTCMinutes ｜获取UTC格式的当前分钟数·getUTCMonth ｜获取UTC格式的当前⽉份(注意从0开始:0-Jan,1-Feb...)·getUTCSeconds ｜获取UTC格式的当前秒数·getYear ｜根据本地时间获取当前缩写年份(当前年份减去1900)·setDate ｜设置当前⽇期(本⽉的⼏号)·setFullYear ｜设置当前年份(四位数字)·setHours ｜设置当前⼩时数(24⼩时制,0-23)·setMilliseconds ｜设置当前毫秒数·setMinutes ｜设置当前分钟数·setMonth ｜设置当前⽉份(注意从0开始:0-Jan,1-Feb...)·setSeconds ｜设置当前秒数·setTime ｜设置UTC格式的从1970.1.1 0:00以来的毫秒数·setUTCDate ｜设置UTC格式的当前⽇期(本⽉的⼏号)·setUTCFullYear ｜设置UTC格式的当前年份(四位数字)·setUTCHours ｜设置UTC格式的当前⼩时数(24⼩时制,0-23)·setUTCMilliseconds ｜设置UTC格式的当前毫秒数·setUTCMinutes ｜设置UTC格式的当前分钟数·setUTCMonth ｜设置UTC格式的当前⽉份(注意从0开始:0-Jan,1-Feb...)·setUTCSeconds ｜设置UTC格式的当前秒数·setYear ｜设置当前缩写年份(当前年份减去1900)·toString ｜将⽇期时间值转换成"⽇期/时间"形式的字符串值·Date.UTC ｜返回指定的UTC格式⽇期时间的固定时间值页⾯js直接得到系统动态时间完整⽰例：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS实时显⽰时间</title></head><body><div id="localtime"></div><script type="text/javascript">function showLocale(objD){var str,colorhead,colorfoot;var yy = objD.getYear();if(yy<1900) yy = yy+1900;var MM = objD.getMonth()+1;if(MM<10) MM = '0' + MM;var dd = objD.getDate();if(dd<10) dd = '0' + dd;var hh = objD.getHours();if(hh<10) hh = '0' + hh;var mm = objD.getMinutes();if(mm<10) mm = '0' + mm;var ss = objD.getSeconds();if(ss<10) ss = '0' + ss;var ww = objD.getDay();if ( ww==0 ) colorhead="<font color=\"#FF0000\">";if ( ww > 0 && ww < 6 ) colorhead="<font color=\"#373737\">";if ( ww==6 ) colorhead="<font color=\"#008000\">";if (ww==0) ww="星期⽇";if (ww==1) ww="星期⼀";if (ww==2) ww="星期⼆";if (ww==3) ww="星期三";if (ww==4) ww="星期四";if (ww==5) ww="星期五";if (ww==6) ww="星期六";colorfoot="</font>"str = colorhead + yy + "年" + MM + "⽉" + dd + "⽇" + hh + ":" + mm + ":" + ss + " " + ww + colorfoot;//alert(str);return str;}function tick(){var today;today = new Date();document.getElementById("localtime").innerHTML = showLocale(today);window.setTimeout("tick()", 1000);}tick();</script></body></html>运⾏效果如下图所⽰：PS：对JavaScript时间与⽇期操作感兴趣的朋友还可以参考本站在线⼯具：更多关于JavaScript相关内容可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。

利用JavaScript实现简单的网页时钟

利⽤JavaScript实现简单的⽹页时钟⽬录⼀、效果展⽰⼆、使⽤的技术三、⽇期对象1.指定时间2.获取⽬前时间三、源代码前⾔：今天带⼤家使⽤JavaScript定制⼀款⽹页时钟⼀、效果展⽰⼆、使⽤的技术主要使⽤了js的⽇期对象,实现的时候先创建⼀个⽇期对象，并进⾏⽹页布局,对时间获取之后将时间填⼊对应的标签内。

然后使⽤多线程实现时钟的变动。

三、⽇期对象1.指定时间代码如下：<script>//创建⽇期对象d=new Date();//设置年⽉⽇d.setFullYear(1982,03,28);//创建⼀个数组var week=new Array(7);week[0]="周⼀";week[1]="周⼆";week[2]="周三";week[3]="周四";week[4]="周五";week[5]="周六";week[6]="周天";//将⽇期插⼊标签内function data(){// 获取年份document.getElementById("demo").innerHTML=d.getFullYear();// 获取从1970年1⽉1⽇⾄今的毫秒数document.getElementById("demo1").innerHTML=d.getTime();// 将当⽇的⽇期转换成字符串document.getElementById("demo2").innerHTML=d.toUTCString();// 获取当前周⼏document.getElementById("demo3").innerHTML=week[d.getDay()-1];// 获取具体时间document.getElementById("demo4").innerHTML=d;x=document.getElementById("demo5");}</script>2.获取⽬前时间代码如下：<script>var today=new Date();var h=today.getHours();var m=today.getMinutes();var s=today.getSeconds();</script>三、源代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title><!--如何使⽤ Date() ⽅法获得当⽇的⽇期。

一个简单的JS时间控件示例代码（JS时分秒时间控件）

⼀个简单的JS时间控件⽰例代码（JS时分秒时间控件）⾃⼰在⽹上找了半天没找到只有 “时分秒”的控件，就⾃⼰做了个，发在这⾥⽅便有⼈⽤到复制代码代码如下:/**//************************************ 使⽤说明：* ⾸先把本控件包含到页⾯* <script src="XXX/setTime.js" type="text/javascript"></script>* 控件调⽤函数：_SetTime(field)* 例如 <input name="time" type="text" onclick="_SetTime(this)"/>*************************************/var str = "";document.writeln("<div id=/"_contents/" style=/"padding:6px; background-color:#E3E3E3; font-size: 12px; border: 1px solid #777777; position:absolute; left:?px; top:?px; width:?px; height:?px; z-index:1; visibility:hidden/">");str += "/u65f6<select name=/"_hour/">";for (h = 0; h <= 9; h++) {str += "<option value=/"0" + h + "/">0" + h + "</option>";}for (h = 10; h <= 23; h++) {str += "<option value=/"" + h + "/">" + h + "</option>";}str += "</select> /u5206<select name=/"_minute/">";for (m = 0; m <= 9; m++) {str += "<option value=/"0" + m + "/">0" + m + "</option>";}for (m = 10; m <= 59; m++) {str += "<option value=/"" + m + "/">" + m + "</option>";}str += "</select> /u79d2<select name=/"_second/">";for (s = 0; s <= 9; s++) {str += "<option value=/"0" + s + "/">0" + s + "</option>";}for (s = 10; s <= 59; s++) {str += "<option value=/"" + s + "/">" + s + "</option>";}str += "</select> <input name=/"queding/" type=/"button/" onclick=/"_select()/" value=/"/u786e/u5b9a/" style=/"font-size:12px/" /></div>";document.writeln(str);var _fieldname;function _SetTime(tt) {_fieldname = tt;var ttop = tt.offsetTop; //TT控件的定位点⾼var thei = tt.clientHeight; //TT控件本⾝的⾼var tleft = tt.offsetLeft; //TT控件的定位点宽while (tt = tt.offsetParent) {ttop += tt.offsetTop;tleft += tt.offsetLeft;}document.all._contents.style.top = ttop + thei + 4;document.all._contents.style.left = tleft;document.all._contents.style.visibility = "visible";}function _select() {_fieldname.value = document.all._hour.value + ":" + document.all._minute.value + ":" + document.all._second.value; document.all._contents.style.visibility = "hidden";}。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<head><title>动态时钟</title></head>
<script language="javascript">
function timer(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var weekday = date.getDay();
if(weekday==0){
weekday="星期日";
}
if(weekday==1){
weekday="星期一";
}
if(weekday==2){
weekday="星期二";
}
if(weekday==3){
weekday="星期三";
}
if(weekday==4){
weekday="星期四";
}
if(weekday==5){
weekday="星期五";
}
if(weekday==6){
weekday="星期六";
}
document.getElementById("showTime").innerHTML = "<h1>你好！今天的日期是："+year+"年"+month+"月"+day+"日&nbsp;&nbsp;"+weekday+"&nbsp;&nbsp;<br>现在时间是："+hour+"时"+minute+"分"+second+"秒</h1>";
}
var t = setInterval("timer()",1000);
clearInterval("t");
</script>
<body onload="timer()">
<div id="showTime"></div>
</body>。