劲
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>