CSS结合JavaScript编写的一段在网页上动态显示时间的代码
yaodilu 2020-01-06
使用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 0喜欢 / 0评论 2020-11-04
多读书读好书 0喜欢 / 0评论 2020-11-03
RedCode 0喜欢 / 0评论 2020-10-28
jiedinghui 0喜欢 / 0评论 2020-10-25
Ladyseven 0喜欢 / 0评论 2020-10-22
hellowzm 0喜欢 / 0评论 2020-10-12
zuncle 0喜欢 / 0评论 2020-09-28
Ladyseven 0喜欢 / 0评论 2020-09-11
jiedinghui 0喜欢 / 0评论 2020-09-07
xiaohuli 0喜欢 / 0评论 2020-09-02
葉無聞 0喜欢 / 0评论 2020-09-01
impress 0喜欢 / 0评论 2020-08-26
ThikHome 0喜欢 / 0评论 2020-08-24
nicepainkiller 0喜欢 / 0评论 2020-08-20
aSuncat 0喜欢 / 0评论 2020-08-19
hellowzm 0喜欢 / 0评论 2020-08-18
zengni 0喜欢 / 0评论 2020-08-17
李鴻耀 0喜欢 / 0评论 2020-08-17
AlisaClass 0喜欢 / 0评论 2020-08-09
myloveqiqi 0喜欢 / 0评论 2020-08-09
csstpeixun 0喜欢 / 0评论 2020-08-07
NARUTOLUOLUO 0喜欢 / 0评论 2020-08-03
yaodilu 0喜欢 / 0评论 2020-08-03
buttonChan 0喜欢 / 0评论 2020-08-02
lanzhusiyu 0喜欢 / 0评论 2020-08-01
xvzhengyang 0喜欢 / 0评论 2020-07-30
drdrsky 0喜欢 / 0评论 2020-07-29
Phoebe的学习天地 0喜欢 / 0评论 2020-07-28
zhanghaibing00 0喜欢 / 0评论 2020-07-28
xiaohuli 0喜欢 / 0评论 2020-07-28
somboy 0喜欢 / 0评论 2020-07-27
Ladyseven 0喜欢 / 0评论 2020-07-25
teresalxm 0喜欢 / 0评论 2020-07-25
xvzhengyang 0喜欢 / 0评论 2020-07-25
nicepainkiller 0喜欢 / 0评论 2020-07-24
AlisaClass 0喜欢 / 0评论 2020-07-19
hellowzm 0喜欢 / 0评论 2020-07-19
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT
昔人已老 0喜欢 / 0评论 2020-07-19
zhanghao 0喜欢 / 0评论 2020-07-19
lanzhusiyu 0喜欢 / 0评论 2020-07-19
骆驼的自白 0喜欢 / 0评论 2020-07-18
lanzhusiyu 0喜欢 / 0评论 2020-07-19
hellowzm 0喜欢 / 0评论 2020-07-19
waterv 0喜欢 / 0评论 2020-07-18
CSSEIKOCS 0喜欢 / 0评论 2020-07-18
lanzhusiyu 0喜欢 / 0评论 2020-07-18