① 在js中使用什么样的方法能够把获取的秒速每一秒都刷新呢就像电子时钟一样!
js实现数字时钟功能
<div id="time"></div>
<script>
function G(id){
return document.getElementById(id);
}
function clock(){
var time=new Date();
var week=['日','一','二','三','四','五','六回']
G('time').innerHTML='<p>'+time.getFullYear()+'年'+(time.getMonth()+1)+'月'+time.getDate()+'日 星期答'+week[time.getDay()]+'</p>';
G('time').innerHTML+='<p>'+time.getHours()+':'+(time.getMinutes()>9?'':'0')+time.getMinutes()+':'+(time.getSeconds()>9?'':'0')+time.getSeconds()+'</p>';
}
setInterval('clock()',500);
</script>
② 如何用js做翻页效果
参考代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scripttype="text/javascript"language="javascript"src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"language="javascript">
$(function(){
$("#right").click(function(){
varroll=$("<div></div>",{css:{position:"absolute",border:"solid1px#999",left:"806px",top:"10px",height:"494px",width:"1px",background:"#fff"}}).appendTo($("#book").parent());
$(roll).animate({
left:"10px",
width:"398px"
},1000,function(){
$("#left").css({"background":"#fff"});
$(roll).fadeOut(300,function(){
$(roll).remove();
})
});
});
});
</script>
</head>
<bodystyle="padding:5px;margin:0;">
<divid="book"style="width:797px;height:494px;background:#ccc;border:solid6px#ccc;">
<divid="left"style="width:398px;height:494px;float:left;background:url(http://www.codefans.net/jscss/demoimg/201011/PLh.png)no-repeattopleft;cursor:pointer;"></div>
<divid="right"style="width:398px;height:494px;float:left;background:#fff;cursor:pointer;margin-left:1px;text-align:right;"><pstyle="margin-top:470px;font-size:12px;color:#999;">点这翻页</p></div>
</div>
</body>
</html>
③ HTML如何实现数字时钟垂直翻页切换代码
http://www.xwcms.net/js/rqsj/24313.html http://www.xwcms.net/js/rqsj/83318.html http://www.xwcms.net/js/rqsj/17874.html 这是三种你需要的效果,如果不合适的话你再在这个网站里面找一下,还有好专多呢,属我怕回答被删了,不敢弄太多的网址,望采纳
④ 如何使用JS实现一个简易数码时钟
设计思路:
数码时钟即通过图片数字来显示当前时间,需要显示的图片的URL根据时间变化而变化。
a、获取当前时间Date()并将当前时间信息转换为一个6位的字符串;
b、根据时间字符串每个位置对应的数字来更改图片的src的值,从而实现更换显示图片;
构建HTML基础并添加样式。
<divid="div1">
<imgsrc='./数字时钟(1)_files/0.jpg'>
<imgsrc='./数字时钟(1)_files/0.jpg'>
:
<imgsrc='./数字时钟(1)_files/0.jpg'>
<imgsrc='./数字时钟(1)_files/0.jpg'>
:
<imgsrc='./数字时钟(1)_files/0.jpg'>
<imgsrc='./数字时钟(1)_files/0.jpg'>
</div>
style样式
#div1{
width:50%;
margin:300pxauto;
background:black;
}
获取图片元素以及当前时间:
varoDiv=document.getElementById('div1');
varaImg=oDiv.getElementsByTagName('img');
varoDate=newDate();
varstr=oDate.getHours()+oDate.getMinutes()+oDate.getSeconds();
这里出现两个问题
1、oDate.getHours()返回的都是数字,这样编写为数字相加,而非字符串相加。
2、当获取的值为一位数时,会造成字符串的个数少于6,不满足初始设计要求。
解决以上两个问题的代码解决方案:
代码
varoDiv=document.getElementById('div1');
varaImg=oDiv.getElementsByTagName('img');
varoDate=newDate();
functiontwoDigitsStr()
{
if(n<10)
{return'0'+n;}
else
{return''+n;}
}
varstr=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());
设置所有图片的src值:
for(vari=0;i<aImg.length;i++)
{
aImg[i].src="./数字时钟(1)_files/"+str.charAt(i)+".jpg";
}
通过setInterval()来实现每隔1秒进行重新获取当前时间以及图片src值:
代码
varoDiv=document.getElementById('div1');
varaImg=oDiv.getElementsByTagName('img');
setInterval(functiontick()
{
varoDate=newDate();
varstr=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());
for(vari=0;i<aImg.length;i++)
{
aImg[i].src="./数字时钟(1)_files/"+str.charAt(i)+".jpg";
}
}
,1000);
但是还是有一个问题,网页在打开的初始阶段,显示时间为00:00:00,这是因为定时器有个特性,当定时器被打开后,不会立刻执行里面的函数,而是在1秒后执行。解决代码:
varoDiv=document.getElementById('div1');
varaImg=oDiv.getElementsByTagName('img');
functiontick()
{varoDate=newDate();
varstr=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());
for(vari=0;i<aImg.length;i++)
{
aImg[i].src="./数字时钟(1)_files/"+str.charAt(i)+".jpg";
}
}
setInterval(tick,1000);
tick();
问题:代码setInterval(tick,1000);中函数tick没有带括号,那么JS中函数带括号与不带括号有什么区别?
完整的数码时钟制作JS代码为:
functiontwoDigitsStr(n)
{
if(n<10)
{return'0'+n;}
else
{return''+n;}
}
window.onload=function()
{
varoDiv=document.getElementById('div1');
varaImg=oDiv.getElementsByTagName('img');
functiontick()
{varoDate=newDate();
varstr=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());
for(vari=0;i<aImg.length;i++)
{
aImg[i].src="./数字时钟(1)_files/"+str.charAt(i)+".jpg";
}
}
setInterval(tick,1000);
tick();
}
⑤ js Canvas实现的日历时钟案例有哪些
一、.获取上下文对象
var cxt = document.getElementById(‘元素名’).getContect(‘2d’);
IE8或更早的浏览器不支持元素。
二、 drawClock() – 实现画时钟
1. clearRect() 清空给定矩形内的指定像素。
context.clearRect(x,y,width,height);
属性 | 值
-----|------------
x,y | 要清除的矩形左上角点的(x,y)坐标
width,height| 要清除的矩形宽度和高度,单位为像素12345
2.new Date() — 得到系统时间
var sec = now.getSeconds(); var min = now.getMinutes(); var hour = now.getHours(); 123
3.画时钟的形状
cxt.beginPath(); cxt.lineWidth = 10; cxt.strokeStyle = "blue"; cxt.arc(550, 310, 300, 0, 360, false); cxt.closePath(); cxt.stroke(); 123456
beginPath()的作用是canvas的绘制方法,都会以上一次beginPath之后的所有路径为基础进行绘制。
closepath()是关闭路径,而不是结束路径,它会试图从当前路径的终点连一条路径到七、起点,让整个路径闭合起来。
cxt.lineWidth() : 画笔的宽度
cxt.strokeStyle() : 设置或返回用于笔触的颜色、渐变或模式。
属性值:color 指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。
gradient 用于填充绘图的渐变对象(线性或放射性)
pattern 用于创建 pattern 笔触的 pattern 对象
stroke ()绘制已定义的路径
arc() 方法创建弧/曲线(用于创建圆或部分圆)。如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
参数
描述
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。
eAngle 结束角,以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。
4)drawScale — 自定义函数画刻度
5. 画时钟刻度依托点
translate() 方法重新映射画布上的 (0,0) 位置。
-
JS代码如下: