JavaScript——Demo

目录

• 电灯开关
• 轮播图
• 自动跳转
• window弹框
• 省市联动
• 表格全选

电灯开关

    /*
    *   分析：
    *       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;
        }
    }
    

轮播图

    
    轮播图
    
        img {
            width: 100%;
        }
    







    //分析
    //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);

自动跳转

    
    自动跳转
    
        .time {
            color: red;
            font-weight: bold;
        }

        p {
            text-align: center;
        }
    




    5秒之后,自动跳转到百度...



    // 分析
    //1. 显示页面效果
    //2. 倒计时读秒效果实现
        //2.1 定义一个方法,获取span标签,修改span标签体的内容,时间--
        //2. 定义一个定时器, 1s执行一次该方法
    //3. 在方法中判断时间若
用户姓名:



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

    function open1() {
        window.open("user.html","","width=250,height==150");
    }

user.html

    
        操作
        编号
        姓名
    
    
        
        100
        张三
    
    
        
        101
        李四
    
    
        
        102
        王五
    



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

省市联动

 
    --请选择--
    中国
    美国
    德国
    日本






    // 创建一个二维数组存储数据
    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 
        编号
        姓名
        性别
        操作
    

    
        
        1
        令狐冲
        男
        删除
    

    
        
        2
        任我行
        男
        删除
    

    
        
        3
        岳不群
        ?
        删除