今天的學習內容主要是“事件”
一、Event對象：Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
1、onclick 鼠標點擊
eg.
<body>
<script>
function text(){
console.log("java");
}
</script>
<div onclick="text()">點擊</div>
</body>
2、onchange 內容變動
eg.
<body>
<script>
function text(){
console.log("java");
}
</script>
<select onchange="text()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<textarea onchange="text()"></textarea>
</body>
3、onfocus/onblur 獲取/失去焦點事件
eg.
<body>
<script>
function text(){
console.log("java");
}
function test(){
console.log("script");
}
</script>
<input onfocus="text()" onblur="test()" />
</body>
4、onmousemove事件
eg.
<body>
<style>
#mouse{
border: 1px solid green;
height: 200px;
width: 200px;
}
</style>
<script>
function text(){
console.log("java");
}
</script>
<div id="mouse" onmousemove="text()"></div>
</body>
5、onmouseover/onmouseout事件
eg.
<body>
<style>
#mouse{
border: 1px solid green;
height: 200px;
width: 200px;
}
</style>
<script>
function text(){
console.log("java");
}
function test(){
console.log("script");
}
</script>
<div id="mouse" onmouseover="text()" onmouseout="test()"></div>
</body>
6、onkeydown/onkeyup事件
eg.
```
<body>
<style>
#mouse{
display:inline-block;
border: 1px solid green;
height: 200px;
width: 200px;
}
</style>
<script>
function text(){
console.log("java");
}
function test(){
console.log("script");
}
</script>
<input id="mouse" onkeydown="text()" onkeyup="test()"/>
</body>
7、onsubmit事件
eg.
<body>
<form action="http://www.baidu.com">
<input type="submit" value="提交" onsubmit="return submit();"/>
</form>
</body>8、onload事件
eg.
<head>
//getElementById 括號裏的id要引起來
function img(){
document.getElementById("img").src="img/sina2.jpg";
}
</head>
<body onload="img()">
<img id="img"/>
</body>
二、getElement用法
document.getElementById通過id
getElementsByClassName通過class
getElementsByName通過name
getElementsByTagName通過標籤名
eg.
<body>
<span id="aa"></span>
<p class="p"></p>
<p class="p"></p>
<input type="checkbox" name="box" />
<input type="checkbox" name="box" />
<input type="checkbox" name="box" />
<script>
var a= document.getElementById("aa");
var b= document.getElementsByClassName("p");
var c= document.getElementsByName("box");
var d= document.getElementsByTagName("span");
console.log(a);
console.log(b);
console.log(c);
console.log(d);
</script>
</body>三、Date對象
1、創建 Date 對象的語法：
new Date();
eg. var date = new Date;
2、Date對象方法
getFullYear()—從 Date 對象中返回四位數字表示的年份
getMonth()—從 Date 對象中返回月份 (0 ~ 11)
getDate()—從 Date 對象中返回一個月中的某一天 (1 ~ 31)
getDay()—從 Date 對象中返回一週中的某一天 (0 ~ 6)
getHours()—返回 Date 對象的小時 (0 ~ 23）
getMinutes()—返回 Date 對象的分鐘 (0 ~ 59)
getSeconds()—返回 Date 對象的秒數 (0 ~ 59)
eg.
<head>
<script>
function time(){
var date = new Date;
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var week = date.getDay();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var A = (hour>12)? "下午":"上午";
week="周"+"日一二三四五六".charAt(week);
month = (month<10)? "0"+month:month;
day = (day<10)? "0"+day:day;
hour = (hour>9)? hour:"0"+hour;
minute = (minute>9)? minute:"0"+minute;
second = (second>9)? second:"0"+second;
var currentTime=year+"-"+month+"-"+day+" "+A+hour+":"+minute+":"+second+" "+week;
document.getElementById("time").innerHTML=currentTime;
}
setInterval("time()",1);
</script>
</head>
<body onload="time()">
<div id="time"></div>
</body>