本文目录一览：
- 1、用JS实现钟表计时器功能
- 2、javascript,实现一个时钟,页面显示当前时间包括年月日时 分 秒 并设定一个时间点，当该
- 3、JavaScript中的数字时钟的显示问题
- 4、怎么把js时钟放在网页侧边
- 5、如何使用JS实现一个简易数码时钟
- 6、js做网页时钟，哪里错了
用JS实现钟表计时器功能
利用new Date();可以轻松的实现钟表功能,甚至日历功能.
如果要实现计时器功能也可以用这个对象.
var c = 1000; // 一千微秒,就是一秒
function funBeginDisTime() {
c = c + 1000; // 节奏为一秒
var now = new Date(0,0,0,0,0,0,c);
var day = now.getDate();
var hour = now.getHours();
var minutes = now.getMinutes();
var sec = now.getSeconds();
$(“#myClock”).html(day + “天”+ hour + “时” + minutes + “分” + sec + “秒”);
myTime = setTimeout(“funBeginDisTime()”, 1000); // 每一秒执行一次
}
function funStopDisTime() {
clearTimeout(myTime);
}
body
input id=”Button2″ type=”button” value=”开始” onclick=”funBeginDisTime()”/
span id=”myClock”/span
input id=”Button1″ type=”button” value=”暂停” onclick=”funStopDisTime()” /
/body
setInterval() 是循环重复执行某个动作,
setTimeout()是只执行一次.
比如每五秒就通过AJAX向服务器发送一次请求.那么就可以用setInterval():
[javascript] view plain copy
setInterval(“reloadAction()”, 5000);
[javascript] view plain copy
function reloadAction() {
$.ajax({
“type”:”POST”,
“url”:”live.php”,
“data”:”getData=live”,
“success”:function(data) {
// ….
}
});
}
javascript,实现一个时钟,页面显示当前时间包括年月日时 分 秒 并设定一个时间点，当该
html
head
titleTime/title
/head
body
div id=”time”/div
div id=”alert”/div
/body
script type=”text/javascript” charset=”utf-8″ async defer
var time = document.getElementById(“time”);
showTime();
function showTime() {
// To get the date time
var date = new Date();
var year = date.getYear() + 1900;
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var date_time = year + “-” + month + “-” + day + ” ” + hour + “:” + min + “:” + sec;
time.innerHTML = date_time;
// when the time is equal your condition, show the special words.
if(date_time == “2014-6-25 11:45:20”) {
document.getElementById(“alert”).innerHTML = “It’s time to display your words here.”;
}
}
// set the interval time
setInterval(showTime, 1000);
/script
/html
JavaScript中的数字时钟的显示问题
html
head
script language=”JavaScript”
function showTime()
{
var currentDate = new Date();
var hours = currentDate.getHours();
var minutes = currentDate.getMinutes();
var seconds = currentDate.getSeconds();
//
//格式化输出
//
if (minutes 10)
minutes = “0” + minutes;
if (seconds 10)
seconds = “0” + seconds;
var currentTimeString =”font color=blue” + hours + “:” + minutes + “:” + seconds + “/font”;
document.getElementById(“show”).innerHTML=currentTimeString; //改这地方
window.setTimeout(“showTime()”, 1000);
}
/script
/head
body onload=”showTime()”
span id=”show”/span !–加这地方–
/body
/html
怎么把js时钟放在网页侧边
1、首先打开电脑。
2、其次在电脑主页找到并点击设置。
3、然后在设置中点击时钟设置。
4、最后将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();
}
js做网页时钟，哪里错了
html
head
title左侧/title
/head
body
table width=”100%” height=”100%” border=”1″
tr width=”100%” height=”100%”
td border=”1″ bordercolor=”red”/td
td id=”timeArea” align=”right” valign=”bottom”/td
/tr
/table
script type=”text/javascript”
function start(){
var now=new Date();
var hr=now.getHours();
var min=now.getMinutes();
var sec=now.getSeconds();
var clocktext=”现在时间：”+hr+”:”+min+”:”+sec;
var timeTD=document.getElementById(“timeArea”);//获得时间字符串放置的单元格
timeTD.innerText=clocktext;//将时间字符串作为单元格的显示文本内容
window.setTimeout(“start()”,1000);//将时间字符串作为单元格的显示文本内容
}
start();//亲试，这样就可以了
/script
/body
/html
原创文章，作者：GTLW，如若转载，请注明出处：https://www.506064.com/n/132543.html
微信扫一扫 
支付宝扫一扫 