简单的事件
1.实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img id="imges" src="img/images/off.gif"/> //html定义的id和图片
</body>
<script>
var img = document.getElementById("imges"); //通过id获取图片对象
var flag = false; //设置标记
img.onclick = function(){ //绑定事件
if(flag == false){ //描述事件的函数
img.src="img/images/on.gif";
flag = true;
}
else{
img.src="img/images/off.gif";
flag = false;
}
}
</script>
</html>
2.结果
点击前
点击后
3.自动页面跳转
实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="text-align: center;">
<span id="time" style="color: red;">5</span>秒后，自动跳转至百度...
</body>
<script>
var second = 5; //初始化秒数
function fun(){ //定义函数
second--; //倒计时
if(second <= 0){
location.href = "https://www.baidu.com"; //倒计时结束后跳转到百度
}
var time = document.getElementById("time"); //获取图片对象
time.innerHTML = second + ""; //改变HTML
}
setInterval(fun,1000); //一秒调用一次函数
</script>
</html>
结果：
跳转前：
跳转后：
