JavaScript——Demo

最新推荐文章于 2020-12-17 11:19:05 发布

white camel

最新推荐文章于 2020-12-17 11:19:05 发布

阅读量1.3k

点赞数 2

分类专栏：前端技术文章标签： Javascript Demo jsDemo

本文链接：https://blog.csdn.net/m0_37989980/article/details/103734353

版权

前端技术专栏收录该内容

12 篇文章 4 订阅

订阅专栏

<body>

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

<script type="text/javascript">
    /*
    *   分析：
    *       1. 获取图片对象
    *       2. 给图片对象绑定单击事件
    *       3. 每次点击切换图片
    *           * 若灯是开的 on， 切换图片为off
    *           * 若灯是关的 off, 切换图片为on
    *           可以使用flag标记来完成
    */

    // 获取图片对象
    var light_off = document.getElementById("light_off");
    // alert(light_off.src);
    // 给Light_off设置单击事件
    var flag = false; // 灯泡是关闭的状态
    light_off.onclick = function () {
        if (flag) {
            light_off.src = "../img/off.gif";
            flag = false;
        } else {
            light_off.src = "../img/on.gif";
            flag = true;
        }
    }
    
</script>
</body>

轮播图

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        img {
            width: 100%;
        }
    </style>
</head>
<body>

<img src="../img/banner_1.jpg" id="img1">

<script type="text/javascript">

    //分析
    //1. 在页面上使用img标签展示图片
    //2. 定义一个方法, 修改图片对象的src属性
    //3. 定义一个定时器,每隔3秒调用方法一次

    var img1 = document.getElementById("img1");
    var number = 1;

    function modifyImage() {
        number++;
        if (number > 3) {
            number = 1;
        }
        img1.src = "../img/banner_" + number + ".jpg";
    }

    setInterval(modifyImage, 2000);

</script>
</body>

自动跳转
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
    <style type="text/css">
        .time {
            color: red;
            font-weight: bold;
        }

        p {
            text-align: center;
        }
    </style>
</head>
<body>

<p>
    <span class="time">5</span>秒之后,自动跳转到百度...
</p>

<script type="text/javascript">
    // 分析
    //1. 显示页面效果
    //2. 倒计时读秒效果实现
        //2.1 定义一个方法,获取span标签,修改span标签体的内容,时间--
        //2. 定义一个定时器, 1s执行一次该方法
    //3. 在方法中判断时间若<=0, 则跳转到百度界面

    var second = 5;
    var span_time = document.getElementsByClassName("time")[0];
    function modifyTime() {
        second--;
        if (second <= 0){
            location.href = "https://www.baidu.com";
        }
        span_time.innerHTML = second +" ";
    }

    setInterval(modifyTime, 1000);
</script>
</body>

window弹框

index.html

<body>

用户编号:<input id="uid" type="text"><br>
用户姓名:<input id="uname" type="text"><br>
<input id="btn" type="button" value="选择" onclick="open1()">

<script type="text/javascript">
    //1. 创建一个页面
        //1.1 有两个输入项和一个按钮
        //1.2 按钮上有一个时间: 弹出一个新窗口open
    //2. 创建弹出页面
        //2.1 在页面上创建一个表格
        //2.2 每一行有一个按钮和编号和姓名
        //2.3 按钮上有一个事件: 把当前的编号和姓名,赋值到页面1的两个输入框内

    function open1() {
        window.open("user.html","","width=250,height==150");
    }
</script>
</body>

user.html

<body>

<table border="1">
    <tr>
        <td>操作</td>
        <td>编号</td>
        <td>姓名</td>
    </tr>
    <tr>
        <td><input type="button" value="选择" onclick="s('100','张三');"></td>
        <td>100</td>
        <td>张三</td>
    </tr>
    <tr>
        <td><input type="button" value="选择" onclick="s('101','李四');"></td>
        <td>101</td>
        <td>李四</td>
    </tr>
    <tr>
        <td><input type="button" value="选择" onclick="s('102','王五');"></td>
        <td>102</td>
        <td>王五</td>
    </tr>
</table>

<script>
    function s(uid, uname) {
        // 跨页面传值,需要用到window的opener属性,创建当前页面父页面的引用
        var fwindow = window.opener;
        fwindow.document.getElementById("uid").value = uid;
        fwindow.document.getElementById("uname").value = uname;
        // 关闭窗口
        window.close();
    }
</script>

</body>

省市联动

<body>
<select id="countryID" onchange="add1(this.value)"> <!--this.value,当前点击的是哪个option就是谁的值-->
    <option value="0">--请选择--</option>
    <option value="中国">中国</option>
    <option value="美国">美国</option>
    <option value="德国">德国</option>
    <option value="日本">日本</option>
</select>

<select id="cityID"></select>

<script>

    // 创建一个二维数组存储数据
    var arr = new Array(4);
    arr[0] = ["中国", "河南", "台湾", "香港", "澳门"];
    arr[1] = ["美国", "纽约", "华盛顿", "旧金山", "夏威夷"];
    arr[2] = ["德国", "柏林", "慕尼黑", "狼堡", "法兰克林"];
    arr[3] = ["日本", "北海道", "广岛", "长崎", "大阪", "东京"];

    function add1(val) {
        /*
        *   1. 遍历二维数组
        *   2. 得到也是一个数组(国家对应关系)
        *   3. 拿到数组的第一个值和传递过来的值作比较
        *   4. 如果相同, 获取到的第一个值后面的元素
        *   5. 得到city的select
        *   6. 添加过去, 使用appendChild的方法
        *       - 创建option(三步)
        */

        /*
        *   由于每次都要想city里面添加option
        *   第二次添加, 追加
        *   - 每次添加之前, 判断一下city里面是否有option,如果有就删除
        */

        // 获取city的select
        var city1 = document.getElementById("cityID");
        var options1 = city1.getElementsByTagName("option");
        // 遍历数组
        for (var m = 0; m < options1.length; m++) {
            // 得到每一个option
            var op = options1[m];
            // 删除这个option,通过父节点删除
            city1.removeChild(op);
            m--;
        }

        // 遍历二维数组
        for (var i = 0; i < arr.length; i++) {
            // 得到二维数组里面的每一个数组
            var arr1 = arr[i];
            // 得到遍历之后的数组的第一个值
            var firstValue = arr1[0];
            // 判断传递过来的值和第一个值是否相同
            if (firstValue == val) {
                // 获取第一个值后面的元素
                for (var j = 1; j < arr1.length; j++) {
                    var value1 = arr1[j]; // 得到城市的名称
                    // 创建option
                    var option1 = document.createElement("option");
                    // 创建文本
                    var text1 = document.createTextNode(value1);
                    // 把文本添加到option1里面
                    option1.appendChild(text1);
                    // 添加值到city1里面
                    city1.appendChild(option1);
                }
            }
        }
    }
</script>

</body>

表格全选

<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table {
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td, th {
            text-align: center;
            border: 1px solid;
        }

        div {
            margin-top: 10px;
            margin-left: 30%;
        }

        .out {
            background-color: white;
        }

        .over {
            background-color: pink;
        }
    </style>
</head>
<body>

<script>
    //1. 在页面加载完后绑定事件
    window.onload = function () {
        //2. 给全选按钮绑定单击事件
        document.getElementById("selectAll").onclick = function () {
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked = true;
            }
        }

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

        document.getElementById("selectRev").onclick = function () {
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++) {
                // 设置每一个cb状态为相反
                cbs[i].checked = !cbs[i].checked;
            }
        }

        document.getElementById("firstCb").onclick = function () {
            var cbs = document.getElementsByName("cb");
            // 获取第一个Cb
            // 因为给第一个添加了事件, 当前的this就是第一个checkbox
            for (var i = 0; i < cbs.length; i++) {
                // 设置每一个cb状态和第一个cb状态相同
                cbs[i].checked = this.checked;
            }
        }

        // 给所有tr绑定鼠标移到元素之上和移出元素事件
        var trs = document.getElementsByTagName("tr");
        // 遍历
        for (var i = 0; i < trs.length; i++) {
            // 移到元素之上
            trs[i].onmouseover = function () {
                this.className = "over";
            }
            // 移除元素
            trs[i].onmouseout = function () {
                this.className = "out";
            }
        }


    }
</script>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstCb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选" onclick="">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>