JavaScript学习

最新推荐文章于 2024-10-27 11:25:22 发布

Allen啊

最新推荐文章于 2024-10-27 11:25:22 发布

阅读量88

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_52764169/article/details/124282873

版权

劲

variable变量

DOM编程

树形结构

事件与事件流

BOM编程 browser Object Model 浏览器对象模型

时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#myProgress{
				width: 1000px;
				height: 30px;
				position: relative;
				background-color: $ddd;
			}
			#myBar{
				background-color: red;
				width:0px;
				height: 30px;
				position: absolute;		
			}
		
		</style>
	</head>
	<body>
		<div id="myProgress">
			<div id="myBar"></div>
		</div>
		<br>
		<button type="button" onclick="start()">点我</button>;
		<script type="text/javascript">
				function start(){
					var bar = document.getElementById("myBar");
					var width =0;
					var id = setInterval(frame,50);
					function frame(){
						if (width==1000){
							clearInterval(id);
						}
						else{
							width = width+10;
							bar.style.width = width + "px";
							
						}
					}
				}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>当前时间:</p>
		<p id="demo"></p>
		<button onclick="myStopFunction" type="button">停止</button>
		<script type="text/javascript">
			var myVar = setInterval(function(){myTimer()},1000);
			function myTimer(){
				var date = new Date();
				var time = date.toLocaleTimeString();
				document.getElementById("demo").innerHTML=time;
			}
			function myStopFunction(){
				clearInterval(myVar);
			}
		</script>
	</body>
</html>