当前位置：首页 » 网页前端 » 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