js案例总结合集

蘇！

已于 2022-11-15 18:46:41 修改

阅读量744

点赞数 2

文章标签： javascript 前端 css

于 2022-08-14 21:41:30 首次发布

本文链接：https://blog.csdn.net/m0_70698588/article/details/126335992

版权

文章目录

1、百分比进度条
2、留言板
3、导航跟随
4、人物介绍切换栏
5、随机点名
6、三级联动
7、动态生成表格
8、跟随鼠标移动
9、tab选项卡

1、百分比进度条

<!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;
        }

        body {
   
            margin: 20px;
        }

        .box_banner {
   
            width: 100%;
            height: 30px;
            background-color: #ddd;
        }

        .banner {
   
            width: 10%;
            background-color: green;
            height: 30px;
            line-height: 30px;
            color: #fff;
            text-align: center;
            margin: 20px 0;
        }
    </style>
</head>

<body>
    <h1>JavaScript 百分比进度条</h1>
    <div class="box_banner">
        <div class="banner">
            <p>10%</p>
        </div>
        <button>点我</button>
    </div>
    <script>
        var btn = document.querySelector('button');
        var banner = document.querySelector('.banner');

        var width = 10

        btn.addEventListener('click', function () {
   
            var timer = setInterval(function () {
   
                if (width >= 100) {
   
                    clearInterval(timer);
                } else {
   
                    width++
                    banner.style.width = width + '%'
                    banner.innerHTML = width + '%'

                }
            }, 30)
        })

    </script>
</body>

</html>

请添加图片描述

2、留言板

<!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>
        * {
   
            padding: 0;
            margin: 0;
            font-family: system-ui, -apple-system, BlinkMacSystemFont,
                'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        .box {
   
            width: 300px;
            margin: 50px auto;
            font-size: 18px;
        }

        .form-group label {
   
            display: block;
            margin-bottom: 10px;
            margin-top: 5px;
        }

        .form-group input {
   
            width: 100%;
            height: 25px;

        }

        #content {
   
            width: 100%;
        }

        button {
   
            padding: 5px 10px;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        span {
   
            color: red;
            font-size: 12px;
            font-weight: bold;
        }

        .content {
   
            width: 100%;
            background-color: palevioletred;

            position: relative;
        }

        li {
   
            list-style: none;
            padding: 20px;
        }

        h4 {
   
            display: inline;

        }

        small {
   
            float: right;
        }

        p {
   
            font-size: 15px;
            margin-top: 10px;
        }

        a {
   
            text-decoration: none;
            float: right;
            color: plum;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="form-group">
            <label for="username">姓名:</label>
            <input type="text" id="username">
            <span></span>
        </div>
        <div class="form-group">
            <label for="content">留言内容:</label>
            <textarea id="text" rows="5"></textarea>
            <span></span>
        </div>
        <button>提交</button>


        <div class="content">
            <ul></ul>
            <script>
                var btn = document.querySelector('button');
                var username = document.getElementById('username');
                var text = document.querySelector('#text')
                var content = document.querySelector('#content');
                var span = document.querySelectorAll('span');
                var content = document.querySelector('.content');
                var ul = document.querySelector('ul');

                btn.addEventListener('click', function () {
   
                    if (username.value == "") {
   
                        span[0].innerHTML = '请输入用户名'

                    }
                    else if (text.value == "") {
   
                        span[1].innerHTML = '请输入留言内容'
                    }
                    else {
   
                        span[0].innerHTML = ''
                        span[1].innerHTML = ''

                        var li = document.createElement('li');
                        var h4 = document.createElement('h4');
                        li.appendChild(h4);
                        h4.innerHTML = username.value;

                        var small = document.createElement('small');
                        li.appendChild(small);
                        small.innerHTML = getdate