1. 定时器
- setInterval(function(){ 函数体 }, 毫秒数) 每隔多长时间（毫秒）执行一次
- setTimeout(function(){ 函数体 }, 毫秒数) 延迟多长时间执行一次，只执行一次
setInterval() 函数实现在页面中显示当前时间：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function getTime() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var timeStr = year + "年" + month + "月" + day + "日 " + hour + ":" + minute + ":" + second;
document.getElementById("d1").innerHTML = timeStr;
}
window.onload = function () {
setInterval(function () { getTime() }, 1000);
}
</script>
</head>
<body>
<div id="d1">
</div>
</body>
</html>
setTimeout() 函数实现在页面中显示当前时间：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function getTime() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var timeStr = year + "年" + month + "月" + day + "日 " + hour + ":" + minute + ":" + second;
document.getElementById("d1").innerHTML = timeStr;
setTimeout(function(){ getTime() }, 1000);
}
window.onload = function () {
setTimeout(function(){ getTime() }, 1000);
}
</script>
</head>
<body>
<div id="d1">
</div>
</body>
</html>
2. 常见得HTML事件
- onclick 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function test1(){
alert("按钮1被点击了")
}
window.onload = function(){
document.getElementById("btn2").onclick = function(){
alert("按钮2被点击了")
}
}
</script>
</head>
<body>
<button onclick="test1()">按钮1</button>
<button id="btn2">按钮2</button>
</body>
</html>
- onchange 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function testChange(){
alert(d1.checked)
}
function selectCity(){
alert(d2.value)
}
window.onload = function(){
d2.value = "ZK";
}
</script>
</head>
<body>
<input type="checkbox" id="d1" onchange="testChange()">打球<br>
<select id="d2" onchange="selectCity()">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">广州</option>
<option value="ZK">周口</option>
</select>
</body>
</html>
- onfocus onblur 事件
onfocus 获得焦点事件，onblur失去焦点事件
实现：输入框获得焦点背景变为绿色，失去焦点变为黄色；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function getPoint(){
i1.style.background = "green";
}
function losePoint(){
i1.style.background = "yellow";
}
</script>
</head>
<body>
<input type="text" id="i1" onfocus="getPoint()" onblur="losePoint()">
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
