JavaScript代码

m0_46393353

于 2020-06-29 14:19:35 发布

阅读量642

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/m0_46393353/article/details/107019393

版权

这篇博客详细介绍了JavaScript代码的测试用例，包括从test01到test33的逐步解析，最后讨论了测试成功的关键点和hello.js的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

test01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    </style>
    <!--1.内嵌方式-->
    <script>
        //alert("hello JavaScript");//弹出一个窗口
    </script>
    <!--3.引用外部的js脚本文件-->
    <script type="text/javascript" src="/js/hello.js">
        <!--在此处不可以再写js代码-->
    </script>
</head>
<body>
第一个JavaScript程序
<!--<script>-->
<!--alert("hello JavaScript");//弹出一个窗口-->
<!--</script>  写在body中也可以-->

<hr>
<!--2.内部方式-->
<input type="button" value="点我" onclick="alert('我被点了，晕了！')">

<!--<div onmouseover="alert('走开')">把鼠标移上来</div>-->

<!--<a href="alert('超链接被触发')">我是超链接</a>   这种方式不可以，它认为链接一个资源-->

<!--<a href="" onclick="alert('超链接被触发了')">我是超链接</a>-->

<a href="javascript:alert('超链接被触发了')">我是超链接</a>
</body>
</html>

test02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //变量
        var name;
        name = 'tom';
        //name=20;
        //name=180.5;
        var age = 18;
        var 姓名 = "张无忌";
        //汉字也可以
        //var=var 这个不可以

        sex="male";//强烈不建议
        var a=5,b=2,c=7;
        {
            var x=6;
            // alert(a);
            // alert(x);
            let y=7;
        }
        alert(x);
        alert(y);
        alert(sex);
    </script>
</head>
<body>

</body>
</html>

test03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 输出信息
        // alert("嘿嘿");
        // console.log("哈哈");//通过开发人员工具的console窗口验证结果
        // document.write("嘻嘻");
        //
        // 输入
        // var name = prompt("请输入你的姓名：");
        // console.log(name);
        // var age = prompt("请输入你的年龄：");
        // console.log(age);
        // console.log(age + 2);
        // console.log(typeof age);
        // age = Number(age);
        // console.log(age + 2);

        //转义字符
        console.log("he\tllo\nworld");
        console.log('wel\'come');

        // 注释
        // 单行注释
        /*
            这是多行注释
        */
    </script>
</head>
<body>

</body>
</html>

test04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        数据类型
         */
        var name ='tom';
        var age=18;
        var height=180.5;

        var flag=true;

        var hobby=null;

        var date=new Date();

        var arr=new Array();
        var sex;//当定义了变量，但是未赋值，则返回undefined
        // console.log(typeof name);
        // console.log(typeof age);
        // console.log(typeof height);
        // console.log("hello"-5);//返回NaN
        // console.log(typeof flag);
        // console.log(typeof hobby);//如果数据是null、Date、Array等，返回object
        // console.log(typeof date);
        // console.log(typeof arr);
        // console.log(typeof sex);
        /*
        类型转换
         */
        //1.转换为number
        var a='12';
        // console.log(typeof a);

        // 方式一：使用Number()
        // a=Number(a);
        // a=Number('12.5');
        // a=Number('12abc')
        a=Number('abc12');
        // console.log(12,'aaa',4,6);
        // console.log(Number(a),typeof a);

        //方式二：使用parseInt()
        // a=parseInt('12');
        // a=parseInt('12.5');
        // a=parseInt('12abc');//按字符顺序进行解析
        // a=parseInt('abc12');
        // console.log(a,typeof a);

        // 方式三：使用parseFloat()
        // a=parseFloat('12');
        // a=parseFloat('12.5');
        // a=parseFloat('12abc');//按字符顺序进行解析
        // a=parseFloat('abc12');
        // console.log(a,typeof a);
        //
        // a=Number(true);//boolean在内存中使用数字表示，true为1，false为0
        // console.log(a,typeof a);

        /*
        转换为字符串
         */
        // var a=12;
        // var a=true;
        // a=a+'';
        // console.log(a,typeof a);

        /*
        转换为布尔
         */
        // var a=Boolean(0);
        // var a=Boolean('');
        // var a=Boolean(null);
        // var a=Boolean(undefined);
        // var a=Boolean(NaN);
        // var a=Boolean(4);
        // var a=Boolean('tom');
        var name='tom';
        a=Boolean(name);
        console.log(a,typeof a);
        if (name){
            console.log('哈哈');
        }
    </script>
</head>
<body>

</body>
</html>

test05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            算术运算符,+、-、*、/、%、**、++、--
        */
        // var a=5;
        // var b=3;
        // var c='aaa';//var c ='aaa'
        // var d=true;
        //console.log(a+b);
        //console.log(a-b);
        //console.log(a*b);
        //console.log(a/b);
        //console.log(a%b);
        //console.log(a**b);//a的b次方
        //console.log(a+c);//将a转换为字符串，在和c字符进行首尾相连
        //console.log(a-c);//将c字符转换为数值，和a进行算术减运算

        var a=1;
        var b=2;
        //console.log(a++);//先引用，后自加减，表达式会返回变化前a的值，然后a再自加减 a = a + 1
        //console.log(a);//表达式执行完，a的值为2
        //console.log(++a);//先自加减，后引用，表达式会返回变化后a的值，表达式执行完a是变化后的值
        //console.log(a);
        console.log(b--);//表达式返回变化前b的值，表达式执行完b自减
        console.log(b);//变化后b的值1
        console.log(--b);//表达式返回变化后b的值0，表达式执行完b为0
        console.log(b);

        /*
            比较运算符,>、>=、<、<=、==、= = =、!=
        */
        // console.log(a>b);
        // console.log(a<b);
        // console.log(a>=b);
        // console.log(a<=b);
        // var a=5;
        // var b='5';
        //
        // console.log(a==b);//只判断内容是否相等
        //
        // console.log(a===b);//全等于，既要判断内容，也要判断数据类型
        // console.log(a+b);
        // console.log(a==d);//var a=1;测试 true表示1 false表示0

        /*
            赋值运算符
        */
        // a=8;
        // a+=2;//a=a+2
        // a-=2;
        // console.log(a);

        /*
            逻辑运算符
        */
        var x=true;
        var y=false;
        // console.log(x&&y);
        // console.log(x||y);
        // console.log(!x);
        // a=0;
        // b=5;
        // console.log(a&&b);
        // console.log(a||b);

        /*
            条件运算符：条件？表达式1：表达式2
         */
        //var a=5;
        //var b=3;
        //console.log(a>b?a+b:a-b);
    </script>
</head>
<body>

</body>
</html>

test06

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //使用Math对象进行数学运算，用法Math.方法名(参数)
        //1、绝对值
        console.log(Math.abs(-5));

        //2、计算次方
        console.log(Math.pow(2,4));

        //3、四舍五入
        console.log(Math.round(3,14))

        //4、向上取整，向下取整
        console.log(Math.ceil(3,4));//返回大于3，4的最小整数
        console.log(Math.floor(3,5));//返回小于3，5的最大整数

        //5、生成一个[0,0,1)之间的随机浮点数
        console.log(Math.random());

        //6、最大值，最小值
        console.log(Math.max(23,1,54,2,-6));
        console.log(Math.min(23,1,54,2,-6));

        //7、圆角率的值
        console.log(Math.PI);
    </script>
</head>
<body>

</body>
</html>

test07

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var age=23;
        if(age>=60)
            console.log('老年');
        else if(age>=30)
            console.log('中年');
        else if(age>=16)
            console.log('少年');
        else
            console.log('童年');

        var day='星期五';
        switch(day)
        {
            case'星期一':
                console.log('吃包子');
                break;
            case'星期二':
                console.log('吃油条');
                break;
            case'星期三':
            case'星期四':
                console.log('吃面条');
                break;
            case'星期五':
                console.log('吃馒头');
                break;
            default:
                console.log('不吃');

        }
    </script>
</head>
<body>

</body>
</html>

test08

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //while
//        var i = 1;//循环变量赋初值
//        var sum = 0;//累加器
//        while (i <= 100)//循环控制条件
//        {
//            //i在每次循环过程中就可以取遍1-100之间的每一个数
//            sum = sum + i;
//            i++;//使循环趋于结束的每一条语句
//        }
//        console.log(sum);
        //do...while
        //打印输出1-100之间能被7整除的这些数的和，及他们的个数
        var i=1;
        var sum=0;
        var cnt=0;
        do
        {
            if(i%7==0)
            {
                sum+=i;
                cnt++;
            }
            i++;
        }while(i<=100);
        console.log(sum,cnt);

        //for循环
        var sum=0;
        var cnt=0;
        for(var i=1;i<=100;i++)
            if(i%7==0)
            {
                sum+=i;
                cnt++;
            }
            console.log(sum,cnt);
        //for...in...对集合类型的数据进行遍历
        var str='welcome to javascript'
        for(var s in str)
            //console.log(s)
            console.log(str[s])
        //打印输出1-100之间所有的素数，并统计他们的个数

    </script>
</head>
<body>

</body>
</html>

test09

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arr=new Array();
        // arr[0]=12;
        // arr[1]=9;
        // //可以放任意多个
        // console.log(arr.length)
        // console.log(arr[2])

        // var arr=new Array('tom','jack','alice');
        // console.log(arr);
        // console.log(arr[0]);
        // console.log(arr[arr.length-1])

        // var arr=['tom','jack','alice','mike'];
        // console.log(arr);
        // console.log(arr[0]);
        // console.log(arr[arr.length-1])

        //将1-100之间所有的素数放到nums数组中，输出
        var nums = new Array();
        var cnt = 0;
        for (var m = 1; m <= 100; m++)
        {
            //m就取遍了1-100之间每一个数
            /*
                素数，m是素数，除了能被1和m本身整除外，在不能被其他数整除
                1、2、3、4......m-1
             */
            for (var n = 2; n < m; n++) {
                if (m % n == 0)
                    break;
            }
            if (n==m) {
                    nums[cnt] = m;
                    cnt++;
                }

        }
        // console.log(nums);
        // var arr=new Array('tom','jack','alice','admin');
        // var arr=[12,3,34,465,2,32,545,76];
        // console.log(arr);
        // arr.sort();
        // console.log(arr);

        var arr=new Array('tom','jack','alice','jack');
        // console.log(arr);
        // console.log(arr.reverse());
        // console.log(arr.join());
        // console.log(arr.join('-'));

        console.log(arr.indexOf('jack'));
        console.log(arr.lastIndexOf('jack'));//最后一次出现的位置

        console.log(arr.slice(1,3));
        console.log(arr.slice(1));

        console.log(arr.toString());
    </script>
</head>
<body>

</body>
</html>

test10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arrr=new Array();
        // arr[0]=new Array();
        // arr[1]=new Array();
        // arr[0][0]=12;
        // arr[0][1]=9;
        // arr[1][0]=10;
        // console.log(arr);

        var arr=[
            [12,54,2,67],
            [1,32,45,3],
            [1,43,65,87]
        ];
        console.log(arr);

        for(var i=0;i<arr.length;i++)
        {
            for(var j=0;j<arr[i].length;j++)
                document.write(arr[i][j]+'&nbsp&nbsp&nbsp&nbsp');
        document.write('<br>')
        }
    </script>
</head>
<body>

</body>
</html>

test11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            自定义函数
         */
        function show()
        {
            console.log('嘿嘿');
        }
        function calc(num1,num2,num3)
        {
            console.log(num1,num2,num3);
        //     var sum=num1+num2+num3;
        //     console.log(sum);
        //     return sum;//返回值
         }
        // //2、调用函数
        // show();
        // var result =calc(12,6,3);
        // console.log(result);

        /*
            变量的作用域
            1.局部作用域
         */
        //var c=6;//全局变量
        // function fn(){
        //     var a=5;
        //     console.log(a);
        //     console.log(c);
        // }//定义函数，定义了函数，如果函数不调用，函数体是不执行的
        // fn();//调用函数
        function fn() {

        } fn()
        {
            if(true)
            {
                var a=5;//局部变量
                let a=5;//块级变量
                console.log(a);
            }
            console.log(a);
        }
        // {
        //     var d=2;//全局变量
        //     let x=4;
        //     console.log(x)
        // }
        // console.log(c);
        // console.log(x);
        // console.log(a);
        fn();//调用函数
    </script>
</head>
<body>

</body>
</html>

test12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1() {
            console.log('111');
        }//定义函数
        //f1();//调用函数
        //当我们单击窗口时就执行f1函数----1、时间绑定函数
        // window.οnclick=f1();
        // window.οnclick=f1;//回调执行，即回头调用此函数，不能加括号
        /*
            函数本省也是一种数据类型
            数据类型：string、munber、boolean、null、undefined、object、function
         */
        console.log(typeof f1);//返回f1的类型

        //2、将一个函数作为另一个函数的参数
        function f2(x, y) {
            console.log(x);
            console.log(y);
            y();//调用传递过来的f1函数
        }

        //f2(5,f1);//f1是一个函数，作为实际参数，f1作为实参是只是传递f1到y，并不会执行

        // var a=f1;
        // console.log(typeof a);

        /*
            示例
         */
        var arr = [12, 34, 545, 76, 87, 32];

        /*
            定义比较器
            升序:如果第一个参数比第二个参数大，则返回正数
                 如果第一个参数比第二个参数小，则返回负数
                 如果两个参数相等，则返回0
         */
        function compareFn(a, b) {
            return b - a;
            //     if(a>b)
            //         return 1;
            //     else if(a<b)
            //         return -1;
            //     else
            //         return 0;
            }
            // console.log(arr);
            // arr.sort(compareFn);
            // console.log(arr);

            function show(value, index) {
                console.log(index, value);
            }

            arr.forEach(show);
    </script>
</head>
<body>

</body>
</html>

test13

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            1、一般用于回调
         */
        // function show() {
        //     console.log('111')
        // }
        // window.οnclick=show;
        window.onclick =function(){//匿名函数一般用于回调
            console.log('111');
        };

        // function f1(){
        //     console.log(222);
        // }
        // var a=f1;//如果单纯要把f1赋值给变量a
        // console.log(typeof f1,typeof a);

        var a=function () {
            console.log(222);
        };

        var arr=[12,34,65,76,987,54];
        function show(value,index) {
            console.log(index,value)
        }
        // arr.forEach(show);

        // arr.forEach(function (value,index)
        // {
        //     console.log(index,value);
        // });

        // function () {
        //
        // }这种写法是错误的

        /*
            2、自执行函数
         */
        // function fn() {
        //     console.log(333)
        // }
        // fn();
        (function () {
            console.log(333)
        })();
    </script>
</head>
<body>

</body>
</html>

test14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            箭头函数：语法
            参数=>返回值
         */
        // var a=function (x) {
        //     return x*2;
        // };//匿名函数
        // var a=x=>x*2;//优点，更简洁
        // console.log(a(4));

        //示例2  如果箭头函数没有参数，或者有两个以上的参数，则必须使用小括号表示参数部分
        // var a=function (x,y) {
        //     return 5;
        // };
        // // var a= =>5;
        // var a=(x,y)=>5;
        // console.log(a(4));

        //示例3  如果箭头函数的函数体多于一条语句，必须使用大括号将他们括起来
        // var a=function (x,y) {
        //    var sum=x+y;
        //     return sum;
        // };
        // var a = (x,y) => x+y{
        //     var sum=x+y;
        //     return sum;
        // }
        // console.log(a(3,4));

        // var a=function (x) {
        //     console.log(x);
        // };
        var a= x => console.log(x);
        a(5);
        console.log(a(5));//这样做不合适

        //应用场景
        var arr=[1,32,43,65,76,34];
        arr.forEach((value,index)=>{
            console.log(index,value*2);
        });

        window.onclick=()=>{
            console.log(111);
        }
    </script>
</head>
<body>

</body>
</html>

test15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var str ='hello world';
        var str='         hello world welcome to TaiYuan';
        console.log(typeof str);
        console.log(str);
        console.log(str.length);

        console.log(str.charAt(0),str.charAt(3),str[0],str[str.length-1]);

        console.log(str.indexOf('o'));
        console.log(str.lastIndexOf('o'));

        console.log(str.replace('TaiYuan','NanJin'));
        //var result=str.replace('TaiYuan','NanJin');

        console.log(str.toUpperCase());
        console.log(str.toLowerCase());

        console.log(str.substring(1,4));
        console.log(str.substring(1));//从1提取到末尾

        console.log(str.split(' '));
        console.log(str.split(' ',3));

        console.log(str.trim());

        var s=new String('hello');
        console.log(s);
        console.log(typeof s);//引用字符串的对象类型
        console.log(s.toUpperCase());
    </script>
</head>
<body>

</body>
</html>

test16

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var date = new Date();
        // var date=new Date(2020,1,14,12,10,22);//月份的取值范围是[0-11]
        // var date=new Date(12325415);
        console.log(date);

        var year=date.getFullYear();//返回年份
        console.log(year);
        var month=date.getMonth()+1;//返回月份【0-11】
        console.log(month);
        var d=date.getDate();//返回一个月中的第几天
        console.log(d);
        var hour=date.getHours();//返回小时
        console.log(hour);
        var minute=date.getMinutes();//分钟
        console.log(minute);
        var second=date.getSeconds();///秒
        console.log(second);

        let millseconds=date.getMilliseconds();
        let day=date.getDay();
        var weekday=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        let time=date.getTime();
        // console.log(day);
        var currenttime=year+'年'+checkdate(month)+'月'+checkdate(d)+'日'+checkdate(hour)+':'+checkdate(minute)+':'+checkdate(second)+ weekday[day];
        document.write(currenttime);

        function checkdate(num){
            if(num<10)
                return '0'+num;
            else
                return num;
        }
    </script>
</head>
<body>

</body>
</html>

test17

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义一个简单的JSON对象
        var user={
            "id":1001,
            "name":"tom",
            "age":20,
            "height":180.5,
            // "address":"山西太原",
            "address":{
                "province":"山西省",
                "city":"太原市",
                "district":"小店区"
            },
            "ismarried":true
        };
        //访问方式
        // console.log(user.name);
        // console.log(user.height);
        // console.log(user.address);
        // console.log(user.address.district);

        //JSON对象数组
        // var nums={12,321,32,43,54};
        var users=[
            {"id":9527,"username":"admin","password":"123","status":1},
            {"id":9528,"username":"tom","password":"123","status":1},
            {"id":9529,"username":"jack","password":"123","status":1},
            {"id":9589,"username":"alice","password":"123","status":1}
        ];
        for(var i=0;i<users.length;i++){
            var u=users[i];
            // console.log(u.id,u.username,u.password,u.status);
        }
        /*
            JSON对象和字符串之间的转换
         */
        // 1.将JSON对象转换为字符串
        // console.log(typeof user);
        // console.log(user);
        //
        // var str =JSON.stringify(user);
        // console.log(typeof str);
        // console.log(str);

        //2.将字符串转换为JSON对象
        //var str ="{'name':'zhangsan','age':18,'sex':'男'}";//报错了
        var str='{"name":"zhangsan","age":18,"sex":"男"}';//JSON语法规定

        var obj=JSON.parse(str);
        console.log(typeof str);
        console.log(str);
        console.log(typeof obj);
        console.log(obj);
    </script>
</head>
<body>

</body>
</html>

test18

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            1、使用object
         */
        var stu = new Object();
        //添加属性
        stu.name='tom';
        stu.age=18;
        stu.height=180.5;
        //添加方法
        stu.study=function () {
            console.log('我叫'+stu.name+'正在学习。。。。。');
        };
        stu.run=function () {
            console.log('正在参加马拉松');
        };
        //调用属性
        // console.log(stu.name,stu['age']);
        // stu.study();
        // stu.run();
        /*
            2、使用构造函数
         */
        // var date=new Date(2020,5,20);
        // console.log(date);
        function Student(name,age,height) {
            // console.log(name,age,height);
            //属性
            this.name=name;
            this.age=age;
            this.height=height;
            //方法
            this.show=function () {
                console.log('我叫'+this.name+',年龄'+this.age+',身高'+this.height);
            };
            this.study=function () {
                console.log('正在学习..');
            }
        }
        // student('tom',20,180.5);
        // var student=new Student('tom',20,180.5);
        // console.log(student.name,student.age);
        // student.show();
        // student.study();
        /*
            3、使用JSON对象
         */
        var student={
            "name":"tom",
            "age":20,
            "height":180.5,
            "sex":"male",
            "study":function () {
                console.log('正在学习...');
            }
        };
        console.log(student.name,student['sex']);
        student.study();
    </script>
</head>
<body>

</body>
</html>

test19

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function query() {
        //console.log(111);
        /*
            1.根据id属性获取，返回单个值
         */
        // var obDiv = document.getElementById("mydiv");
        // console.log(typeof obDiv);//DOM对象
        // console.log(obDiv);
        // /*
        //     2.根据name获取，返回集合，也就是数组
        //  */
        // var objs = document.getElementsByName("hobby");
        // console.log(typeof objs);
        // console.log(objs);
        /*
            3.根据标签名获取，返回集合
         */
        // var objs = document.getElementsByTagName();
        // console.log(typeof objs);
        // console.log(objs);
        /*
            4.根据CSS选择器来获取单个对象
         */
        //var obj = document.querySelector("#div2");//id选择器 只能返回第一个
        // var obj = document.querySelector("aaa");//类选择器 只能返回第一个
        // console.log(objs);
        // /*
        //     5.根据CSS选择器来获取多个对象
        //  */
        // var objs = document.querySelectorAll(.aaa);
        // console.log(objs.length);
        // console.log(obj);
        // for(var index=0;index<objs.length;index++)
        //     console.log(objs[index]);
        /*
            6.根据已有节点来获取其他节点
         */
        var obj = document.getElementById("second");
        // console.log(obj);
        // console.log(obj.parentNode);//父节点
        // console.log(obj.previousSibling);//当前节点的上一个节点
        // console.log(obj.nextSibling.previousSibling);
        // console.log(obj.nextSibling);

        console.log(obj.parentNode.firstChild);
        console.log(obj.parentNode.lastChild);
    }
</script>
</head>
<body>
<input type="button" value="获取页面中的元素" onclick="query()">
<div id="mydiv">hello</div>
<!--<div id="mydiv">world</div>-->
<div id="div2" class="aaa">world</div>
<p class="aaa">welcome</p >

爱好：<input type="checkbox" value="eat" name="hobby">吃饭
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="doudou" name="hobby">打豆豆

<ul>aaa<li>tom</li><li id="second">jack</li><li>alice</li><li>mike</li>bbb</ul>

test20

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hello{
            width: 300px;
            height: 300px;
            background: green;
            font-size: 40px;
        }
        .world{
            text-decoration: underline;
            font-weight: bold;
        }
    </style>
    <script>
        function getProperty() {
            1.
            获取属性的值
            // let obj=document.getElementById("baidu");
            // console.log(obj.href);
            // console.log(obj.target);

            // let obj=document.getElementById("male");
            // console.log(obj.value);
            //
            // let obj=document.getElementById("male");
            // console.log(obj.checked);//返回值true或false

            //设置属性的值
            // let obj=document.getElementById("baidu");
            // obj.href="http://www.sxgjpx.net";
            // obj.target="_self";
            //
            // let.obj=document.getElementById("female");
            // obj.checked=true;
        }
        //获取内容
        function getContent() {
            let obj=document.getElementById("mydiv");
            //获取内容
            // console.log(obj.innerHTML);
            console.log(obj.innerText);
            //设置内容
            // obj.innerHTML="<h2>世界你好</h2>";
            // obn.innerText="<h2>你好世界</h2>";
        }
        //访问CSS
        function getStyle() {
            var obj=document.getElementById("mydiv");
            // console.log(obj.style);
            // console.log(obj.style.width);
            // console.log(obj.style.height);
            // console.log(obj.style.background);
            // console.log(obj.style.borderTopRightRadius);

            //设置CSS样式属性
            // obj.style.width="300px";
            // obj.style.background="blue";
            // obj.style.fontSize="20px";

            //设置类选择器
            obj.className="world";
            console.log(obj.className);
        }
    </script>
</head>
<body>
    <input type="button" value="获取属性" onclick="getProperty()">
    <input type="button" value="访问内容" onclick="getContent()">
    <input type="button" value="访问CSS" onclick="getStyle()">
    <hr>
    <!--<a href="https://www.baidu.com" target="_blank" id="baidu">百度</a>-->
    <!--<br>-->
    <a href="https://www.baidu.com" target="_blank" id="baidu">点我</a><br>
    用户名: <input type="text" value="" name="username" id="username"> <br>
    性别：<input type="radio" name="sex" value="male" id="male">男
        <input type="radio" name="sex" value="female" id="female">女 <br>
    <div id="mydiv">
        hello world
    </div>
</body>
</html>

test21

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #logo{
            width: 100px;
            height: 50px;
        }
    </style>
    <script>
        function change() {
            if($("baidu").checked){
                $("logo").src="images/baidu.png";
                $("txtSearch").name="wd";
                $("frmSearch").action="https://www.baidu.com/s";
                $("btnSearch").value="百度搜索";
            }else if($("sogou").checked){
                $('logo').src="images/sogou.png";
                $("txtSearch").name="query";
                $("frmSearch").action="https://www.sogou.com/web";
                $("btnSearch").value="搜狗搜索";
            }else{
                $('logo').src="images/360.png";
                $("txtSearch").name="q";
                $("frmSearch").action="https://www.so.com/s";
                $("btnSearch").value="360搜索";
            }
        }
        /*
            用来简化元素的获取
         */
        function $(id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
<input type="radio" name="search" id="baidu" checked onclick="change()"><label for="baidu">百度</label>
<input type="radio" name="search" id="sogou" onclick="change()"><label for="sogou">搜狗</label>
<input type="radio" name="search" id="360" onclick="change()"><label for="360">360</label>
<form action="https://www.baidu.com/s" id="frmSearch">
    <img src="images/baidu.png" id="logo">
    <input type="text" name="wd" id="txtSearch" placeholder="请输入查询关键字">
    <input type="submit" id="btnSearch"  value="百度搜索">
</form>
</body>
</html>

test22

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function doAdd() {
            //创建一个li
            //1.创建元素的节点
            var li = document.createElement("li");
            //2.设置文本内容
            // var txt = document.createTextNode("alice");
            // li.appendChild(txt);

            li.innerText="alice";
            // console.log(li);

            //3.设置属性
            // li.id="fourth";
            li.setAttribute("id","fourth");
            // console.log(li.getAttribute("id"));
            console.log(li);

            //4.将li添加到ul中，添加到节点中
            var ul =document.getElementById("myul");
            // ul.appendChild(li);

            //5.将li添加到jack的前面
            // ul.insertBefore(li,document.getElementById("second"));

            //6.替换节点  用ul中的alice替换jack
            ul.replaceChild(li,document.getElementById("second"));
        }
        function doDelete() {
            //删除当前节点
            // document.getElementById("first").remove();

            var ul = document.getElementById("myul");
            // ul.removeChild(document.getElementById("first"));

            ul.removeChild(ul.lastChild);
        }
    </script>
</head>
<body>
<input type="button" value="添加" onclick="doAdd()">
<input type="button" value="删除" onclick="doDelete()">

<ul id="myul">
    <li id="first">tom</li>
    <li id="second">jack</li>
    <li>mike</li>
</ul>
</body>
</html>

test23

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

    function f1() {
            console.log(111);
        }

        window.onload = function () {
            // var btn2 = document.getElementById("btn2");//由于代码执行到此时，该部分代码会优于页面加载而先执行
            // console.log(btn2);
            // btn2.οnclick=function () {
            //     console.log(222);
            // };
            document.getElementById("btn2").onclick=function (event){
                console.log(222);
                console.log(event);
                console.log(event.srcElement);
                console.log(this);//this等价于event.srcElement 表示事件源
            };

            // document.getElementById("btn2").οnclick=f1;
            var hobbies = document.getElementsByName("hobby");
            // console.log(hobbies);
            for (var i = 0; i < hobbies.length; i++) {
                // console.log(hobbies[i]);
                console.log(i);
                hobbies[i].onclick = function () {
                    // console.log(hobbies[i].value);
                    // console.log(i);
                    console.log(this.value);
                };//onclick事件没有触发前 循环先执行 i 0-3
            }
        };

    </script>
</head>
<body>
<!--方式1：静态绑定-->
<!--<input type="button" value="按钮1" onclick="alert('哈哈')">-->
<input type="button" value="按钮1" onclick="f1()">

<!--方式2：动态绑定-->
<input type="button" value="按钮2" id="btn2">
爱好： <input type="checkbox" name="hobby" value="eat">吃饭
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="doudou">打豆豆
</body>
</html>

test24

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            text-align: center;
        }
        #mytable{
            width: 500px;
            text-align: center;
            border:1px solid #ccc;
            margin:0 auto;//左右居中
        }
        #mytable td,#mytable th{
            border:1px solid #ccc;
        }
        #mytable tfoot tr{
            text-align: right;
        }
        tfoot tr td:first-child{
            text-align: center;
        }
    </style>
    <script>
        window.onload=function(){
            //为添加按扭绑定事件
            $("btnAdd").onclick=function(){
                //创建tr
                var tr = document.createElement("tr");

                //创建td
                tdChk = document.createElement("td");
                var tdName =document.createElement("td");
                var tdAge =document.createElement("td");
                var tdSex =document.createElement("td");
                var tdPhone =document.createElement("td");
                var tdDelete = document.createElement("td");

                //将数据添加到td中
                var chkDelete = document.createElement("input");
                chkDelete.type="checkbox";
                chkDelete.className="chk";
                tdChk.appendChild(chkDelete);

                chkDelete.onclick=function (){
                    var chks = document.querySelectorAll(".chk");
                    //统计已选中的数量
                    var cnt =0;
                    for(var j =0;j<chks.length;j++){
                        if(chks[j].checked){
                            cnt++;
                        }
                    }
                    //判断是否全部选中
                    if(cnt==chks.length){
                        $("all").checked=true;
                    }
                    else{
                        $("all").checked=false;
                    }
                };

                tdName.innerText=$("name").value;
                tdAge.innerText=$("age").value;
                tdSex.innerText=$("m").checked?$("m").value:$("f").value;
                tdPhone.innerText=$("phone").value;
                //创建input按钮
                var btnDelete = document.createElement("input");
                btnDelete.type="button";
                btnDelete.value="删除";

                btnDelete.onclick=function (){
                    this.parentNode.parentNode.remove();
                };
                tdDelete.appendChild(btnDelete);

                //将td添加tr中
                tr.appendChild(tdChk);
                tr.appendChild(tdName);
                tr.appendChild(tdAge);
                tr.appendChild(tdSex);
                tr.appendChild(tdPhone);
                tr.appendChild(tdDelete);

                //将tr添加到tbody
                $("tb").appendChild(tr);
            };
            //为删除按钮绑定事件
            var btnDeletes = document.querySelectorAll(".delete");
            for(var i =0;i<btnDeletes.length;i++){
                btnDeletes[i].onclick=function(){
                    this.parentNode.parentNode.remove();
                };
            }
            //为首行删除绑定事件
            $("btnDeleteFirst").onclick=function(){
                $("tb").getElementsByTagName("tr")[0].remove();
            };
            //为末行删除绑定事件
            $("btnDeleteLast").onclick=function(){
                var trs = $('tb').getElementsByTagName("tr");
                trs[trs.length-1].remove();
            };
            //为全选绑定事件
            $("all").onclick=function(){
                if($("all").checked){
                    var chks = document.querySelectorAll(".chk");
                    for (var i = 0; i < chks.length; i++){
                        chks[i].checked = true;
                    }
                }
                else{
                    var chks = document.querySelectorAll(".chk");
                    for(var i =0 ;i<chks.length;i++){
                        chks[i].checked=false;
                    }
                }
            };
            //实现当选中下面所有的复选框时全选
            var chks = document.querySelectorAll(".chk");
            for(var i =0;i<chks.length;i++){
                chks[i].onclick=function(){
                    // console.log(111);
                    //统计已选中的数量
                    var cnt =0;
                    for(var j =0;j<chks.length;j++){
                        if(chks[j].checked){
                            cnt++;
                        }
                    }
                    //判断是否全部选中
                    if(cnt==chks.length){
                        $("all").checked=true;
                    }
                    else{
                        $("all").checked=false;
                    }
                };
            }
            //为删除多个按钮绑定事件
            $("btnDeleteMulti").onclick=function (){
                var chks = document.querySelectorAll(".chk");
                for(var i =0 ;i <chks.length;i++)
                {
                    if(chks[i].checked){
                        chks[i].parentNode.parentNode.remove();
                    }
                }
            };
        };
        function $(id){
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <div>
        <table id="mytable">
            <thead>
            <tr>
                <th>
                    全选 <input type="checkbox" id="all">
                </th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tb">
            <tr>
                <td><input type="checkbox" class="chk"></td>
                <td>tom</td>
                <td>20</td>
                <td>male</td>
                <td>110</td>
                <td><input type="button" value="删除" class="delete"></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="chk"></td>
                <td>jack</td>
                <td>22</td>
                <td>male</td>
                <td>119</td>
                <td><input type="button" value="删除" class="delete"></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="chk"></td>
                <td>alice</td>
                <td>female</td>
                <td>120</td>
                <td><input type="button" value="删除" class="delete"></td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td><input type="button" value="删除多个" id="btnDeleteMulti"></td>
                <td colspan="5">
                    <input type="button" value="从首行删除" id="btnDeleteFirst">
                    <input type="button" value="从末行删除" id="btnDeleteLast">
                </td>
            </tr>
            </tfoot>
        </table>

        <form action="" id="myform">
            姓名: <input type="text" id="name"> <br>
            年龄: <input type="text" id="age"> <br>
            性别：<input type="radio" name="sex" id="m" value="male" checked>男
            <input type="radio" name="sex" id="f" value="female">女 <br>
            电话：<input type="text" id="phone"> <br>
            <hr>
            <input type="button" value="添 加" id="btnAdd">
            <input type="reset" value="重 置">
        </form>
    </div>
</body>
</html>

test25

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #username {
            outline: none;
        }

        .txtborder {
            border: 1px solid red;
        }

        #img {
            width: 160px;
            height: 160px;
        }
    </style>
    <script>
        window.onload = function () {
            /*
            鼠标事件
             */
            // document.getElementById("btn").οnclick=function(){
            // document.getElementById("btn").οndblclick=function(){
            // document.getElementById("btn").οnmοuseοver=function(){
            // document.getElementById("btn").οnmοusedοwn=function(){
            //      console.log(111);
            // };
            // document.getElementById("btn").οnmοuseοut=function(){
            // document.getElementById("btn").οnmοuseup=function(){
            // document.getElementById("btn").οnmοusemοve=function(){
            //      console.log(222);
            // };
            /*
            键盘事件
             */
            // document.getElementById("username").οnkeydοwn=function(){
            //      console.log(111);
            // };
            // document.getElementById("username").οnkeyup=function(){
            //      console.log(222);
            // };
            // document.getElementById("username").οnkeypress=function(event){
            //      console.log(222);
            //      console.log(event);
            // };
            /*
            表单事件
             */
            // document.getElementById("username").οnfοcus=function(){
            //      console.log(111);
            // document.getElementById("username").className="txtborder";
            // }
            // document.getElementById("username").οnblur=function(){
            //      console.log(222);
            // document.getElementById("username").className="";
            // };
            document.getElementById("username").onselect=function(){
                console.log(222);
                // document.getElementById("username").className="";
            };
            // document.getElementById("head").οnchange=function(event){
            //      console.log(222);
            //      console.log(event);
            // document.getElementById("img").src=window.URL.createObjectURL(this.files[0] );
            // };
            document.getElementById("frm").onsubmit=function(){
                console.log(111);
                // return false;//阻止表单提交
                return true;
            };
        }
    </script>
</head>
<body>
    <form action="" id="frm">
        <input type="button" value="点 我" id="btn"> <br>
        用户名：<input type="text" id="username" name="username"> <br>
        <img src="" id="img"> <br>
        头像：<input type="file" id="head" multiple> <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

test26

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: pink;
        }
        p{
            width: 100px;
            height: 100px;
            background:#ccc;
        }
    </style>
    <script>
        function f1(event){
            // console.log(event);
            // event.stopPropagation();//阻止事件冒泡，W3C标准方式
            // event.cancelBubble=true;
            // alert(111);
        }
        window.onload=function(){
            //绑定鼠标右键点击事件
            document.getElementById("btn").oncontextmenu=function(){
                event.preventDefault();//阻止默认行为
                this.style.color="red";
            };
            document.getElementById("mya").onclick=function (event){
                event.preventDefault();//阻止事件默认行为
                this.innerHTML="新浪";
            };
        };
    </script>
</head>
<body>
    <div onclick="alert(333)">
        <p onclick="alert(222)">
            <!--<input type="button" value="点我" onclick="alert(111)">-->
            <input type="button" value="点我" onclick="f1(event)" id="btn">
        </p>
    </div>

    <a href="https://www.baidu.com" id="mya" target="_blank">百度</a>
    <a href="#" id="mya" target="_blank">百度</a>
</body>
</html>

test27

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function getDegree(){
            var degree =document.getElementById("degree")
            // console.log(degree.length);
            // console.log(degree.selectedIndex);
            var opts = degree.options;
            // console.log(opts);

            // var opt = opts[degree.selectedIndex]
            // console.log(opt);

            // console.log(opt.text,opt.value);

            // opts[1].text="中专";
            // opts[1].value="zhongzhuan";
            //当修改了opts数组中的内容时，下拉列表中的值也会改变

            // console.log(opts[opts.length]);//由于是一个undefined所以会报错
            // opts[opts.length].text="博士";//报错，为什么?
            // opts[opts.length].value="boshi";
            //前面学过的方法
            // var option = document.createElement("option");
            // option.innerText="博士";
            // option.value="boshi";
            // degree.appendChild(option);

            //新知识1,更简单
            // opts[opts.length]=new Option("博士","boshi");//实际上还是操作数组

            //新知识2
            // var option=new Option("博士","boshi");
            // degree.add(option);

            var option = new Option("中专","zhongzhuan");
            degree.add(option,degree.getElementsByTagName("option")[1]);
        }
        window.onload=function(){
            document.getElementById("degree").onchange=function(){
                // console.log(111);
                // console.log(this.options[this.selectedIndex].value);
                console.log(this.value);
            };
        };
    </script>
</head>
<body>
    <input type="button" value="操作下拉列表" onclick="getDegree()">
    <hr>
    学历：
    <select id="degree">
        <option value="0">---请选择学历---</option>
        <option value="gaozhong">高中</option>
        <option value="dazhuan">大专</option>
        <option value="benke">本科</option>
        <option value="yanjiusheng">研究生</option>
    </select>
</body>
</html>

test28

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var provinces = [
            {
                id:1001,
                name:"山西省",
                cities:[
                    {
                        id:1,
                        name:"太原市"
                    },
                    {
                        id:2,
                        name:"大同市"
                    },
                    {
                        id:3,
                        name:"长治市"
                    },
                    {
                        id:4,
                        name:"忻州市"
                    },
                    {
                        id:5,
                        name:"吕梁市"
                    }
                    ]
            },
            {
                id:1002,
                name:"山东省",
                cities:[
                    {
                        id:1,
                        name:"济南市"
                    },
                    {
                        id:2,
                        name:"青岛市"
                    },
                    {
                        id:3,
                        name:"威海市"
                    },
                    {
                        id:4,
                        name:"烟台市"
                    },
                    {
                        id:5,
                        name:"德州市"
                    }
                ]
            },
            {
                id:1003,
                name:"广东省",
                cities:[
                    {
                        id:1,
                        name:"广州市"
                    },
                    {
                        id:2,
                        name:"东莞市"
                    },
                    {
                        id:3,
                        name:"青远市"
                    },
                    {
                        id:4,
                        name:"佛州市"
                    },
                    {
                        id:5,
                        name:"深圳市"
                    }
                ]
            },
            ];

        window.onload=function(){
            //初始化省份
            for(var i in provinces){
                var p =provinces[i];
                var option = new Option(p.name,p.id);
                document.getElementById("province").add(option);
            }
        };

        function change(){
            //清空城市数据
            document.getElementById("city").length=0;
            //获取选择的省份
            var pid = document.getElementById("province").value;
            if(pid==0){
                document.getElementById("city").add(new Option("--请选择城市--"));
                return ;
            }
            for (var i in provinces){
                var p = provinces[i];
                if (p.id == pid){
                    //添加城市
                    var cities = p.cities;
                    for (var j in cities){
                        var option = new Option(cities[j].name,cities[j].id);
                        document.getElementById("city").add(option);
                    }
                    return;
                }
            }
        }
    </script>
</head>
<body>
    <!--注意：name可以不用，因为不用提交-->
    省份：
    <select id="province" onchange="change()">
        <option value="0">--请选择省份--</option>
    </select>
    城市：
    <select id="city">
        <option value="0">--请选择城市--</option>
    </select>
</body>
</html>

test29

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // document.getElementById();//简写
        // window.document.getElementById();//完整写法
        // window.location
        // window.history
        /*
        window常用方法
         */
        //1. alert()
        // window.alert(111);//这个有点麻烦，不般不这么写
        // alert(111);

        //2.prompt()
        // var name = window.prompt("请输入用户名：","无名氏");
        // console.log(name);

        //3.confirm()
        // var flag = confirm("确定要删除吗？");
        // console.log(flag);

        //4.open()
        function f1(){
            open("test28.html","test28","width=500px,height=500px resizable=no");//感觉和超链接类似
        }

        //5.setTimeout()
        // function f2() {
        // // setTimeout(show,3000);//单位为毫秒
        // setTimeout(function(){
        // console.log("BOM......");
        // },3000);//单位为毫秒
        // }
        // function show() {
        // console.log(111);
        // }

        //6.setInterval()
        var timer_zq;
        function f3(){
            timer_zq = setInterval(function(){
                console.log("起床啦......")
            },1000)
        }

        //也可这样实现周期计时
        var timer;//定义全局变量
        function f2(){
            // setTimeout(show,2000);//单位为毫秒---- 一对
            // var timer = setTimeout(function(){//有问题? 局部变量
            timer = setTimeout(function(){
                console.log("BOM......");
            },3000);//单位为毫秒
        }
        function show(){
            console.log(111);
            // setTimeout(show,2000);//也可这样周期计时---- 一对
        }

        //7.clearTimeout()
        //讲f4时个改//也可以这样实现周期计时
        function f4(){
            clearTimeout(timer);
        }

        //8.clearInterval()
        function f5(){
            clearInterval(timer_zq);
        }

        /*
        window常用事件
         */
        // window.onload----很熟悉了
        window.onscroll=function(){
            console.log(111);
        };
        window.onclick=function(){
            console.log(222);
        };
        window.onload=function(){
            console.log(333);
        };
        window.onload=function(){
            console.log(444);
        };
        //一个对象可以绑定多个事件，一个事件不能绑定多次
    </script>
</head>
<body>
    <input type="button" value="打开一个新窗口" onclick="f1()"> <br>
    <input type="button" value="一次性计时器" onclick="f2()"> <br>
    <input type="button" value="周期性计时器" onclick="f3()"> <br>
    <input type="button" value="关闭一次性计时器" onclick="f4()"> <br>
    <input type="button" value="关闭周期性计时器" onclick="f5()"> <br>

    <p style="background: #ccc; height: 2000px;">hello world</p>
</body>
</html>

test30

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1(){
            // console.log(location.href);
            // location.href="https://www.baidu.com";
            location.reload();//和刷新的功能一样
        }
        function f2(){
            history.back()
        }
        function f3(){
            history.forward();
        }
    </script>
</head>
<body>
    <input type="button" value="操作location" onclick="f1()">
    <input type="button" value="后退" onclick="f2()">
    <input type="button" value="前进" onclick="f3()">
</body>
</html>

test31

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var r=0,l=0;//全局变量时可以继续上次的结果
        var timer;
        function doStart() {
            $("start").disabled=true;
            $("stop").disabled=false;
            // var r=0,l=0;//局部变量时每次重新开始
            timer = setInterval(function () {
                r++;
                if(r>9){
                    r =0;
                    l++;
                }
                if(l>9){
                    r=0;
                    l=0;
                }
                $("imgr").src='images/number/'+r+'.bmp';
                $("imgl").src='images/number/'+l+'.bmp';
            },100)
        }
        function doStop() {
            $("stop").disabled=true;
            $("start").disabled=false;
            clearInterval(timer);
        }
        function $(id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <!--table>(tr>td*2)*2-->
    <table>
        <tr>
            <td><img src="images/number/0.bmp" id="imgl"></td>
            <td><img src="images/number/0.bmp" id="imgr"></td>
        </tr>
        <tr>
            <td><input type="button" value="开始" id="start" onclick="doStart()"></td>
            <td><input type="button" value="停止" id="stop" onclick="doStop()" disabled></td>
        </tr>
    </table>
</body>
</html>

test32

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //方式1：定义正则表达式对象
        // var reg = /a/;//判断是否包含a
        // console.log(reg.test('hello'));

        // var reg = /a/;//判断是否包含a
        // var reg = /a/i;//判断是否包含a,i表示忽略大小写
        // console.log(reg.test('helalo'));

        //方式2：
        // var reg = new RegExp('a','i');
        // console.log(reg.test('helalo'));

        //规则验证：
        // var reg = /a\s/i; //是否包含空白字符
        // console.log(reg.test('hel alo'));//加空格或不加空格

        // var reg = /a\s\d/i;// \d是否包含数字
        // console.log(reg.test('hela 7lo'));

        // var reg = /a\s\d\w/i;// \w 匹配任何字符 数字、字母、下划线
        // console.log(reg.test('hela 7_lo'));// % 看行不行

        //量词
        // var reg = /a\s\d{3}\w/i;// \d{3}连续出现3个数字
        // console.log(reg.test('hela 777_lo'));// 7 或 777 7768

        // var reg = /a\s\d{3,}\w/i;// \d{3}连续出现3个数字
        // console.log(reg.test('hela 777w68_lo'));// 7 或 777 7768

        // var reg = /a\s\d{3,*}\w/i;// \d{3}连续出现3个数字
        // console.log(reg.test('hela 777w68_lo'));// 7 或 777 7768

        // var reg = /\d+/;
        // console.log(reg.test("hello"));
        // var reg = /\d?/;//?表示数字可以有也可以没有
        // console.log(reg.test("h222ello")); //2 222

        //特殊符号
        // var reg = /a/;//是否包含a 以a开头或以a结尾
        // console.log(reg.test("helloa"));// heallo ahello helloa

        // var reg = /a$/;//以a结尾
        // console.log(reg.test("helloa"));

        // var reg = /\da$/;//以a结尾,且a的前面是个数字
        // console.log(reg.test("helloa")); //helloa hello7a

        // var reg = /^a$/;//以a开头，且以a结尾
        // console.log(reg.test("a7a"));// a7a不行 a可以

        // var reg = /^a\da$/;//以a开头，且以a结尾,中间有一个数字
        // console.log(reg.test("a7a"));// a7a可以 a77a不可以

        // var reg = /^a\d+a$/;//以a开头，且以a结尾,中间有一个数字,+表示数字可以出现多次
        // console.log(reg.test("a7a"));// a7a可以 a77a可以

        // var reg = /^a\d*a$/;//以a开头，且以a结尾,中间有一个数字,*表示数字可以没有，也可以有多次
        // console.log(reg.test("a7a"));// a7a可以 a77a可以

        // var reg = /^a\d?a$/;//以a开头，且以a结尾,中间有一个数字,?表示数字可以出现1次，也可以没有
        // console.log(reg.test("a7a"));// a7a可以 a77a可以

        // var reg = /^a\d?a[\dabc]$/;//[\dabc]表示从数字、a、b、c中选一个
        // console.log(reg.test("a7abc"));// a7ab a7abc

        // var reg = /^a\d?a[\dabc]{2}$/;//[\dabc]表示从数字、a、b、c中选两个
        // console.log(reg.test("a7abc"));// a7ab a7abc

        var reg = /^a\d?a[\dabc]{2}(\da){3}$/;//(\da){3}表示8a,9a,6a可以连续出3次
        console.log(reg.test("a5a2b8a9a6a"));

        var reg = /^a|b+$/;//b至少出现一次
        console.log(reg.test("a"));//a aaa aabb

        var reg = /^[^abc]{2}$/;//只要不是a,b,c就行
        console.log(reg.test("xa"));//xy xa
    </script>
</head>
<body>

</body>
</html>

test33

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table tr td:first-child{
            text-align: right;
        }
        .error{
            font-size: 12px;
            color:red;
        }
        .ok{
            color: green;
        }
    </style>
    <script>
        function checkUsername() {
            //用户名只能由数字、字母、下划线、横线、中文组成,且只能以数字或字母开头和结尾,长度为6-14位
            var username = $("username").value;
            var reg = /^[\da-z][\u4E00-\u9FA5\w-]{4,12}[\da-z]$/i;
            if(!reg.test(username)){
                $("usernameInfo").innerText="用户名只能由数字、字母、下划线、横线、中文组成";
                $("usernameInfo").className="error";
                return false;
            }else{
                $("usernameInfo").innerText="OK!";
                $("usernameInfo").className="ok";
                return true;
            }
        }
        function checkPassword() {
            //密码只能由数字、字母组成，长度为6-10位
            var password = $("password").value;
            var reg = /^[\da-z]{6,10}$/;
            if(!reg.test(password)){
                $("passwordInfo").innerText="密码只能由数字、字母组成，长度为6-10位";
                $("passwordInfo").className="error";
                return false;
            }else{
                $("passwordInfo").innerText="OK!";
                $("passwordInfo").className="ok";
                return true;
            }
        }
        function checkRepassword() {
            //两次输入的密码必须相同
            var password = $("password").value;
            var repassword = $("repassword").value;
            if(repassword != password){
                $("repasswordInfo").innerText="两次输入的密码必须相同";
                $("repasswordInfo").className="error";
                return false;
            }else{
                $("repasswordInfo").innerText="OK!";
                $("repasswordInfo").className="ok";
                return true;
            }
        }
        function checkInput() {
            console.log(111);
            return checkUsername()&&checkPassword()&&checkRepassword();
        }
        function checkBirthday() {
            var reg = /^\d{4}-\d{1,2}-\d{1,2}$/;
            //实际开发中一般要用日期插件
        }
        function checkPhone() {
            var reg = /^1\d{10}$/;
        }
        function checkEmail() {
            //tom@sina.com.cn tom@baidu.com
            var reg = /^\w+@\w+(\.[a-z]{2,3}){1,2}$/;// + 表示至少有1个字符点号不能直接写要转义\.

            //身份证
            var reg = /[1-9]\d{14}(\d{2}[\dx])?/i;//?表示可有可无 身份证有 15位和18位2种
        }
        function $(id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <h2>用户注册</h2>
    <form action="success.html" onsubmit="return checkInput()">
        <!--table>(tr>td*2)*6-->
        <table>
            <tr>
                <td>用户名：</td>
                <td>
                    <input type="text" name="username" id="username" placeholder="请输入用户名" onblur="checkUsername()">
                    <span id="usernameInfo"></span>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" name="password" id="password" placeholder="请输入密码" onblur="checkPassword()">
                    <span id="passwordInfo"></span>
                </td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td>
                    <input type="password" name="repassword" id="repassword" placeholder="请再次输入密码" onblur="checkRepassword()">
                    <span id="repasswordInfo"></span>
                </td>
            </tr>
            <tr>
                <td>出生日期：</td>
                <td>
                    <input type="text" name="birthday" id="birthday" placeholder="请输入出生日期" onblur="checkBirthday()">
                    <span id="birthdayInfo"></span>
                </td>
            </tr>
            <tr>
                <td>手机号：</td>
                <td>
                    <input type="text" name="phone" id="phone" placeholder="请输入手机号" onblur="checkPhone">
                    <span id="phoneInfo"></span>
                </td>
            </tr>
            </tr>
            <td>邮箱：</td>
            <td>
                <input type="text" name="mail" id="mail" placeholder="请输入邮箱">
            </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: left">
                    <input type="submit" value="注 册">
                    <input type="reset" value="重 置">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

success

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

hello.js

alert("哈哈");