CSS结合JavaScript编写的一段在网页上动态显示时间的代码
使用CSS结合JavaScript可以很方便地实现在网页上动态显示时间的功能,主要应用了CSS的input方法,JavaScript的Date对象中的设置时间间隔setInterval()方法.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="clock">
<input type="button" value="begin" onclick="begin_click()">
<input type="botton" value="end" onclick="end_click()" sytle="width:20px">
<script>
function gettime(){
var d=new Date();
var year=d.getFullYear();
var month=d.getMonth()+1;
var day=d.getDate();
var hour=d.getHours();
var minute=d.getMinutes();
var second=d.getSeconds();
ret=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
return(ret)
}
function begin(){
var current_time=gettime();
var ret=document.getElementById("clock");
ret.value=current_time;
}
function end_click(){
var ret=document.getElementById("clock");
ret.value=null;
clearInterval(ID);
}
function begin_click(){
ID=setInterval(begin,1000);
}
</script>
</body>
</html>程序运行后,点击屏幕上begin按钮,则开始动态显示日期和时间,间隔为1秒更新一次,若点击end按键则停止显示,并清空左边时间,如下图
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18