JavaScript案例合集（一）

小岳同学.

已于 2022-05-17 21:37:27 修改

阅读量412

点赞数

分类专栏：前端学习笔记 JavaScript 文章标签： javascript webview html

于 2022-05-17 21:36:52 首次发布

本文链接：https://blog.csdn.net/qq_18948601/article/details/124830637

版权

JavaScript 同时被 3 个专栏收录

20 篇文章 1 订阅

订阅专栏

学习笔记

19 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

循环精灵图和显示隐藏文本框内容

<!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>
        * {
            margin: 0;
            padding: 0;
        }
  
        .box {
            width: 250px;
            margin: 100px auto;
        }
  
        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            list-style: none;
            background: url(img/sprite.png) no-repeat;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        //1.获取元素 所有的li
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            var wz = i * 44;
            lis[i].style.backgroundPosition = '0 -' + wz + 'px';
        }
    </script>
</body>

</html>

显示隐藏文本框内容

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input {
            color: #999;
        }
    </style>
</head>

<body>
    <input type="text" value="内容">
    <script>
        // 1.获取元素
        var text = document.querySelector('input');
        // 2.注册事件 获得焦点事件 onfocus 
        text.onfocus = function() {
                // console.log('得到了焦点');
                if (this.value === '内容') {
                    this.value = '';
                }
                // 获得焦点需要把文本框里面的文字颜色变黑
                this.style.color = '#333';
            }
            // 3. 注册事件 失去焦点事件 onblur
        text.onblur = function() {
            // console.log('失去了焦点');
            if (this.value === '') {
                this.value = '内容';
            }
            // 失去焦点需要把文本框里面的文字颜色变浅色
            this.style.color = '#999';
        }
    </script>

</body>

</html>

密码框格式提示错误信息

<!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>
        div {
            width: 600px;
            margin: 100px auto;
        }
      
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(img/mess.png) no-repeat left center;
            padding-left: 20px;
        }
      
        .wrong {
            color: red;
            background: url(img/wrong.png) no-repeat left center;
        }
      
        .right {
            color: green;
            background: url(img/right.png) no-repeat left center;
        }
    </style>
</head>

<body>
    <div class="reg">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        //1.获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2.注册事件 失去焦点
        ipt.onblur = function() {
            //根据表单里面值的长度ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                message.className = 'message wrong';
                message.innerHTML = '您输入的不对，要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '密码输入正确';
            }

        }
    </script>
</body>

</html>

页面背景替换

<!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>
        * {
            margin: 0;
            padding: 0;
        }
  
        body {
            background: url(img/bj1.jpg) no-repeat;
            background-size: 100%;
        }
  
        li {
            list-style: none;
        }
  
        .bj {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
  
        .bj li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
  
        .bj img {
            width: 100px;
        }
    </style>
</head>

<body>
    <ul class="bj">
        <li>
            <img src="img/bj1.jpg" alt="">
        </li>
        <li><img src="img/bj2.jpg" alt=""></li>
        <li><img src="img/bj3.jpg" alt=""></li>
        <li><img src="img/bj4.jpg" alt=""></li>
    </ul>

    <script>
        //1.获取元素
        var imgs = document.querySelector('.bj').querySelectorAll('img');
        //2.循环注册事件
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                //this.src就是我们点击图片的路径
                //把这个路径给我们body的背景图路径
                document.body.style.backgroundImage = 'url(' + this.src + ')';

            }
        }
    </script>
</body>

</html>

表格隔行变色效果

        //1.注册元素
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        //2.绑定事件
        for (var i = 0; i < trs.length; i++) {
            //经过事件
            trs[i].onmousemove = function() {
                    this.className = 'bg';
                }
                //离开事件
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }

表单全选取消全选

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
      
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
      
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
      
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
      
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
      
        td {
            font: 14px "微软雅黑";
        }
      
        tbody tr {
            background-color: #f0f0f0;
        }
      
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function() {
                // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
            }
            // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

</html>

tab栏切换

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 380px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            width: 25%;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">栏目1</li>
                <li>栏目2</li>
                <li>栏目3</li>
                <li>栏目4</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">床前明月光</div>
            <div class="item">疑是地上霜</div>
            <div class="item">举头望明月</div>
            <div class="item">低头思故乡</div>
        </div>
    </div>
    <script>
        //1.模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想），修改类名
        //获取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        //for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i);
            lis[i].onclick = function () {
                //先清除其余li的类
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                //仅留下自己
                this.className = 'current';
                //2.模块内容      
                var index = this.getAttribute('index');
                //排他思想
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                items[index].style.display = 'block'
            }
        }

    </script>
</body>

</html>

小岳同学.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript案例合集（一）

循环精灵图和显示隐藏文本框内容利用for循环设置一组元素的精灵图背景正在上传…重新上传取消找到精灵图图片排列的规律核心思路：利用for循环，修改精灵图片的背景位置background-position<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I.
复制链接

扫一扫