<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.cls {
background-color: black;
}
</style>
</head>
<body id="bd">
<input type="button" value="开/关灯" id="btn"/>
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick = function () {
document.body.className = document.body.className != "cls" ? "cls" : "";
}
</script>
</body>
</html>
效果:
**************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<input type="button" value="显示大图" id="btn"/>
<img src="../image/kiwi-small.jpg" alt="" id="im">
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick = function () {
my$("im").src = "../image/kiwi.jpg";
}
</script>
</body>
</html>
效果:
********
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<input type="button" value="修改性别" id="btn1"/>
<input type="radio" value="1" name="sex"/>男
<input type="radio" value="2" name="sex" id="rad1"/>女
<input type="radio" value="3" name="sex"/>保密
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn1").onclick = function () {
my$("rad1").checked = true;
}
</script>
</body>
</html>
效果:
******
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<input type="button" value="选择兴趣" id="btn2"/>
<input type="checkbox" value="1" name="xingqu"/>吃饭
<input type="checkbox" value="2" name="xingqu"/>睡觉
<input type="checkbox" value="3" name="xingqu" id="ck1"/>打豆豆
<input type="checkbox" value="4" name="xingqu"/>打篮球
<input type="checkbox" value="5" name="xingqu"/>打足球
<input type="checkbox" value="6" name="xingqu" id="ck2"/>打铅球
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn2").onclick = function () {
my$("ck1").checked = true;
my$("ck2").checked = true;
}
</script>
</body>
</html>
效果:
*********
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<input type="button" value="点菜" id="btn"/>
<select name="" id="ss">
<option value="1">油炸榴莲</option>
<option value="2">爆炒臭豆腐</option>
<option value="3">清蒸助教</option>
<option value="4" id="op1">凉拌班主任</option>
<option value="5">红烧小苏</option>
</select>
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick = function () {
my$("op1").selected = true;
}
</script>
<textarea name="" id="tt" cols="30" rows="10" readonly="readonly">
注册用户的协议:
某人问智者,
大师:您觉得怎么做才是最快乐的?
回答说:不要和愚者辩论
这个人说:我不这么认为!
大师说:您说的对,
我就是这么帅
</textarea>
<input type="button" value="注册" id="btn2"/>
<script>
my$("btn2").onclick = function () {
my$("tt").value = "哦耶";
}
</script>
</body>
</html>
效果:
*********
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<input type="button" value="设置样式" id="btn"/>
<div id="dv"></div>
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick = function () {
my$("dv").style.width = "300px";
my$("dv").style.height = "200px";
my$("dv").style.backgroundColor = "pink";
}
</script>
</body>
</html>
效果:
*******
案例协议按钮禁用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<textarea name="texta" id="" cols="30" rows="10">
而分开【阿斯兰分配【乐旅股份【跑路费
</textarea>
<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled"/>
<script>
function my$(id) {
return document.getElementById(id);
}
var time = 5;
var timeId = setInterval(function () {
time--;
my$("btn").value = "请仔细阅读协议(" + time + ")";
if (time <= 0) {
clearInterval(timeId);
my$("btn").disabled = false;
my$("btn").value = "同意";
}
}, 1000);
</script>
</body>
</html>
效果:
**************
渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
div {
width: 300px;
height: 200px;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="dv"></div>
<input type="button" value="渐变" id="btn"/>
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick = function () {
var opacity = 10;
var timeId = setInterval(function () {
opacity--;
if (opacity <= 0) {
clearInterval(timeId);
}
my$("dv").style.opacity = opacity / 10;
}, 200);
};
</script>
</body>
</html>
效果:
***************
为元素绑定事件和解绑事件的兼容代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script src="common.js"></script>
<script>
//绑定事件的兼容
function addEventListener(element,type,fn) {
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
//解绑事件的兼容
//为任意的一个元素,解绑对应的事件
function removeEventListener(element,type,fnName) {
if(element.removeEventListener){
element.removeEventListener(type,fnName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fnName);
}else{
element["on"+type]=null;
}
}
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
addEventListener(my$("btn1"),"click",f1);
addEventListener(my$("btn1"),"click",f2);
my$("btn2").onclick=function () {
removeEventListener(my$("btn1"),"click",f1);
};
</script>
</body>
</html>
效果:
*******************