一、点击不同的button实现页面img的改变
代码如下：注意通过函数动态改变的img路径在编写的时候一定要是相对路径
<body>
<style>
div {
height: 250px;
width: 333px;
background-color: pink;
}
img {
width: 100%;
height: 100%;
}
</style>
<button id="pic1">图片1</button>
<button id="pic2">图片2</button>
<div>
<img src="m1.jpg" alt="" title="picNow" id="img">
</div>
<script>
var pic1 = document.getElementById('pic1');
var pic2 = document.getElementById('pic2');
var img = document.getElementById('img');
// 只能用相对路径，绝对路径报错；
pic1.onclick = function() {
img.src = "g8.jpg";
img.title = 'pic1';
}
pic2.onclick = function() {
img.src = "g9.jpg";
img.title = 'pic2';
}
</script>
</body>二、根据系统反馈的时间display不同的img
<body>
<style>
div {
width: 250px;
height: 150px;
}
img {
height: 100%;
width: 100%;
}
</style>
<div>
<img src="g8.jpg" alt="">
</div>
<p></p>
<script>
// 调用内置方法输出当前系统时间，参与运算改变time
var time = new Date();
var h = time.getHours();
console.log(h);
var img = document.querySelector('img');
var p = document.querySelector('p');
if (h < 12) {
img.src = "g9.jpg";
img.title = "早上好";
p.innerHTML = '早上好吖';
} else if (h > 12 && h < 18) {
img.src = "g8.jpg";
img.title = "下午好";
p.innerHTML = '下午好吖';
} else if (h > 18) {
img.src = "g8.jpg";
img.title = "晚上好";
p.innerHTML = '晚上好吖';
}
</script>
</body>三、点击按钮实现修改表单内的value属性值内容
<body>
<button>按钮</button>
<input type="text" name="" id="" value="请输入内容">
<script>
var but = document.querySelector('button');
var input = document.querySelector('input');
but.onclick = function() {
// this是强调被调用改变的内容要注意调用的对象会发生相应改变
input.value = '你好，蟹蟹点击';
this.disabled = true;
}
</script>
</body>四、密码输入框的名为制作（点击按钮隐藏输入框数据）
<body>
<style>
div {
position: relative;
width: 300px;
height: 28px;
margin: 100px auto;
border-bottom: 1px solid red;
}
label {
position: absolute;
width: 24px;
height: 24px;
top: 5px;
right: 5px;
}
label img {
width: 100%;
height: 100%;
}
input {
outline: none;
border: 0;
width: 270px;
height: 26px;
}
</style>
<div>
<label for="">
<img src="img/close.png" alt="" id="img">
</label>
<input type="password" id="input">
</div>
<script>
var img = document.querySelector("img");
var input = document.querySelector("input");
// 给一个标识符去作为重复点击的算法;让明文能一直以不同的方式展现；
var flag = 0;
img.onclick = function() {
if (flag == 0) {
this.src = "img/open.png";
input.type = "text";
flag = 1;
} else {
this.src = "img/close.png";
input.type = "password";
flag = 0;
}
}
</script>
</body>注意：我们设置一个flag变量去实现能不断点击按钮实现相应操作
