在学习JavaScript中用到的示例

一、定时器示例

功能：让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>

表格反选

在学习JavaScript中用到的示例的更多相关文章

一步步学习javascript基础篇（6）：函数表达式之【闭包】
回顾前面介绍过的三种定义函数方式 1. function sum (num1, num2) { return num1 + num2; } //函数声明语法定义 2. var sum = funct ...
更快学习 JavaScript 的 6 个思维技巧
更快学习 JavaScript 的 6 个思维技巧我们在学习JavaScript,或其他任何编码技能的时候,往往是因为这些拦路虎而裹足不前: 有些概念可能会造成混淆,尤其当你是从其他语言转过来的时候 ...
新手该如何学习JavaScript ？
JavaScript入门 - 01 准备工作在正式的学习JavaScript之前,我们先来学习一些小工具,帮助我们更好的学习和理解后面的内容. js代码位置首先是如何编写JavaScript代码, ...
一步步学习javascript基础篇（0）:开篇索引
索引: 一步步学习javascript基础篇(1):基本概念一步步学习javascript基础篇(2):作用域和作用域链一步步学习javascript基础篇(3):Object.Function等 ...
一步步学习javascript基础篇（8）：细说事件
终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能 ...
一步步学习javascript基础篇（7）：BOM和DOM
一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文 ...
学习javascript数据结构(三)——集合
前言总括: 本文讲解了数据结构中的[集合]概念,并使用javascript实现了集合. 原文博客地址:学习javascript数据结构(三)--集合知乎专栏&&简书专题:前端进击者 ...
学习javascript数据结构(二)——链表
前言人生总是直向前行走,从不留下什么. 原文地址:学习javascript数据结构(二)--链表博主博客地址:Damonare的个人博客正文链表简介上一篇博客-学习javascript数据结 ...
学习javascript数据结构(一)——栈和队列
前言只要你不计较得失,人生还有什么不能想法子克服的. 原文地址:学习javascript数据结构(一)--栈和队列博主博客地址:Damonare的个人博客几乎所有的编程语言都原生支持数组类型,因 ...

随机推荐

Django 中 form 介绍
目录 Form介绍我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用 ...
生成式对抗网络（GAN）学习笔记
图像识别和自然语言处理是目前应用极为广泛的AI技术,这些技术不管是速度还是准确度都已经达到了相当的高度,具体应用例如智能手机的人脸解锁.内置的语音助手.这些技术的实现和发展都离不开神经网络,可是传统的 ...
开发过程中的一些补充知识点 + 关于mysql中的日期和时间函数?
参考: https://www.jb51.net/article/23966.htm https://yq.aliyun.com/articles/260389 mysql中的日期格式是: HHHH ...
js的eval代码快速解密
有一段js代码内容如下: eval(function(E,I,A,D,J,K,L,H){function C(A)后面内容省略... 解密可以采用如下方法: 方法一: 打开谷歌浏览器,按F12,在Co ...
spark DAG 笔记
DAG,有向无环图,Directed Acyclic Graph的缩写,常用于建模. Spark中使用DAG对RDD的关系进行建模,描述了RDD的依赖关系,这种关系也被称之为lineage,RDD的依 ...
Win10外包公司（长年承接Win10App外包、Win10通用应用外包）
在几天前的WinHEC大会中,微软特意在大会中展示了其对通用应用的称呼规范,现在,适用于Windows通用平台的应用的正式名称为“Windows应用”(Windows apps),简洁明了. 总而言之 ...
纯css实现翻书效果
前言最近研究了一下css3的3D效果,写了几个demo,写篇博客总结一下实现的经过.PS:如果对transform-origin/perspective/transform-style这些概念还不了 ...
换工作之后需要兼容ie8的我
以下是我ie8踩得坑,总结了一下,以免以后会遇到,虽然有的度娘也能搜到但是偶尔看看自己的文章也能学到很多(后续如有添加继续补上) 1,ie8 input框建议不要使用line-height去撑高度,在 ...
js中关于数组处理的一些小技巧
1 reduce方法同时实现map和filter 假设现在有一个数组,然后遍历它的每一项(map的功能)然后筛选出其中的一部分(filter的功能).如果使用map和filter的话,我们需要遍历这个 ...
pytest--fixture参数化的实现方式和执行顺序
之前看到fixture函数可以通过添加,params参数来实现参数化,后续看到了悠悠的博客,可以通过@pytest.mark.parametrize来实现,现在做一个总结实现方式一通过param ...

在学习JavaScript中用到的示例

在学习JavaScript中用到的示例的更多相关文章

随机推荐

热门专题