在学习JavaScript中用到的示例

时间：2021-12-30 19:37:08

jQuery老师博客

一、定时器示例

功能：让input的文本框，显示时间，并实时更新

逻辑思路：

1.先定义一个函数，用来把当前时间赋值给input.value

2.开始button设置点击事件，并用setInterval设置间隔时间运行（判断setInterval的返回值是否undefined，保证只有一个计时器存在）

3.结束button用clearInterval来停止事件

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>04定时器练习</title>

</head>

<body>

<form action="" method="post" enctype="multipart/form-data" >

    <input id="i1" class="c1" type="text" >

    <input id="start" class="c1" type="button" value="开始" >

    <input id="stop" class="c1" type="button" value="停止">

    <script>

        var t; //声明一个全局变量保存定时器

        function foo(){

            var now = new Date();

            var nowStr = now.toLocaleString();

            var i1Ele = document.getElementById("i1");

            i1Ele.value=nowStr; //在input框获取当前时间

        }

        var startButton = document.getElementById("start");

        startButton.onclick = function () {

            foo();

            console.log(t);

            // t = setInterval(foo,1000);

            if (!t){

                t = setInterval(foo,1000);

            }

            //如果不判断t，那么t每次按一下开始就会生成一个id，而clear只会默认清除最后一个ID

                //会造成无法停止，且页面里同时出现多个定时器的现象

        }

        var stopButton = document.getElementById("stop");

        stopButton.onclick = function () {

            clearInterval(t); // 清除t对应的那个定时器,t的值还在，所以需要给t重新赋值

            console.log(t);

            t = undefined;

        }

    </script>

</form>

</body>

</html>

定时器

二、搜索框示例：

功能：让input的文本框，当onfocus的时候自动清空，当onblur的时候变为初始值

逻辑思路：

用onfocus和onblur这两个事件，来操作input的value值

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>05搜索框示例</title>

</head>

<body>

<form action="">

    <input type="text" id="i1" placeholder="gkxxxx">

    <input type="button" id="i2" value="搜索">

</form>

<script>

    var i1Ele = document.getElementById("i1");

    i1Ele.onfocus = function () {

        this.placeholder="";

    }

    i1Ele.onblur = function () {

        if (!this.placeholder.trim() || !this.value.trim()){

            i1Ele.placeholder="gkxxxx";

            i1Ele.value="gkxxxx";

        }

    }

</script>

</body>

</html>

搜索框示例

三、select联动示例

功能：在select 1 中选择完所属市后，select 2 自动跳出该市对应的区县

逻辑思路：

1.获取select 1 选择时切换对应的value，用onchange事件

2.通过value，去字典中取到对应的区县

3.在select中新增option 把每个区县的值，赋值给 option.innertext

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>06 select联动示例</title>

</head>

<body>

<form action="">

    <select name="select1" id="s1">

        <option value="0">--请选择--</option>

        <option value="1">厦门</option>

        <option value="2">北京</option>

    </select>

    <select name="select2" id="s2"></select>

</form>

<script>

    data = {1:["思明区","集美区","湖里区"],2:["朝阳区","海淀区","昌平区"]};

    var s1Ele = document.getElementById("s1");

    s1Ele.onchange=function () {

        console.log(this.value);//每次一切换选择onchange就会捕捉到当前选择的value

        var areas = data[this.value]; //通过value获取当前市所有的区

        var s2Ele = document.getElementById("s2");

        s2Ele.innerHTML=""; //每次选择完要清空s2，不然s2的值会一直累加

        // s2Ele.removeChild();

        for (var i=0;i<areas.length;i++){

            var opEle = document.createElement("option");

            opEle.innerText=areas[i];

            s2Ele.appendChild(opEle);

        }

    }

</script>

</body>

</html>

select联动示例

四、菜单栏隐藏

功能：左侧的菜单栏，鼠标点击对应的菜单栏，则该菜单显示，其他菜单隐藏

逻辑思路：

1.新增类 hide {display:none;}

2.用jQuery的click事件，通过选择器选到想隐藏的菜单，addClass("hide")  再通过选择器把当前 $(this)的元素显示

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>左菜单栏隐藏</title>

    <style>

        * {

            margin:0;

            padding:0;

        }

        ul {

            list-style-type: none;

        }

        a {

            text-decoration: none;

        }

        .left-menu {

            width: 15%;

            height: 500px;

            background: #DDDDDD;

            /*display: inline;*/

        }

        .hide {

            display: none;

        }

        .menu-title {

            text-align: center;

        }

    </style>

</head>

<body>

<div class="left-menu">

    <div class="menu-title">菜单栏一</div>

    <div class="menu-items">

        <ul>

            <li><a href="">菜单1</a></li>

            <li><a href="">菜单2</a></li>

            <li><a href="">菜单3</a></li>

        </ul>

    </div>

    <div class="menu-title">菜单栏二</div>

    <div class="menu-items">

        <ul>

            <li><a href="">菜单1</a></li>

            <li><a href="">菜单2</a></li>

            <li><a href="">菜单3</a></li>

        </ul>

    </div>

    <div class="menu-title">菜单栏三</div>

    <div class="menu-items">

        <ul>

            <li><a href="">菜单1</a></li>

            <li><a href="">菜单2</a></li>

            <li><a href="">菜单3</a></li>

        </ul>

    </div>

</div>

<script src="jquery-3.2.1.min.js"></script>

<script>

    // 需求分析

    // 找到所有的.menu-title标签,绑定点击事件

        $(".menu-title").click(function () {

               // 点击事件具体要做的事儿

        // 1. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类)

//            $(this).next().removeClass("hide");

            $(this).next().toggleClass("hide");

            // 2. 把其他的.menu-items隐藏,添加hide类

            $(this).next().siblings(".menu-items").addClass("hide");

        })

//    $(".menu-title").click(function () {

//        // 1. 找到所有的.menu-items, 隐藏

//        var $currMenuitem = $(this).next();

//        $(".menu-items").not($currMenuitem).addClass("hide");  // 所有的二级菜单都是隐藏的

//        // 2. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类)

//        $(this).next().toggleClass("hide");

//    })

</script>

</body>

</html>

菜单栏隐藏

（类似的还有click时间的，关灯示例。点一下添加hide类，再点一下取消hide类，用toggleClass）

五、返回顶部示例

功能：右下角设置按钮，返回顶部。当浏览器向下滚动一定距离的时候，出现返回顶部按钮

逻辑思路：看代码啦

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>04返回顶部示例</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .c2 {

            width: 100px;

            height: 100px;

            background-color: aquamarine;

        }

        .c3 {

            height: 80px;

        }

        .hide {

            display: none;

        }

        #b2 {

            width: 84px;

            /*height: 60px;*/

            border: solid 2px blue;

            position: fixed;

            right: 20px;

            bottom: 20px;

        }

    </style>

</head>

<body>

<button id="b1">点我</button>

<div class="c2">我是有背景的div</div>

<div class="c3">我是div1</div>

<div class="c3">我是div2</div>

<div class="c3">我是div3</div>

<div class="c3">我是div4</div>

<div class="c3">我是div5</div>

<div class="c3">我是div6</div>

<div class="c3">我是div7</div>

<div class="c3">我是div8</div>

<div class="c3">我是div9</div>

<div class="c3">我是div10</div>

<div class="c3">我是div11</div>

<div class="c3">我是div12</div>

<div class="c3">我是div13</div>

<div class="c3">我是div14</div>

<div class="c3">我是div15</div>

<div class="c3">我是div16</div>

<div class="c3">我是div17</div>

<div class="c3">我是div18</div>

<div class="c3">我是div19</div>

<div class="c3">我是div20</div>

<div class="c3">我是div21</div>

<div class="c3">我是div22</div>

<div class="c3">我是div23</div>

<div class="c3">我是div24</div>

<div class="c3">我是div25</div>

<div class="c3">我是div26</div>

<div class="c3">我是div27</div>

<div class="c3">我是div28</div>

<div class="c3">我是div29</div>

<div class="c3">我是div30</div>

<button id="b2" class="hide">返回顶部</button>

<script src="jquery-3.2.1.min.js"></script>

<script>

    $("#b1").click(function () {

        $(".c2").offset({top:200,left:200});

    })

    $(window).scroll(function () {

        if ($(window).scrollTop()>100){

            $("#b2").removeClass("hide")

        }else {

            $("#b2").addClass("hide")

        }

    })

    $("#b2").click(function () {

        $(window).scrollTop(0);

    })

</script>

</body>

</html>

返回顶部

六、判断input中的text框是否为空，为空给提示，并不做操作

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>02登录校验完整版</title>

</head>

<body>

<form action="">

    <p>

        <label>用户名：

            <input type="text" name="username" class="notnull">

        </label>

    </p>

    <p>

        <label>密码：

            <input id="i1" type="password" name="password" class="notnull">

        </label>

    </p>

    <input type="submit" id="sub" value="提交">

    <input type="reset" id="b1" value="重置">

</form>

<script src="../jquery-3.2.1.min.js"></script>

<script>

    /*整体思路

    给提交按钮绑定单击事件，判断用户和密码框是否为空，为空则提醒，并不提交，

        1.找到需要判断的文本框  class="notnull"

        2.对找到所有的元素进行遍历，判断 .val().trim() 是否为空

        3.如果为空，新增一个span标签，提醒 label名对应的文本框名字不能为空，并一旦发现一个为空就返回false

        4.不为空则返回true

    */

    $("#sub").on("click", function () {

        var flag = true;            //要把flag设置在这里，这样click的时候才能重置flag

        $("label span").text("");  //保证span的text不会重复添加

        var $notnull = $(".notnull");

        for (var i = 0; i < $notnull.length; i++) {

            var $item = $($notnull[i]);

            if ($item.val().trim().length === 0) {

                var spanEle = document.createElement("span");

                var labelName = $item.parent().text().trim().slice(0, 2);

                $(spanEle).css({"color":"red","font-size":"12px"});

                $(spanEle).text("*"+labelName + "不能为空");

                $(spanEle).insertAfter($item);

                flag = false;

                // return flag;  //找到一处就返回

            }

        }return flag;  //全部找到再返回

        return flag

    })

</script>

</body>

</html>

判断是否为空

七、表格反选

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>作业需求分析</title>

</head>

<body>

<table border="1">

    <thead>

    <tr>

        <th>#</th>

        <th>姓名</th>

        <th>职位</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td><input type="checkbox"></td>

        <td>小东北</td>

        <td>二人转演员</td>

    </tr>

    <tr>

        <td><input type="checkbox"></td>

        <td>乔小强</td>

        <td>xx演员</td>

    </tr>

    <tr>

        <td><input type="checkbox"></td>

        <td>韩涉</td>

        <td>导演</td>

    </tr>

    </tbody>

</table>

<input type="button" id="b1" value="全选">

<input type="button" id="b2" value="反选">

<input type="button" id="b3" value="取消">

<script src="jquery-3.2.1.min.js"></script>

<script>

    // 点击全选,表格中所有的checkbox都选中

    // 1. 找checkbox

    // 2. 全部选中  --> prop("checked", true);

    $("#b1").click(function () {

        $(":checkbox").prop("checked", true);

    });

    // 点击取消

    // 1. 找checkbox

    // 2. 全部取消选中  --> prop("checked", false);

   $("#b3").click(function () {

        $(":checkbox").prop("checked", false);

    });

    // 反选

    // 1. 找到所有的checkbox

    // 2. 判断

    // 2.1 原来没选中的,要选中

    // 2.2 原来选中的,要取消选中

       $("#b2").click(function () {

           // 找到所有的checkbox,把它们保存在一个名叫 $checkboxEles 的变量中,方便后面使用

           var $checkboxEles = $(":checkbox");

           // 遍历所有的checkbox,根据每一个checkbox的状态做不同的操作

           for (var i=0;i<$checkboxEles.length;i++){

               // 把每一个checkbox包成jQuery对象

               var $tmp = $($checkboxEles[i]);

               // 如果 checkbox是选中的

               if ($tmp.prop("checked")){

                   // 取消选中

                   $tmp.prop("checked", false);

               }else {

                   // 否则就选中

                   $tmp.prop("checked", true);

               }

           }

    });

</script>

</body>

</html>

表格反选

相关文章