0x01--分时问候案例
<img style="width: 200px;" src="images/w.gif" alt="">
<div>主人,晚上好!</div>
<script>
//1.需要日期内置对象
//2.利用多分枝语句设置不同的图片
//3.需要一个图片,根据时间修改图片,就需要元素操作src属性
//4.需要一个div元素,显示不同的问候语
let img = document.querySelector('img')
let div = document.querySelector('div')
let date = new Date()
let hour = date.getHours()
//hour = 8/16/19 //人为改动hour值查看程序效果
if (hour > 0 && hour < 12) {
img.src = 'images/s.gif'
div.innerHTML = '主人,上午好!'
} else if (hour > 0 && hour < 18) {
img.src = 'images/x.gif'
div.innerHTML = '主人,中午好!'
} else if (hour > 0 && hour <= 24) {
img.src = 'images/w.gif'
div.innerHTML = '主人,晚上好!'
} else {}
</script>
0x02--表单元素的属性操作
利用DOM可以操作如下表单元素的属性:
- 1、type
- 2、value
- 3、checked
- 4、selected
- 5、disabled
<button>按钮</button><input type="text" value="输入内容">
<script>
//1.获取元素
let btn = document.querySelector('button')
let inp = document.querySelector('input')
//2.注册时间,处理程序
btn.onclick = () => {
//inp.innerHTML = '点击了' //这个操作的是div盒子里的内容,不是input里的内容
inp.value = '点击了' //正确
btn.disabled = true
}
</script>
0x03--仿京东实现显示隐藏明文密码
核心思路:
1、点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码
2、一个按钮两个状态、点击一次、切换为文本、继续点击切换为password
3、算法: 创建一个flag变量默认为false;如果true就切换文本false就切换密码,flag值设置fasle;
<!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>仿京东显示隐藏密码</title>
<style>
.box {
position: relative;
width: 400px;
border: 1px solid red;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
width: 24px;
top: 3px;
right: 3px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="images/close.png" alt="">
</label>
<input type="password" name="" id="">
</div>
<script>
/* 1、点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码
2、一个按钮两个状态、点击一次、切换为文本、继续点击切换为password
3、算法: 创建一个flag变量默认为false; 如果true就切换文本false就切换密码, flag值设置fasle;
*/
//1.获取元素
eye = document.querySelector('img')
input = document.querySelector('input')
flag = false
//2.注册事件,编写程序
eye.onclick = () => {
flag = !flag
if (flag == true) {
input.type = 'text'
//睁开眼睛
eye.src = 'images/open.png'
} else {
input.type = 'password'
//闭上眼睛
eye.src = 'images/close.png'
}
}
</script>
</body>
</html>
效果:
0x04--gif-for-mac-软件
Kap for mac 百度搜索