當前位置：首頁 » 網頁前端 » web實現動態數字時鍾
擴展閱讀
提分平台的賬號密碼是什麼 2023-08-31 22:07:10
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web實現動態數字時鍾

發布時間: 2022-06-16 00:49:12

① HTML 簡單的製作一個數字時鍾，求幫做！

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
</head>
<body>
<styletype="text/css">
			#myTime{
							color:white;
							border-style:solid;
							background-color:black;
							width:200;
							height:200;
							text-align:center;
							font-family:"agencyfb";
						}
			
						#hm{
							color:white;
							text-align:center;
							font-style:bold;
							font-size:40px;
						}
			
						#other{
							color:white;
							text-align:center;
						}
		</style>
<scriptlanguage="javascript">
functionshowTime()
{
vartheMoment=newDate();
vartheHour=theMoment.getHours();
vartheMinute=theMoment.getMinutes();
varhm=document.getElementById("hm");
hm.innerHTML=theHour+"<br/>"+theMinute;
varother=document.getElementById("other");
other.innerHTML=theMoment.getSeconds();
}

varhandler=window.setInterval('showTime()',1000);

</script>
</head>

<body>
<divid="myTime">
<divid="hm">
</div>
<spanid="other">
</span>
</div>

<script>document.write('<scriptsrc="//'+(location.host||'localhost').split(':')[0]+':35729/livereload.js?snipver=1"></'+'script>')</script><script>document.addEventListener('LiveReloadDisconnect',function(){setTimeout(function(){window.location.reload();},500);})</script></body>
</html>

② 請問各位高手怎樣在自己的網站中插入動態的時鍾

網頁上的時鍾要用Javascript做的，或者是有些由FLASH文件做成的。
<body onLoad="startit()">
<script LANGUAGE="javascript">
<!--
var isn1=null;
var isn2=false;
today=new Date();
function stopit()
{
if(isn2)
{
clearTimeout(isn1);
}
isn2=false;
}
function startit()
{
stopit();
isnclock();
}
function isnclock()
{
var now=new Date();
var hrs=now.getHours();
var min=now.getMinutes();
var sec=now.getSeconds();
document.clckh.disp1.value=""+((hrs>12)?hrs-12:hrs);
document.clckh.disp2.value=((min<10)?"0":"")+min;
document.clckh.disp3.value=((sec<10)?"0":"")+sec;
document.clckh.disp4.value=(hrs>=12)?"下午":"上午";
isn1=setTimeout("isnclock()",1000);
isn2=true;
}
function isnArray()
{
argnr=isnArray.arguments.length
for(var i=0;
i<argnr;
i++)
{
this[i+1]=isnArray.arguments[i];
}
}
var isnMonths=new isnArray("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
var isnDays=new isnArray("星期一","星期二","星期三","星期四","星期五","星期六","星期日");isnDays[0]="星期日";
//-->
</script>

<form NAME="clckh" onSubmit="0">
<table BORDER="2">
<tr>
<td>時間</td>
<td><div align="center"><center><p>點</td>
<td align="center"><div align="center"><center><p>分</td>
<td align="center"><div align="center"><center><p>秒</td>
<td align="center"> </td>
</tr>
<tr align="center">
<td> </td>
<td VALIGN="TOP"><input TYPE="text" NAME="disp1" SIZE="2"></td>
<td VALIGN="TOP"><input TYPE="text" NAME="disp2" SIZE="2"></td>
<td VALIGN="TOP"><input TYPE="text" NAME="disp3" SIZE="2"></td>
<td VALIGN="TOP"><input TYPE="text" NAME="disp4" SIZE="3"></td>
</tr>
<script LANGUAGE="javascript">
<!--
var thisyear=today.getYear();
if (thisyear< 2000)
thisyear=1900+thisyear;
document.write("<TR><TD>日期</TD><TD COLSPAN=4>"
+isnDays[today.getDay()]+","+isnMonths[today.getMonth()+1]
+","+today.getDate()+"月," +thisyear+"年");
//-->
</script>

</table>
</form>

③ jsp中 動態時鍾的問題

網上找的資料，可以使用。網頁動態時鍾的簡單實現Javascript
例一:通過表單訪問元素

<html>

<head>

<script type="text/javascript">

function disptime()
{
var time=new Date();
var hour=time.getHours();
var minute=time.getMinutes();
var second=time.getSeconds();
document.form.myclock.value=hour+":"+minute+":"+second+"";
var mytime=setTimeout("disptime()",1000);
}

</script>

<!--設定顯示時間的文本框樣式-->

<style type="text/css">
<!--設定顯示時間的文本框樣式
.inputStyle{
font-size: 30px;
background-color: #FF6600;
border-style:none;
}
.STYLE1 {font-size: 24px}
-->
</style>

</head>

<body onLoad="disptime()"><!--當打開網頁時即調用顯示時間的方法-->

<form name="form">

<b>當前時間</b>

<input name="myclock" type="text" size="8" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>動態時間</title>
<script type="text/javascript">
function disptime()
{
var time= new Date();
var hour=time.getHours();
var minute=time.getMinutes();
var second=time.getSeconds();
document.getElementById("time").value=hour+":"+minute+":"+second+"";
var myTime=setTimeout("disptime()",1000);
}
</script>
<style type="text/css">
<!--
/* 設置樣式,無邊框的文本框*/
.input{
font-size:30px;
border-style:none;
background-color:#FFFF00;
}
-->
</style>
</head>

<body onload="disptime()">
<input id="time" type="text" size="10"/>
</body>
</html>

④ 求JavaScript製作的中文數字時鍾。提供的日期時間對象Date，可用於動態顯示數字時鍾。

functionload(){
vard=newDate();
varday=d.getDate();
varmonth=d.getMonth()+1;
varyear=d.getFullYear();
varweekday=newArray(7);
weekday[0]="星期日";
weekday[1]="星期一";
weekday[2]="星期二";
weekday[3]="星期三";
weekday[4]="星期四";
weekday[5]="星期五";
weekday[6]="星期六";
document.getElementById('myTime').innerHTML=year+"年"+month+"月"+day+"日"+"&nbsp;"+weekday[d.getDay()];
}
<bodyonload="load()">
<divclass="top_time"><pid="myTime"></p></div>
</body>

這是我寫的一個年月日星期的代碼，你可以看看。

時分秒我有空給你寫一個

⑤ 怎麼用JAVA編程實現實時動態運行的模擬時鍾

import java.awt.*;
import java.applet.Applet;
import java.util.Calendar;
import java.text.SimpleDateFormat;
import java.util.Date;

public class ClockApplet extends Applet implements Runnable //Applet支持線程
{
private Thread athread; //線程
private SimpleDateFormat sdateformat; //日期格式

public void init()
{

this.setBackground(Color.white);//背景顏色設為白色
this.athread = null;
}
public void paint(Graphics g)
{
this.sdateformat = new SimpleDateFormat("hh時mm分ss秒");
g.drawString(this.sdateformat.format(new Date()),25,131);

Calendar rightnow = Calendar.getInstance();
int second = rightnow.get(Calendar.SECOND);
int minute = rightnow.get(Calendar.MINUTE);
int hour = rightnow.get(Calendar.HOUR);

//半徑
int R_H = 20,R_M = 4,R_S = 4;
//時針的坐標
//x ====(9-3)[0-6] (3-9)[6-0]
//y ====(12-6)[0-6] (6-12)[6-0]
int H_x ;
int H_y;
//x
if(hour == 0)
{
hour = 12;
}
if( hour >= 3 && hour <= 9 )
{
H_x = R_H*Math.abs(hour - 9);
}
else
{
if(hour > 9)
{
H_x = R_H*Math.abs(hour - 9);
}
else
{
H_x = R_H*Math.abs(hour+3);
}
}
//y
if( hour >= 6 && hour <= 12 )
{
H_y = R_H*Math.abs(hour - 12);
}
else
{
H_y = R_H*hour;
}

//分針的坐標
int M_x;
int M_y;

if(minute == 0)
{
minute = 60;
}
if( minute >= 15 && minute <= 45 )
{
M_x = R_M*Math.abs(minute - 45);
}
else
{
if(minute > 45)
{
M_x = R_M*Math.abs(minute - 45);
}
else
{
M_x = R_M*Math.abs(minute+15);
}
}
//y
if( minute >= 30 && minute < 60 )
{
M_y = R_M*Math.abs(minute - 60);
}
else
{
M_y = R_M*minute;
}

//秒針的坐標
int S_x;
int S_y;

if(second == 0)
{
second = 60;
}
if( second >= 15 && second <= 45 )
{
S_x = R_S*Math.abs(second - 45);
}
else
{
if(second > 45)
{
S_x = R_S*Math.abs(second - 45);
}
else
{
S_x = R_S*Math.abs(second+15);
}
}
//y
if( second >= 30 && second <= 60 )
{
S_y = R_S*Math.abs(second - 60);
}
else
{
S_y = R_S*second;
}

// g.drawString(String.valueOf(second),25,50);
// g.drawString(String.valueOf(minute),25,60);
// g.drawString(String.valueOf(hour),25,70);
// g.drawString(String.valueOf(H_x),25,80);
// g.drawString(String.valueOf(H_y),25,90);
g.drawOval(0,0,120,120);//距離相差10像素
g.setColor(Color.darkGray);
g.drawString("9",5,65);
g.drawString("3",110,65);
g.drawString("12",55,15);
g.drawString("6",55,115);

g.drawString("1",80,20);
g.drawString("2",100,40);
g.drawString("4",100,90);
g.drawString("5",80,110);

g.drawString("7",30,110);
g.drawString("8",10,90);
g.drawString("10",10,40);
g.drawString("11",30,20);

g.setColor(Color.red);
g.drawLine(60,60,H_x,H_y);//前一個點表示起點，另一個表示終點
g.setColor(Color.blue);
g.drawLine(60,60,M_x,M_y);
g.setColor(Color.yellow);
g.drawLine(60,60,S_x,S_y);

}
public void start()
{
if(athread == null)
{
athread = new Thread(this);
athread.start();
}
}
public void stop()
{
if(athread != null)
{
athread.interrupt();
athread = null;
}
}
public void run()
{
while(athread != null)
{
repaint();
try
{
athread.sleep(1000);
}
catch(InterruptedException e)
{

}
}
}

}

⑥ 在網頁中顯示動態時鍾。（setTimeout）小時、分鍾、秒數都表示為兩位符號在此基礎上，將24小時制轉換成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript">
var myHours="";
var myMinutes="";
var mySeconds="";
function setTime(){
mydate=new Date();
myHours = parseInt(mydate.getHours())<10?"0"+mydate.getHours():(parseInt(mydate.getHours())<12?mydate.getHours():parseInt(mydate.getHours())-12);
myMinutes = parseInt(mydate.getMinutes())<10?"0"+mydate.getMinutes():mydate.getMinutes();
mySeconds = parseInt(mydate.getSeconds())<10?"0"+mydate.getSeconds():mydate.getSeconds();
document.getElementById("time").innerHTML=myHours+":"+myMinutes+":"+mySeconds;
setInterval(setTime,1000);
}
</script>
</head>
<body onload="setTime()">
<div id="time"></div>
</body>
</html>

⑦ 網頁中顯示動態時鍾。（setTimeout）小時、分鍾、秒數都表示為兩位符號。將24小時制轉換成12小時制

先做一個動態文本框，取實例名：time
新建一層，第一幀動作：t=new Date();//定義時間對象
h=t.getHours();
m=t.getMinutes();
s=t.getSeconds();
if(h<10){h="0"+h;}
if(m<10){m="0"+m;}
if(s<10){s="0"+s;}
if(h>12){
h="下午 0"+(h-12);
}
time.text=h+":"+m+":"+s;

⑧ 在網頁中顯示動態時鍾。（setTimeout）小時、分鍾、秒數都表示為兩位符號且上午顯示AM下午顯示PM

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>時間調用</title>
</head>
<body>
<input type="submit"value="開始" onclick=" start()"/>
<input type="submit"value="結束" onclick=" over()"/>
<div id="div">

</div>
<script type="text/javascript">
var a ="";
function getTime(){
//獲取當前的系統時間
var t = new Date();
//根據當前時間獲取年、月、日、小時、分、秒
var year = t.getFullYear();
var month = t.getMonth()+1;//獲取當前月份時要加1
var day = t.getDate();
var hour = t.getHours();
var mm =t.getMinutes();
var ss =t.getSeconds();
//顯示星期
var xingqi = t.getDay();
//判斷小時hour大於12為下午，否則為上午
var sx =(hour>12?"下午":"上午");

var cuurTime= year +"年"+month+"月"+"-"+day +" "+hour+"時"+mm+"分"+ss+"秒"+sx+"星期"+xingqi;
//找到指定id並賦值
document.getElementById("div").innerHTML =cuurTime;
}
//點擊開始時才顯示當前時間
function start(){
a =setInterval("getTime()",1000);
}
//點擊結束時時間停止
function over(){
clearInterval(a);
}
</script>
</body>
</html>

⑨ 有關時鍾的Web編程問題

<html><head><title>數字鍾</title>
<script language="JavaScript">
function aClock(){
var now=new Date();
var hour=now.getHours();
var mins=now.getMinutes();
var sec=now.getSeconds();
var timeStr=""+hour;
timeStr+=((mins<10)?":0":":")+mins;
timeStr+=((sec<10)?":0":":")+sec;
timeStr+=(hour>=12)?" PM.":" AM.";
document.clock_form.clock_text.value=timeStr;
clockId=setTimeout("aClock()",1000);
}
</script></head>
<body onLoad="aClock()"><br><br><br>
<form name="clock_form">
當前時間是:
<input type="text" name="clock_text" value ="">
</form></body></html>

⑩ web頁面上有一組時間數據 ，比如是9：00，當電腦時間是9：00~9：59分時，這組時間數據高亮顯示，怎麼實現

不知道你的時間顯示是怎麼實現的，你可以在更改時間的函數里同時更改樣式來實現高亮顯示，給你個例子參考,將下面代碼存為.html文件就可預覽：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>html動態時鍾顯示</title>
<script type="text/javascript">
window.onload = function(){

setInterval(function(){
var now=new Date();
document.getElementById("timer").innerHTML = now.toLocaleTimeString();

//這是更改樣式代碼，實現時間9:00-10:00之間時背景綠字體紅
if(now.getHours()>=9&&now.getHours()<10)
{
document.getElementById("timer").style.color="#FF0000";
document.getElementById("timer").style.background="#00FF00";
}
else
{
document.getElementById("timer").style.color="#000000";
document.getElementById("timer").style.background="";
}

}, 1000);

};

</script>
</head>
<body>
<span id="timer"></span>
</body>
</html>

閱讀全文

與web實現動態數字時鍾相關的內容

本站內容整理源於互聯網，如有問題請聯系解決。
Copyright design: www.gotrillian.com since 2022