js学习笔记（3个特效）

最新推荐文章于 2024-11-05 22:07:06 发布

甜甜今天学了吗

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量128

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/dawanhjiao/article/details/104656304

版权

1.百度换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度换肤</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            body{
                background: url("image/bj_1.jpeg") no-repeat;
                background-size: cover;/*让背景图片占满网页*/
            }
            #box{
                background-color: rgba(255,255,255,0.5);
            }
            #box ul{
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
            }
            #box ul li img{
                width: 180px;
                height: 120px;
                margin: 10px 0;
            }
        </style>
</head>
<body>
<div id="box">
    <ul>
        <li><img src="image/bj_1.jpeg"></li>
        <li><img src="image/bj_2.jpeg"></li>
        <li><img src="image/bj_3.jpeg"></li>
        <li><img src="image/bj_4.jpeg"></li>
        <li><img src="image/bj_5.jpeg"></li>
    </ul>
</div>
<!--<script>-->
<!--    window.onload = function (ev) {-->
<!--        var box = document.getElementById('box');-->
<!--        var allLi = box.getElementsByTagName('li');-->
<!--        for (var i = 0; i<allLi.length; i++){-->
<!--            var sli = allLi[i];-->
<!--            sli.index = i+1;//必须绑定一个新的属性，不能直接用i+1,因为for循环一执行就会变成4-->
<!--                sli.addEventListener('click',function (ev1) {-->
<!--                    document.body.style.background = 'url("image/bj_'+this.index +'.jpeg") no-repeat'-->
<!--                })-->
<!--            }-->
<!--    }-->
<!--</script>-->
<script>
    window.onload = function (ev) {
        var box = document.getElementById('box');
        var allLi = box.getElementsByTagName('li');
        for (var i = 0; i<allLi.length; i++){
            var sli = allLi[i];//所以可以采用闭包的方式
            (function (index) {
                sli.addEventListener('click',function (ev1) {
                    document.body.style.background = 'url("image/bj_'+ index +'.jpeg") no-repeat'
                })
            })(i+1)
        }
    }
</script>
</body>
</html>

2.选中和不选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选中和不选中</title>
    <style type="text/css">
        *{
            margin: 0;padding: 0;list-style: none;
        }
        #song{
            width: 400px;
            box-shadow: 0 0 10px #000;
            margin: 100px auto;
            padding: 20px;
        }
        .head{
            text-align: center;
        }
        .footer{
            text-align: center;
        }
    </style>
</head>
<body>
<div id="song">
    <section class="head"><!--标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。-->
        <h2>歌曲排行榜</h2>
        <hr>
    </section>
    <section class="content">
        <label><input type="checkbox" ></label>1.时间都去哪了<br>
        <label><input type="checkbox"></label>2.喜欢你<br>
        <label><input type="checkbox"></label>3.小耿<br>
        <label><input type="checkbox"></label>4.时间都去哪了<br>
        <label><input type="checkbox"></label>5.时间都去哪了<br>
        <label><input type="checkbox"></label>6.时间都去哪了<br>
        <label><input type="checkbox"></label>7.时间都去哪了<br>
        <input type="checkbox">8.时间都去哪了<br>
    </section>
    <section class="footer">
        <hr>
        <button id="all">全选</button>
        <button id="cancel">取消全选</button>
        <button id="reverse">反选</button>
    </section>
</div>
<script>
    window.onload = function (ev) {
        var checks = document.querySelectorAll('input');
        function f(id) {
            return document.getElementById(id);
        }
        f('all').addEventListener('click',function (ev1) {
            for (var i = 0; i<checks.length;i++){
                var check = checks[i];
                check.checked = true;
            }
        });
        f('cancel').addEventListener('click',function (ev2) {
            for (var i = 0 ; i<checks.length; i++){
                var check = checks[i];
                check.checked = false;
            }
        });
        f('reverse').addEventListener('click',function (ev2) {
            for (var i = 0 ; i<checks.length; i++){
                var check = checks[i];
                check.checked = !check.checked;
            }
        })
    }
</script>
</body>
</html>

3.标签内容的获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签内容获取</title>
</head>
<body>
<div id="box">
    <input type="text">
    <textarea></textarea>
    <div>今天天气很好</div>
</div>
<script>
    window.onload = function (ev) {
        var input = document.getElementsByTagName('input')[0];
        var text = document.getElementsByTagName('textarea')[0];
        var box = document.getElementById('box');
        //box.innerText 可以拿到box里面的所有文字
        input.value = '要下雨了！';
        text.value = '今天有太阳！';
        //box.innerText = '哈哈哈'; 用哈哈哈代替了box里面的所有内容
        box.innerHTML = '<div>哈哈哈哈</div><br>啦啦啦啦';//box.innerHTML，文本和标签都可以
    }
</script>
</body>
</html>