一.点灯开关控制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <img id="light" src="img/off.gif">

</body>

<script>
    /*
        1、获取图片对象
          2、绑定点击事件
           3、切换图片
                使用flag标注状态
    * */
        var element = document.getElementById("light");
        var flag = false;//关闭状态

        element.onclick = function (ev) {
            if(flag){//如果灯开着
                element.src = "img/off.gif";
                flag = false;
            }else{
                element.src = "img/on.gif";
                flag = true;
            }

        }

</script>
</html>
二.5s之后自动出现一张图片：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <span id="time">5</span>
    <img id="img" src="img/gui.jpg" style="display: none">

</body>

<script>
        var time = document.getElementById("time");
        var img = document.getElementById("img");
        var num = time.innerHTML;
        setInterval(function () {
            if(num>1){
                num--;
                time.innerHTML = num;
            }else{
                img.style.display = "block";
            }
        },1000);
</script>
</html>
三.轮播图：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="img" src="img/banner_1.jpg">

</body>

<script>

        var img = document.getElementById("img");
        var num = 1;
        setInterval(function () {
           num++;
           //判断num和3的大小
            if(num>3){
                num = 1;
            }
            img.src = "img/banner_"+num+".jpg";
        },2000);
</script>
</html>
四.省级联动：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <select id="pro" onchange="choice()">
       <option value="sc">四川</option>
       <option value="cq">重庆</option>
       <option value="gd">广东</option>
   </select>

   <select id="city">
       <option>成都</option>
       <option>德阳</option>
       <option>绵阳</option>
   </select>

</body>

<script>

    var pro = document.getElementById("pro");
    var city = document.getElementById("city");

    function choice() {
        var _pro = pro.value
        switch (_pro) {
            case "sc":
                city.innerHTML = "<option>成都</option>\n" +
                    "       <option>德阳</option>\n" +
                    "       <option>绵阳</option>"
                break;
            case "cq":
                city.innerHTML = "<option>重庆</option>";
                break;
            case "gd":
                city.innerHTML = "<option>广州</option>\n" +
                    "       <option>深圳</option>\n" +
                    "       <option>东莞</option>"
                break;
        }
    }
</script>
</html>
五.动态表格：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        table{
            border: 1px solid;
            margin : auto;
            width: 500px;
        }
        td{
            border: 1px solid;
        }
        div{
            text-align: center;
        }
    </style>
</head>
<body>

        <div>
            <input type="text" id="id" placeholder="请输入编号">
            <input type="text" id="name" placeholder="请输入名字">
            <input type="text" id="gender" placeholder="请输入性别">
            <input type="button" id="add" value="添加" onclick="add()">
        </div>

    <table>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>gender</td>
            <td>delete</td>
        </tr>
        <tr>
            <td>1</td>
            <td>coco</td>
            <td>女</td>
            <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>bobo</td>
            <td>男</td>
            <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>yoyo</td>
            <td>女</td>
            <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
        </tr>
    </table>

</body>

<script>
        function del(obj) {
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }

        function add() {
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var gender = document.getElementById("gender").value;

            var table = document.getElementsByTagName("table")[0];
            //追加一行
            table.innerHTML += " <tr>\n" +
                "            <td>"+id+"</td>\n" +
                "            <td>"+name+"</td>\n" +
                "            <td>"+gender+"</td>\n" +
                "            <td><a href=\"javascript:void(0)\" onclick=\"del(this)\">删除</a></td>\n" +
                "        </tr>"

        }
</script>
</html>
六.表格全选：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        table{
            border: 1px solid;
            margin : auto;
            width: 500px;
        }
        td{
            border: 1px solid;
        }

    </style>
</head>
<body>

    <table>
        <tr>
            <td></td>
            <td>id</td>
            <td>name</td>
            <td>gender</td>
            <td>delete</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" ></td>
            <td>1</td>
            <td>coco</td>
            <td>女</td>
            <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice"></td>
            <td>2</td>
            <td>bobo</td>
            <td>男</td>
            <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice"></td>
            <td>3</td>
            <td>yoyo</td>
            <td>女</td>
            <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
        </tr>
    </table>
    <center>
    <button id="qx">全选</button>
    <button id="qbx">全不选</button>
    <button id="fx">反选</button>
    </center>
</body>

<script>
    document.getElementById("qx").onclick = function () {
        var checkboxs = document.getElementsByName("choice");
        for (var i = 0;i<checkboxs.length;i++){
            checkboxs[i].checked = true;
        }

    }

    document.getElementById("qbx").onclick = function () {
        var checkboxs = document.getElementsByName("choice");
        for (var i = 0;i<checkboxs.length;i++){
            checkboxs[i].checked = false;
        }

    }

    document.getElementById("fx").onclick = function () {
        var checkboxs = document.getElementsByName("choice");
        for (var i = 0;i<checkboxs.length;i++){
            checkboxs[i].checked = !checkboxs[i].checked;
        }

    }

    var trs = document.getElementsByTagName("tr");
    for (var i = 0;i<trs.length;i++){
            trs[i].onmouseover = function (ev) {
                this.style.background = "red"
            }

            trs[i].onmouseout = function (ev) {
                this.style.background = "white"

            }
    }
</script>
</html>
七.表单验证：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <form id="form">

        用户名：<input type="text" id="username" name="name" onblur="checkName()">
        <span id="sp_name"></span>
        <br>
        <input type="submit">

    </form>

</body>

<script>
    window.onload = function (ev) {

        document.getElementById("form").onsubmit = function (ev1) {

            return checkName();
        }

    }

    function checkName() {
        var useranme = document.getElementById("username").value;
        var sp_name= document.getElementById("sp_name");
        var regExp = new RegExp("^.{3,20}$");
        if(regExp.test(useranme)){
            sp_name.innerHTML = "可以注册";
            sp_name.style.color = "green";
            return true;
        }else{
            sp_name.innerHTML = "用户名格式有误";
            sp_name.style.color = "red";
            return false;
        }
    }
</script>
</html>

JavaScript常见案例的更多相关文章

  1. 关于JavaScript 常见的面试题

    关于JavaScript常见的面试题总结 一.JavaScript基本数据类型 null:空.无.表示不存在,当为对象的属性赋值为null,表示删除该属性 undefined:未定义.当声明变量却没有 ...

  2. jQuery常见案例

    jQuery常见案例 通过jQuery实现全选,反选取消: 选择 地址 端口 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> ...

  3. JavaScript 常见使用误区

    JavaScript 常见使用误区,都是平时开发过程中填过的一些坑,整理记录下. 比较运算符常见错误 //在常规的==比较中,数据类型是被忽略的,以下 if 条件语句返回 true: var x = ...

  4. JavaScript常见集合操作

    JavaScript常见集合操作 集合的遍历 FOR循环(效率最高) 优点:JavaScript最普遍的for循环,执行效率最高 缺点:无法遍历对象 for(let i=0;i<array.le ...

  5. javascript常见的20个问题与解决方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 上海苹果维修点分享苹果电脑MACBOOK故障维修常见案例

    苹果的电子设备无论是外观和性能都是无与伦比的美丽,很多开发者都开始选用苹果电脑macbook.近年来苹果售后维修点来维修苹果电脑的用户也越来越多,我们上海苹果维修点就整理分享了一些苹果电脑MACBOO ...

  7. JavaScript 入门案例

    四.  JavaScript 入门案例 在看本节之前,笔者建议您先看 JavaScript 基础篇  https://www.cnblogs.com/IT-LFP/p/10945884.html 1. ...

  8. JavaScript 常见的六种继承方式

    JavaScript 常见的六种继承方式 前言 面向对象编程很重要的一个方面,就是对象的继承.A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. 大部分 ...

  9. JavaScript —— 常见用途

    javaScript 简介 第一个JavaScript 程序: 点击按钮显示日期   <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. [redis] 与redis cluster有关的学习笔记

    主要是以下三个官方文档,只略读了前两个,第三个还没有读. <redis cluster tutorial> <redis sentinel> <redis cluster ...

  2. [本体论][UML][统一建模语言][软件建模][OWL]从本体论到UML到OWL

    以下内容,是关于软件建模的方法与思路. UML与OWL都是基于本体论的建模语言. 本体论(哲学) 本体论(信息科学) UML(统一建模语言) more info 参考:[设计语言][统一建模语言][软 ...

  3. Postman 进阶（pre-request scripts&test script）

    Postman 进阶 1. pre-request scripts   pre-request scripts是一个关联了收藏夹内request,并且在发送request之前执行的代码片段.这对于在r ...

  4. eclipse maven引入第三方jar包后如何下载源代码(sources)

    1. 在eclipse windows -> properties->maven 选项,然后查看右侧 菜单来中 找到 Download Artifact Sources  选项勾选:如果想 ...

  5. group_concat的使用

    1.场景 仓库使用系统实现了先进先出,给仓库的备货单原先设计如下模式: tx3表: 不同的批次分开行显示,仓库从这个备货单可以知道这个货品需要备货哪些批次,多少数量 用了几天,仓库对此备货单样式提出如 ...

  6. Openstack-Ceilometer-Alarm运行机制

    1校验 对alarm列表进行定时监测,如果发现与设置的limit值不满足,则发出警报 监控服务分为三种:默认服务,单进程校验服务和分布式校验服务.根据配置来决定,默认配置:default Alarm状 ...

  7. NOIP2017感想

    说实话,这次刚刚看到题目的时候真的有点懵.尤其是第一天的第一题,浪费了太多的时间,一开始天真的以为10的9次方,会爆long long.然后就特别傻的写一个高精度,总觉得自己有哪些细节方面处理的不到位 ...

  8. jQuery图片无缝轮播

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. Nginx+keepalived 双机热备（主从模式）

    负载均衡技术对于一个网站尤其是大型网站的web服务器集群来说是至关重要的!做好负载均衡架构,可以实现故障转移和高可用环境,避免单点故障,保证网站健康持续运行.关于负载均衡介绍,可以参考:linux负载 ...

  10. 在oracle中如何把前台传过来的日期字符串转换成正确格式

    insert into ibill_sys_version(versionId,productCode,versionCode,versionDesc,versionUrl, upgradeWay,u ...