笔记：
五元素对象常见属性
value
元素对象.value，获取元素对象的value属性值
JS事件
JS事件是什么？有什么作用？
通常鼠标或热键的动作我们称之为事件(Event),例如点击、表单提交、值发生改变、鼠标移入、移出······
通过JS事件、我们可以理解在JS事件驱动机制下进行
JS事件驱动机制简述
页面上的特效，我们可以理解在JS事件驱动机制下进行
JS事件驱动机制：
事件源：专门产生事件的组件
事件：由事件源所产生的动作或者事情
监听器：专门处理事件源所产生的事件
注册/绑定监听器：让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则调用监听器处理
常见的JS事件
点击事件(onclick)
点击事件：由鼠标或热键点击元素组件时触发
焦点事件
获取焦点事件(onfocus)
焦点：即整个页面的注意力
默认一个正常页面最多仅有一个焦点
通常焦点也能反映出用户目前的关注点，或者正在操作的组件
获取焦点事件：当元素组件获取焦点时触发
常见的JS事件
点击事件
焦点事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>倒计时</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
span{
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background: red;
color: blue;
font-size: 30px;
text-align: center;
line-height: 60px;
}
i{
font-style: normal;
font-size: 20px;
}
</style>
</head>
<body>
<span id="hs">1</span>
<i>:</i>
<span id="ms">59</span>
<i>:</i>
<span id="ss">47</span>
</body>
</html>
<script type="text/javascript">
var count = 1;
var Counter;
function countDown(){
Counter = setInterval(f,1000);
}
countDown();
function f(){
var hs = Number(document.getElementById("hs").innerHTML);
var ms = Number(document.getElementById("ms").innerHTML);
var ss = Number(document.getElementById("ss").innerHTML);
if(hs==0&&ms==0&&ss==0||ss>60||ms>60||hs>24){
var hs = document.getElementById("hs").innerHTML = "00";
var ms = document.getElementById("ms").innerHTML = "00";
var ss = document.getElementById("ss").innerHTML = "00";
clearInterval(Counter);
console.log(count);
return;
}
if(ss>0){
ss--;
document.getElementById("ss").innerHTML = ss;
count++;
}
if(ss==0){
if(ms>0){
ms--;
document.getElementById("ms").innerHTML = ms;
document.getElementById("ss").innerHTML = 59;
}
}
if(ms==0){
if(hs>0){
hs--;
document.getElementById("hs").innerHTML = hs;
document.getElementById("ms").innerHTML = 59;
}
}
}
</script>
