投稿
  1. 簡單一點首頁
  2. 編程

純js實現實時刷新時間顯示代碼,定時刷新頁面js

SVZMX • • 編程

本文目錄一覽：

JAVASCRIPT怎麼樣製作動態時間顯示，給我代碼也可以，謝謝啦

html

title/title

head

script language=”JavaScript”

var timerID=null;

var timerRunning=false;

file://啟動

function startclock()

{

stopclock();

time();

}

file://停止

function stopclock()

{

if(timerRunning)

clearTimeout(timerID);

timerRunning=false;

}

file://實現模塊

function time()

{

file://使用new操作符創建時間對象

var now=new Date();

var yr=now.getYear();

var mName=now.getMonth()+1;

var dayNr=((now.getDate()10)?”0″:””)+now.getDate();

var dName=now.getDay()+1;

var ampm=(now.getHours()=12)?”下午”:”上午”

var hours=now.getHours();

hours=((hours12)?hours-12:hours);

var minutes=((now.getMinutes()10)?”:0″:”:”)+now.getMinutes();

var seconds=((now.getSeconds()10)?”:0″:”:”)+now.getSeconds();

file://判斷今天是星期幾

if(dName==1)Day=”Sunday”;

if(dName==1)Day=”Monday”;

if(dName==3)Day=”Tuesday”;

if(dName==4)Day=”Wednesday”;

if(dName==5)Day=”Thursday”;

if(dName==6)Day=”Friday”;

if(dName==7)Day=”Saturday”;

file://判斷月份

if(mName==1)Month=”Janauary”;

if(mName==2)Month=”February”;

if(mName==3)Month=”March”;

if(mName==4)Month=”April”;

if(mName==5)Month=”May”;

if(mName==6)Month=”June”;

if(mName==7)Month=”July”;

if(mName==8)Month=”August”;

if(mName==9)Month=”September”;

if(mName=10)Month=”October”;

if(mName=11)Month=”November”;

if(mName=12)Month=”December”;

var DayOfWeek=(“”+Day+””);

var MonthDayYear=(“”+Month+”,”+dayNr+”,”+yr+””);

document.forms[0].elements[0].value=MonthDayYear;

var TimeValue=(“”+hours+minutes+seconds+””+ampm);

document.forms[0].elements[1].value=TimeValue;

timerID=setTimeout(“time()”,1000);

timerRunning=true;

}

/script

/head

body onLoad=”startclock()”

form

br

table border=0 widtn=400

tr

TD align=”center”input type=”button” title=”停止” onclick=”stopclock()”

TD align=”center”input type=”button” title=”繼續” onclick=”startclock()”

/tr

/table

/form

/html

代碼二

script

//定義時鐘顯示的函數

function displayTime()

{

var today = new Date(); // 定義日期對象

var hours = today.getHours();

var minutes = today.getMinutes();

var seconds = today.getSeconds();

// 從日期對象中中獲得時間信息

minutes = fixTime(minutes);

seconds = fixTime(seconds); // 引入fixTime（）函數，使分和秒可以正常顯示，對於小於10的數字則在該數字前加一個0

//將時間字元串組合在一起並寫出

var the_time = hours + “:” + minutes + “:” + seconds;

window.document.the_form.the_text.value = the_time; //把表格的值重新寫一遍，相當於刷新時間

the_timeout= setTimeout(‘displayTime();’,500); //每半秒鐘執行一次該函數,即500毫秒

}

function fixTime(the_time)

{

if (the_time 10)

{

the_time = “0” + the_time;

}

return the_time;

}

/script

附 一個更酷的時鐘原代碼

html

body bgcolor=#3A6EA5

pb用JavaScript編程實現鐘錶特效/b/p

請用查看源代碼方式閱讀所有程序代碼。

script language=”JavaScript”

!–

dCol=’#22ff’;

fCol=’#e09000′;

sCol=’00ff00′;

mCol=’ff0000′;

hCol=’ffff00′;

ClockHeight=40;

ClockWidth=40;

ClockFromMouseY=0;

ClockFromMouseX=100;

d=new Array(“星期日”,”星期一”,”星期二”,”星期三”,”星期四”,”星期五”,”星期六”);

m=new Array(“一月”,”二月”,”三月”,”四月”,”五月”,”六月”,”七月”,”八月”,”九月”,”十月”,”十一月”,”十二月”);

date=new Date();

day=date.getDate();

year=date.getYear();

if (year 2000) year=year+1900;

TodaysDate=”年 “+m[date.getMonth()]+day+”日 “+d[date.getDay()]+” “+year;

D=TodaysDate.split(”);

H=’…’;

H=H.split(”);

M=’….’;

M=M.split(”);

S=’…..’;

S=S.split(”);

Face=’1 2 3 4 5 6 7 8 9 10 11 12′;

font=’Arial’;

size=1;

speed=0.9;

ns=(document.layers);

ie=(document.all);

Face=Face.split(‘ ‘);

n=Face.length;

a=size*10;

ymouse=0;

xmouse=0;

scrll=0;

props=”font face=”+font+” size=”+size+” color=”+fCol+””;

props2=”font face=”+font+” size=”+size+” color=”+dCol+””;

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 n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}

Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();

for (i=0; i D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}

if (ns){

for (i=0; i D.length; i++)

document.write(‘layer name=”nsDate’+i+'” top=0 left=0 height=’+a+’ width=’+a+’center’+props2+D[i]+’/font/center/layer’);

for (i=0; i n; i++)

document.write(‘layer name=”nsFace’+i+'” top=0 left=0 height=’+a+’ width=’+a+’center’+props+Face[i]+’/font/center/layer’);

for (i=0; i S.length; i++)

document.write(‘layer name=nsSeconds’+i+’ top=0 left=0 width=15 height=15font face=Arial size=3 color=’+sCol+’centerb’+S[i]+’/b/center/font/layer’);

for (i=0; i M.length; i++)

document.write(‘layer name=nsMinutes’+i+’ top=0 left=0 width=15 height=15font face=Arial size=3 color=’+mCol+’centerb’+M[i]+’/b/center/font/layer’);

for (i=0; i H.length; i++)

document.write(‘layer name=nsHours’+i+’ top=0 left=0 width=15 height=15font face=Arial size=3 color=’+hCol+’centerb’+H[i]+’/b/center/font/layer’);

}

if (ie) {

document.write(‘div id=”Od” style=”position:absolute;top:0px;left:0px”div style=”position:relative”‘);

for (i=0; i D.length; i++)

document.write(‘div id=”ieDate” style=”position:absolute;top:0px;left:0;height:’+a+’;width:’+a+’;text-align:center”‘+props2+D[i]+’/font/div’);

document.write(‘/div/div’);

document.write(‘div id=”Of” style=”position:absolute;top:0px;left:0px”div style=”position:relative”‘);

for (i=0; i n; i++)

document.write(‘div id=”ieFace” style=”position:absolute;top:0px;left:0;height:’+a+’;width:’+a+’;text-align:center”‘+props+Face[i]+’/font/div’);

document.write(‘/div/div’);

document.write(‘div id=”Oh” style=”position:absolute;top:0px;left:0px”div style=”position:relative”‘);

for (i=0; i H.length; i++)

document.write(‘div id=”ieHours” style=”position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:’+hCol+’;text-align:center;font-weight:bold”‘+H[i]+’/div’);

document.write(‘/div/div’);

document.write(‘div id=”Om” style=”position:absolute;top:0px;left:0px”div style=”position:relative”‘);

for (i=0; i M.length; i++)

document.write(‘div id=”ieMinutes” style=”position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:’+mCol+’;text-align:center;font-weight:bold”‘+M[i]+’/div’);

document.write(‘/div/div’)

document.write(‘div id=”Os” style=”position:absolute;top:0px;left:0px”div style=”position:relative”‘);

for (i=0; i S.length; i++)

document.write(‘div id=”ieSeconds” style=”position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:’+sCol+’;text-align:center;font-weight:bold”‘+S[i]+’/div’);

document.write(‘/div/div’)

}

(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){

ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;

xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;

}

(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;

function ClockAndAssign(){

time = new Date ();

secs = time.getSeconds();

sec = -1.57 + Math.PI * secs/30;

mins = time.getMinutes();

min = -1.57 + Math.PI * mins/30;

hr = time.getHours();

hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;

if (ie){

Od.style.top=window.document.body.scrollTop;

Of.style.top=window.document.body.scrollTop;

Oh.style.top=window.document.body.scrollTop;

Om.style.top=window.document.body.scrollTop;

Os.style.top=window.document.body.scrollTop;

}

for (i=0; i n; i++){

var F=(ns)?document.layers[‘nsFace’+i]:ieFace[i].style;

F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;

F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);

}

for (i=0; i H.length; i++){

var HL=(ns)?document.layers[‘nsHours’+i]:ieHours[i].style;

HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;

HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);

}

for (i=0; i M.length; i++){

var ML=(ns)?document.layers[‘nsMinutes’+i]:ieMinutes[i].style;

ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;

ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);

}

for (i=0; i S.length; i++){

var SL=(ns)?document.layers[‘nsSeconds’+i]:ieSeconds[i].style;

SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;

SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);

}

for (i=0; i D.length; i++){

var DL=(ns)?document.layers[‘nsDate’+i]:ieDate[i].style;

DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;

DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);

}

currStep-=step;

}

function Delay(){

scrll=(ns)?window.pageYOffset:0;

Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);

Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);

for (i=1; i D.length; i++){

Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);

Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);

}

y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);

x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);

for (i=1; i n; i++){

y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);

x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}

ClockAndAssign();

setTimeout(‘Delay()’,50);

}

if (ns||ie)window.onload=Delay;

//–

/script

/body

/html

JS 指定時間 刷新頁面

script

setInterval(function(){

    var d=new date();

    if(d.getFullYear()==2018d.getMonth()==0d.getDate()==27d.getHours()==18d.getMinutes()==0)

        location.reload();

},60000);

/script

以上代碼只會在指定時間（2018-1-27 18:00:00）刷新一次，如果希望每天的同一時間（比如18點整）都刷新，則

script

setInterval(function(){

    var d=new date();

    if(d.getHours()==18d.getMinutes()==0)

        location.reload();

},60000);

/script

求js指定時間範圍對頁面進行刷新代碼

10到20分鐘刷新頁面：

setTimeout(“location.reload();”,parseInt(Math.random()*600000)+600000);

JS 5秒倒計時的代碼怎麼寫？時間要實時顯示在屏幕上的。

!DOCTYPE html

html lang=”en”

head

meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /

titlejs實現倒計時60秒的簡單代碼(推薦)/title

script type=”text/javascript” src=”js/jquery.js”/script

/head

body

input type=”button” id=”btn” value=”免費獲取驗證碼” onclick=”settime(this)” /

script type=”text/javascript”

var countdown=60;

function settime(val) {

if (countdown == 0) {

val.removeAttribute(“disabled”);

val.value=”免費獲取驗證碼”;

countdown = 5;

} else {

val.setAttribute(“disabled”, true);

val.value=”重新發送(” + countdown + “)”;

countdown–;

setTimeout(function() {

settime(val)

},1000)

}

}

/script

/body

/html

JavaScript簡介

JavaScript 是腳本語言

JavaScript 是一種輕量級的編程語言。

JavaScript 是可插入 HTML 頁面的編程代碼。

JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。

JavaScript 課外書

如果 JavaScript 教程學習完畢，並且需要更深入地學習這門語言，《JavaScript 高級教程》絕對是您最好的選擇。本教程從 JavaScript 的歷史開始講起，直到當前它對 XML 和 Web 服務的支持。

將學習到如何擴展該語言，以使它適應特殊的需求。

還將學到如何使用 JavaScript 創建無縫的客戶機 – 伺服器通信。

原創文章，作者：SVZMX，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/328939.html

贊 (0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
SVZMX的頭像SVZMX
0 0
上一篇 2025-01-14 18:54
下一篇 2025-01-14 18:54

相關推薦

  • Python周杰倫代碼用法介紹

    本文將從多個方面對Python周杰倫代碼進行詳細的闡述。 一、代碼介紹 from urllib.request import urlopen from bs4 import Bea…

    GPYNH的頭像 GPYNH
    編程 2025-04-29

  • Python字元串寬度不限制怎麼打代碼

    本文將為大家詳細介紹Python字元串寬度不限制時如何打代碼的幾個方面。 一、保持代碼風格的統一 在Python字元串寬度不限制的情況下，我們可以寫出很長很長的一行代碼。但是，為了…

    OQFRU的頭像 OQFRU
    編程 2025-04-29

  • Python基礎代碼用法介紹

    本文將從多個方面對Python基礎代碼進行解析和詳細闡述，力求讓讀者深刻理解Python基礎代碼。通過本文的學習，相信大家對Python的學習和應用會更加輕鬆和高效。 一、變數和數…

    BFAIW的頭像 BFAIW
    編程 2025-04-29

  • 倉庫管理系統代碼設計Python

    這篇文章將詳細探討如何設計一個基於Python的倉庫管理系統。 一、基本需求 在著手設計之前，我們首先需要確定倉庫管理系統的基本需求。 我們可以將需求分為以下幾個方面： 1、庫存管…

    EKUXU的頭像 EKUXU
    編程 2025-04-29

  • Python滿天星代碼：讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼，為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員，都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    DCQKT的頭像 DCQKT
    編程 2025-04-29

  • 寫代碼新手教程

    本文將從語言選擇、學習方法、編碼規範以及常見問題解答等多個方面，為編程新手提供實用、簡明的教程。 一、語言選擇 作為編程新手，選擇一門編程語言是很關鍵的一步。以下是幾個有代表性的編…

    DIYUZ的頭像 DIYUZ
    編程 2025-04-29

  • Python實現簡易心形代碼

    在這個文章中，我們將會介紹如何用Python語言編寫一個非常簡單的代碼來生成一個心形圖案。我們將會從安裝Python開始介紹，逐步深入了解如何實現這一任務。 一、安裝Python …

    DKZPU的頭像 DKZPU
    編程 2025-04-29

  • 怎麼寫不影響Python運行的長段代碼

    在Python編程的過程中，我們不可避免地需要編寫一些長段代碼，包括函數、類、複雜的控制語句等等。在編寫這些代碼時，我們需要考慮代碼可讀性、易用性以及對Python運行性能的影響。…

    SSLAV的頭像 SSLAV
    編程 2025-04-29

  • Python愛心代碼動態

    本文將從多個方面詳細闡述Python愛心代碼動態，包括實現基本原理、應用場景、代碼示例等。 一、實現基本原理 Python愛心代碼動態使用turtle模塊實現。在繪製一個心形的基礎…

    HPWOS的頭像 HPWOS
    編程 2025-04-29

  • 北化教務管理系統介紹及開發代碼示例

    本文將從多個方面對北化教務管理系統進行介紹及開發代碼示例，幫助開發者更好地理解和應用該系統。 一、項目介紹 北化教務管理系統是一款針對高校學生和教職工的綜合信息管理系統。系統實現的…

    LTOOO的頭像 LTOOO
    編程 2025-04-29

發表回復

登錄後才能評論