JavaScript练习（三）

最新推荐文章于 2024-04-25 13:12:55 发布

小圣_fighting

最新推荐文章于 2024-04-25 13:12:55 发布

阅读量1.1k

点赞数 5

分类专栏：学习笔记 html 文章标签： html

本文链接：https://blog.csdn.net/xie_xiansheng/article/details/50864728

版权

学习笔记同时被 2 个专栏收录

81 篇文章 0 订阅

订阅专栏

html

27 篇文章 0 订阅

订阅专栏

JavaScript练习demo三：

需求：1、页面上有按钮“显示时间”，单击该按钮，可以在页面上显示当前时间。
2、可以点击启动时钟，那么时钟开始走。
3、点停止时钟那么时钟停止。

========================================答案==========================================

html代码：

<span style="font-size:18px;"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>



<body>
<span style="font-size:24px;font:bold"> 3.动态时钟</span><br />
<input  type="button" value="显示时间"  οnclick="showtime()"/>
<input  type="button" value="开始计时"  οnclick="start()"/>
<input  type="button" value="停止计时"  οnclick="stop()"/> <br />
<input id="myput" type="text" value="" οnblur="myBlur()" style="border:none"/>
</body>
<script>
function myBlur(){
  var re = document.getElementById("myput");
  alert(re.value);
}
function showtime(){
	setTimeout(timescoll,1000)
}

var mytime = null;
function start(){
	if(mytime == null){
		mytime = setInterval(timescoll,1000);	
	}
}

//var i = 0;
function timescoll(){
	var date1 = new Date();
	var date2 = date1.toLocaleTimeString();
	document.getElementById("myput").value=date2;
	//i++;
}
function stop(){

	clearInterval(mytime);
	mytime = null;
}



</script>
</html></span>

效果图如下：

未点击显示时间时，页面是没有时间显示的

点击显示时间，显示系统当前时间

点击开始计时，从系统当前时间开始计时

点击停止计时，时间走动停止

小圣_fighting

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript练习（三）

JavaScript练习demo三：需求：1、页面上有按钮“显示时间”，单击该按钮，可以在页面上显示当前时间。 2、可以点击启动时钟，那么时钟开始走。 3、点停止时钟那么时钟停止。========================================答案================================
复制链接

扫一扫