今日知识收获

最新推荐文章于 2024-08-18 10:54:05 发布

Collapsing World

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量137

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_64926847/article/details/132915872

版权

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>