js的小练习

最新推荐文章于 2024-09-02 12:54:06 发布

诗霖雪

最新推荐文章于 2024-09-02 12:54:06 发布

阅读量56

点赞数

文章标签：前端 java javascript

本文链接：https://blog.csdn.net/m0_56713342/article/details/132831048

版权

一、排他思想

二、动态创建表格，随意删除每条数据

三、输入价格后失去焦点就展示符合条件的商品，没有符合条件的商品就弹框提示

四、评论

一、排他思想

<body>
    <ul>
        <li>白云千载空悠悠</li>
        <li>白云千载空悠悠</li>
        <li>白云千载空悠悠</li>
        <li>白云千载空悠悠</li>
        <li>白云千载空悠悠</li>
        <li>白云千载空悠悠</li>
    </ul>
    <script>
        //排他思想
        var lis = document.querySelectorAll('li')
        for (var i = 0; i < lis.length; i++) {

            lis[i].onclick = function () {
                for (var j = 0; j < lis.length; j++) {
                    lis[j].style.backgroundColor = ''
                }
                this.style.backgroundColor = 'red'
            }
        }
    </script>
</body>

二、动态创建表格，随意删除每条数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        tr {
            background-color: white;
        }

        th {
            width: 100px;
        }

        table {
            margin: 0 auto;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div>
        <table bgcolor="black" cellspacing="1px">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>家庭住址</th>
                <th>操作</th>
            </tr>
            <tbody>

            </tbody>
        </table>
    </div>
    <script>
        var tbody = document.querySelector('tbody')
        var lis = [{ 'name': '张三', 'sex': '男', 'address': '上海1' },
        { 'name': '张三', 'sex': '男', 'address': '上海2' },
        { 'name': '张三', 'sex': '男', 'address': '上海3' },
        { 'name': '张三', 'sex': '男', 'address': '上海4' },
        { 'name': '张三', 'sex': '男', 'address': '上海5' }]

        for (var i = 0; i < lis.length; i++) {
            var tr = document.createElement('tr')    //创建行
            for (var k in lis[i]) {
                var td = document.createElement('td')  //创建列,用于填充lis中的数据
                td.innerHTML = lis[i][k]
                tr.appendChild(td)
            }
            var td = document.createElement('td')  //创建列
            td.innerHTML = '<a href="javascript:;">删除</a>'
            tr.appendChild(td)   //再创建列，在每行最后添加一列a标签
            tbody.appendChild(tr)
        }
        var as = document.querySelectorAll('a')  //删除功能
        for (var i = 0; i < as.length; i++) {
            as[i].onclick=function(){
                tbody.removeChild(this.parentNode.parentNode)
            }
        }




    </script>
</body>

</html>

三、输入价格后失去焦点就展示符合条件的商品，没有符合条件的商品就弹框提示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <span> 请输入手机价格（输入能接受的最高价值）：</span>
        <input type="text" autofocus>
        <ul>

        </ul>

    </div>

    <script>
        var arr = [
            {
                name: '小米',
                price: 2999,
            },
            {
                name: '红米',
                price: 2000,
            },
            {
                name: '魅族',
                price: 2599,
            },
            {
                name: '华为',
                price: 7999,
            },
            {
                name: '荣耀',
                price: 2899,
            },
            {
                name: '联想',
                price: 999,
            },
            {
                name: '三星',
                price: 9999,
            },
            {
                name: '苹果',
                price: 7999,
            },
            {
                name: '诺基亚',
                price: 299,
            },
            {
                name: 'vivo',
                price: 2399,
            },
            {
                name: 'oppo',
                price: 2499,
            },
        ]


        var ul = document.querySelector('ul')
        var input = document.querySelector('input')
        input.onblur = function () {
            ul.innerHTML = ''  //输入前先清空
            var newArr = arr.filter(function (item) {   //筛选低于最高值
                return item.price <= input.value
            })
            if (newArr.length != 0) {
                newArr.forEach(function (item) {
                    var li = document.createElement('li')   //创建li用来填充数据
                    ul.appendChild(li)
                    li.innerHTML = item.name + item.price
                })
            } else {
                alert('没有符合的')
            }
        }


    </script>
</body>

</html>

四、评论

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            background-color: rgb(176, 180, 184);
        }

        /* ul{
        background-color: aquamarine;
    } */
        button {
            width: 50px;
            height: 25px;
            border-radius: 20%;
            background-color: coral;
        }

        input {
            display: inline-block;

            border-radius: 25%;
            height: 30px;


        }

        p {
            background-color: rgb(237, 157, 65);
            height: 50px;
            padding-top: 10px;
            padding-left: 10px;

        }

        a {
            color: rgb(219, 210, 210);
        }

        a:hover {
            color: darkorchid;
        }
    </style>
</head>

<body>
    <div>
        <p>
            <input type="text"> <button>评论</button>
        </p>
        <ul>

        </ul>
    </div>
    <script>
        var input = document.querySelector('input')
        var ul = document.querySelector('ul')
        var btn = document.querySelector('button')
        btn.onclick = function () {
            if (!input.value) {
                alert('请输入内容')
            } else {
                var li = document.createElement('li')
                li.innerHTML = input.value + '&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + '<a>删除</a>' + '<br/>' + getTime()
                ul.insertBefore(li, ul.children[0])
            }
            input.value = ''
            var la = document.getElementsByTagName('a')
            for (var i = 0; i < la.length; i++) {
                la[i].onclick = function () {
                    ul.removeChild(this.parentNode)
                }
            }

        }
        function getTime() {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
            var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
            var minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
            var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
            return year + '-' + month + '-' + day + '-' + ' ' + hour + ':' + minute + ':' + seconds

        }

    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            background-color: gray;
            text-align: center;
            line-height: 50px;

        }
    </style>
</head>
<body>
    <div>古诗</div>
    <div>散文</div>
    <div>小说</div>
    <div>故事</div>
    <div>阅读</div>
    <script>
        var divs=document.querySelectorAll('div')
        for(var i=0;i<divs.length;i++){
             divs[i].onmouseover=function(){
           this.style.backgroundColor='red'
           this.style.color='white'
        }
        divs[i].onmouseout=function(){
            this.style.backgroundColor='gray'
            this.style.color='black'
        }
        }
       
    </script>
</body>
</html>