1.知识梳理
2.动态创建表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态创建表格</title>
</head>
<body>
<table border=1 width="500">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成名绝技</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
<script>
var arr = [
{
name:"令狐冲",
age:20,
sex:"男",
skill:"独孤九剑"
},
{
name:"东方不败",
age:50,
sex:"女",
skill:"葵花宝典"
},
{
name:"任我行",
age:55,
sex:"男",
skill:"吸星大法"
},
{
name:"东方不败",
age:50,
sex:"女",
skill:"葵花宝典"
},
{
name:"任我行",
age:55,
sex:"男",
skill:"吸星大法"
}
];
// 获取标签
var tbody = document.querySelector('tbody')
// 遍历数组
// arr.forEach(function(item, index) {
// var tr = '<tr><td>' + (index + 1) + '</td><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.sex+'</td><td>'+item.skill+'</td></tr>'
// // console.log(tr);
// tbody.innerHTML += tr
// /*
// tbody.innerHTML += tr 简写
// tbody.innerHTML = tbody.innerHTML + tr
// 第一次:
// tbody.innerHTML = tbody.innerHTML(空) + tr(令狐冲)
// 第二次:
// tbody.innerHTML = tbody.innerHTML(空) + tr(令狐冲) + tr(东方不败)
// 第三次:
// tbody.innerHTML = tbody.innerHTML(空) + tr(令狐冲) + tr(东方不败) + tr(任我行)
// */
// })
var html = ''
arr.forEach(function(item, index) {
// var color = 'red'
// if (index % 2) {
// var color = 'green'
// }
// html += '<tr style="background-color:' + color + ';">'
if (index % 2) {
html += '<tr style="background-color:green;">'
} else {
html += '<tr style="background-color:red;">'
}
html += '<td>' + (index + 1) + '</td>'
html += '<td>' + item.name + '</td>'
html += '<td>' + item.age + '</td>'
html += '<td>' + item.sex + '</td>'
html += '<td>' + item.skill + '</td>'
html += '</tr>'
})
tbody.innerHTML = html
</script>
</html>
3.顶部悬浮以及滚动条回弹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width: 100%;
background-color: #ccc;
}
.content{
width: 1000px;
margin: 0 auto;
}
.top{
height: 80px;
}
.top .content{
text-align: center;
line-height: 50px;
font-size: 20px;
font-weight: bold;
background-color: #f00;
color: #fff;
}
.article .content{
height: 1200px;
background-color: #00f;
}
.footer footer{
height: 200px;
background-color: #0f0;
}
.totop{
position: fixed;
right: 50px;
bottom: 50px;
display: none;
}
</style>
</head>
<body>
<div class="container top">
<div class="content">
这里是顶部
</div>
</div>
<div class="container article">
<div class="content"></div>
</div>
<div class="container footer">
<footer class="content"></footer>
</div>
<!-- 回到顶部按钮 -->
<button class="totop">按钮</button>
</body>
<script>
// 获取顶部标签
// top是关键字,代表window
var myTop = document.querySelector('.top')
console.log(111, myTop);
var btn = document.querySelector('.totop')
// 滚动条事件
window.onscroll = function() {
// 获取卷去的距离
var t = document.documentElement.scrollTop || document.body.scrollTop
console.log(t);
// 判断卷去的距离是否大于350
if (t >= 350) {
// 让顶部显示出来
myTop.style.position = 'fixed'
myTop.style.left = 0
myTop.style.top = 0
} else {
// 给标签设置为静态定位 - 取消固定定位 - 不再固定在顶部了
myTop.style.position = 'static'
}
if (t >= 500) {
btn.style.display = 'block'
} else {
btn.style.display = 'none'
}
}
// 给回到顶部按钮添加点击事件
btn.onclick = function() {
var timer = setInterval(function() {
// 获取当前的值
var t = document.documentElement.scrollTop || document.body.scrollTop
// 让这个数字减小一点点
t -= 20
// 将减小的数字赋值给卷去的距离
document.documentElement.scrollTop = document.body.scrollTop = t
if (t <= 0) {
clearInterval(timer)
}
console.log(111);
}, 17)
}
</script>
</html>
3.倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box">
距离国庆还有: <span>0</span> 天 <span>0</span> 小时 <span>0</span> 分钟 <span>0</span> 秒
</div>
</body>
<script>
// 获取所有标签
var spans = document.querySelectorAll('span')
daojishi()
function daojishi() {
// 获取国庆的时间日期对象中的时间戳
var guoqing = new Date('2023-10-1 0:0:0')
guoqing = guoqing.getTime()
// 获取当前的时间戳
var now = new Date()
now = now.getTime()
// 求毫秒差
var diff = guoqing - now
// 根据毫秒差换算天、小时、分钟、秒
var day = parseInt(diff / 1000 / 60 / 60 / 24)
var hour = parseInt(diff / 1000 / 60 / 60) % 24
var minute = parseInt(diff / 1000 / 60) % 60
var second = parseInt(diff / 1000) % 60
// 将天、小时、分钟、秒放在对应的span标签中
spans[0].innerText = day
spans[1].innerText = hour
spans[2].innerText = minute
spans[3].innerText = second
}
// 设置定时器
setInterval(daojishi, 1000)
</script>
</html>
4.点击切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>切换</button>
<br>
<img src="./images/1.jpg" width="300" height="200" alt="">
</body>
<script src="./js/utils.js"></script>
<script>
// 按顺序换
var btn = document.querySelector('button')
var img = document.querySelector('img')
// 定义初始值数字
var num = 1
// 按钮点击
btn.onclick = function() {
// 让数字自增
num++
// 判断最大值
if (num > 3) {
num = 1
}
// 根据数字拼接图片路径
var imgPath = './images/' + num + '.jpg'
// 将图片路径设置给img标签
img.setAttribute('src', imgPath)
}
// // 随机换
// var btn = document.querySelector('button')
// var img = document.querySelector('img')
// // 按钮点击
// btn.onclick = function() {
// // 从1~3之间获取随机数
// var num = getRandom(1, 4)
// // 根据数字拼接图片路径
// var imgPath = './images/' + num + '.jpg'
// // 将图片路径设置给img标签
// img.setAttribute('src', imgPath)
// }
</script>
</html>
5.切换网页背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
border: 3px solid #eee;
}
.box div{
width: 50px;
height: 50px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
<script src="./js/utils.js"></script>
<script>
// 获取4个div
var divs = document.querySelectorAll('.box div')
// 遍历这4个div
for (var a = 0; a < divs.length; a++) {
// divs[a] 代表每个div标签
divs[a].style.backgroundColor = getColor()
// 给每个div添加点击事件
divs[a].onclick = function() {
// 获取当前点击的这个div的背景颜色
// getComputedStyle(divs[a])
// console.log(a); // a不能代表当前div的下标
// this是js中关键字 - 在事件函数中代表当前触发事件的这个标签
// console.log(this);
var color = getComputedStyle(this)['background-color']
// 将颜色设置给body
document.body.style.backgroundColor = color
}
}
// console.log(a);
</script>
</html>