目录
案例三:文本框获取焦点时,里面的文字默认隐藏,焦点离开文本时显示文字
案例一:分时提醒问候
运行结果:
代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var date = new Date();
var h = date.getHours();
if (h < 11) {
alert('上午好,尊敬的用户!');
} else if (h < 18) {
alert('下午好,尊敬的用户!');
} else {
alert('晚上好,尊敬的用户!');
}
</script>
</body>
</html>
案例二:点击眼睛显示和关闭密码功能
运行结果:
代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
top: 2px;
right: 10px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="img/close.png" alt="">
</label>
<input type="password" name="">
</div>
<script>
// 方案一:flag多
var img = document.querySelector('img');
var input = document.querySelector('input');
var flag = 0;
img.onclick = function() {
if (flag == 0) {
img.src = 'img/open.png';
input.type = 'text';
flag = 1;
} else {
img.src = 'img/close.png';
input.type = 'password';
flag = 0;
}
}
// 方案二:flag少
var img = document.querySelector('img');
var input = document.querySelector('input');
var flag = 0;
img.onclick = function() {
flag = !flag;
if (flag) {
img.src = 'img/open.png';
input.type = 'text';
} else {
img.src = 'img/close.png';
input.type = 'password';
}
}
</script>
</body>
</html>
案例三:文本框获取焦点时,里面的文字默认隐藏,焦点离开文本时显示文字
运行结果:
没有输入后,鼠标移出点击显示原字符
有输入,鼠标点击原字符消失
代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" value="Hello">
<script>
var ipt = document.querySelector('input');
ipt.onfocus = function() {
if (ipt.value === 'Hello') {
ipt.value = ''
}
}
ipt.onblur = function() {
if (ipt.value === '') {
ipt.value = 'Hello'
}
}
</script>
</body>
</html>
案例四:页面开关灯
运行结果:
代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
display: block;
width: 100px;
height: 30px;
color: aqua;
border-radius: 20px;
margin: 0 auto;
background-color: red;
}
</style>
</head>
<body>
<button>开灯</button>
<script>
var btn = document.querySelector('button');
var body = document.body;
flag = 1;
btn.onclick = function() {
flag == 1 ? body.style.backgroundColor = 'black' : body.style.backgroundColor = 'white';
flag == 1 ? this.innerHTML = '关灯' : this.innerHTML = '开灯';
flag = !flag;
}
</script>
</body>
</html>
案例五:一键开启广告和关闭广告
运行结果:
代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
button {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%);
width: 100px;
height: 30px;
background-color: orange;
color: black;
border: 1px solid transparent;
border-radius: 12px;
}
.box {
position: relative;
width: 100px;
height: 115px;
text-align: center;
border: 1px solid #ccc;
margin: 50px auto;
display: block;
}
.box span {
color: #f45822;
font-size: 12px;
}
.box img {
margin-top: 5px;
width: 80px;
height: 80px;
}
.btn {
position: absolute;
top: 0;
left: -20px;
width: 20px;
height: 20px;
background: url(img/wrong.png)no-repeat;
opacity: 0;
transition: all .5s;
cursor: pointer;
}
.box:hover .btn {
opacity: 1;
}
</style>
</head>
<body>
<button>一键关闭广告</button>
<div class="box">
<div class="btn"></div>
<span>淘宝二维码</span>
<img src="img/tao.png" alt="">
</div>
<div class="box">
<div class="btn"></div>
<span>淘宝二维码</span>
<img src="img/tao.png" alt="">
</div>
<div class="box">
<div class="btn"></div>
<span>淘宝二维码</span>
<img src="img/tao.png" alt="">
</div>
<div class="box">
<div class="btn"></div>
<span>淘宝二维码</span>
<img src="img/tao.png" alt="">
</div>
<script>
var btnMax = document.querySelector('button');
var btn = document.querySelectorAll('.btn');
var box = document.querySelectorAll('.box')
// 一键开关广告
flag = 1;
btnMax.onclick = function() {
for (var i = 0; i < box.length; i++) {
if (flag == 1) {
box[i].style.display = 'none';
this.innerHTML = '一键开启广告';
this.style.color = 'white';
} else {
box[i].style.display = 'block';
this.innerHTML = '一键关闭广告';
this.style.color = 'black';
}
}
flag = !flag;
}
// 单独关闭当前广告,下方广告上移
for (var j = 0; j < btn.length; j++) {
btn[j].setAttribute('index', j);
btn[j].onclick = function() {
box[this.getAttribute('index')].style.display = 'none';
}
}
</script>
</body>
</html>
图片素材: