① 在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代碼如下: