在学习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的个人博客几乎所有的编程语言都原生支持数组类型,因 ...

随机推荐

Character
Character a = new Character(); Character.isUpperCase(a) 判断给点的字符是否是大写字符 Character.isLowerCase(a) 判断给定 ...
类成员（static）和final修饰符
在Java类里只能包含成员变量.方法.构造器.初始化块.内部类(包括接口.枚举)5种成员,类成员是用static来修饰的,其属于整个类. 当使用实例来访问类成员时,实际上依然是委托给该类来访问类成员, ...
SHA256withRSA证书签名，私钥签名/公钥验签
证书签名 package test; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundE ...
pywinauto简单操作写字板的例子
前段时间写了做web程序界面自动化的简单例子,今天写一下windows gui程序界面自动化测例子吧. ps.咱中国人YinKaisheng封装的UIAutomation库也很好用,https://g ...
2019十大安卓手游折扣平台app排行榜
2019游戏版号陆续开放,玩家又有许多好游戏可以玩了. 小编就以当前最热门的十个游戏来点评手游折扣平台App排行榜吧! 排名第一的游戏: 少年西游记-新征程老平台,集成SDK,良心平台,覆盖全网游戏 ...
Python day 02
基础&运算符今日概要循环字符串格式化运算符编码内容回顾 & 补充内容回顾计算机基础解释器python 2 和 python 3 语法 print input if / ...
EF中防止sql注入
EF作为一个orm框架,本身以及放置了sql的注入,但是如果我们需要执行sql语句的时候了?比如,我们需要查询视图"select * from VM where 条件 = {0}" ...
StreamReader 和 StreamWriter 简单调用
/* ######### ############ ############# ## ########### ### ###### ##### ### ####### #### ### ####### ...
HTML与CSS的一些知识（二）
续: 5.表单标签<form></form> 用于收集用户信息,统一提交到服务器一般用input标签收集,再用提交按钮提交:input标签根据type属性值不同有不同的类型: ...
性能测试监控工具nmon安装及使用方法
1.概述监控,在检查系统问题或优化系统性能工作上是一个不可缺少的部分.通过操作系统监控工具监视操作系统资源的使用情况,间接地反映了各服务器程序的运行情况.根据运行结果分析可以帮助我们快速定位系统问题 ...

在学习JavaScript中用到的示例

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

随机推荐

热门专题