一、页面开关灯
案例分析：
1、需要用的是点击事件onclick
2、点击一下开灯，再点击一下关灯
3.需要使用flag变量来达到我们所需要的效果
代码展示：
<body>
<button>开灯</button>
<script>
//1、获取元素
var body = document.body //获取body
var btn = document.querySelector('button')
//利用flag变量来控制我们的开关灯效果
var flag = 0
//注册事件
btn.onclick = function(){
btn.innerHTML = '关灯'
if(flag == 0){
btn.innerHTML = '关灯'
body.style.backgroundColor = 'black';
flag = 1;
}else{
btn.innerHTML = '开灯'
body.style.backgroundColor = 'white';
flag = 0;
}
}
</script>
</body>结果展示：
二、显示隐藏文本框内容
案例分析：
1、首先表单需要两个事件，获得焦点 onfocus 失 ， 去焦点 onblur。
2、如果获得焦点，判断表单里面的内容是否为默认文字，如果是默认文字，就清空表单内容
3、失去焦点时，判断表达内容是否为空，如果为空，表单内容改为默认文字
代码展示：
<body>
<style>
input{
color: #999;
}
</style>
</head>
<body>
<input type="text" name="" value="手机">
<script>
// 获取元素
var text = document.querySelector('input')
// 注册事件 获得焦点事件 onfocus
text.onfocus = function(){
if(this.value == '手机'){
this.value = ''
}
//获得焦点需要把文本框里面的文字颜色变黑
this.style.color = '#333'
}
text.onblur =function() {
console.log('失去了焦点');
if(this.value == ''){
this.value = '手机'
}
//失去焦点需要把文本框里面的文字颜色变浅
this.style.color = '#999'
}
</script>
</body>结果展示：
