?1、点击按钮，转换图片，以及当鼠标划到图片时，图片转换
<body>
<button id="xunhua">驯化者</button>
<button id="yingxiong">英雄</button>
<br><br>
<img src="../imgs/xunhua.jpg" alt="" title="驯化者" width="200" height="300">
<script>
//获取页面元素
var xunhua = document.getElementById('xunhua')
var yingxiong = document.getElementById('yingxiong')
var img = document.querySelector('img')
//注册事件处理程序
xunhua.onclick = function(){
img.src = '../imgs/xunhua.jpg'
img.title = '驯化者'
}
yingxiong.onclick = function(){
img.src = '../imgs/yingxiong.jpg'
img.title = '英雄'
}
img.onmouseover = function(){//鼠标光标进入的时候，显示的是驯化者
img.src = '../imgs/xunhua.jpg'
img.title = '驯化者'
}
img.onmouseout = function(){//鼠标光标离开的时候，显示的是英雄
img.src = '../imgs/yingxiong.jpg'
img.title = '英雄'
}
</script>
</body>?
?
?2、点击睁眼和闭眼的图片，使密码同时变得不可见或者可见
<body>
<div id="box">
<label>
<img src="../imgs/QQ图片20211120133746.png" alt="" id="eye">
<!-- <img src="../imgs/QQ图片20211120133812.png" alt=""> -->
</label>
<input type="password" name="" id="pwd">
</div>
<script>
//1、获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
var flag = 0;//标记变量，用来标记图片是打开的还是关闭的
//2、注册事件，以及定义事件的处理程序
eye.onclick = function(){
if(flag==0){
pwd.type = 'text';
eye.src = '../imgs/QQ图片20211120133812.png';
flag = 1;
}else{
pwd.type = 'password';
eye.src = '../imgs/QQ图片20211120133746.png';
flag = 0;
}
}
</script>
</body>
?
?3、点击方块，使方块的形态都发生变化
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
.change{
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
<body>
<div class="first">撸起袖子加油干</div>
<script>
//1、获取元素
var div = document.querySelector('div');
//2、给你div注册一个事件
div.onclick = function(){
this.className = 'change';
}
</script>
</body>
?
4、当鼠标未点击输入框时，文字是灰色。当鼠标点击输入框时，文字是黑色
<body>
<div>
<label>
<input type="text" id="userName" value="手机" style="color: #999;">
</label>
</div>
<script>
//1、获取元素
var text = document.querySelector('input');
text.onchange//当文本框内容发生改变是
//2、给获取的元素注册一个获取焦点的事件 onfocus
text.onfocus = function(){
if(this.value ==='手机'){
this.value = '';
}
this.style.color = '#333';
}
//3、给元素注册失去焦点的事件 onblur
text.onblur = function(){
if(this.value===''){
this.value = '手机';
}
this.style.color = '#999';
}
</script>
</body