Js案例

最新推荐文章于 2020-12-23 20:50:03 发布

Ao622

最新推荐文章于 2020-12-23 20:50:03 发布

阅读量440

点赞数

文章标签： js

本文链接：https://blog.csdn.net/ho622/article/details/107015876

版权

<!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.外部方式-->
    <script type="text/javascript" src="js/hello.js"></script>
</head>
<body>
    第一个JavaScript程序
    <hr>
    <!--2.行内方式-->
    <input type="button" value="点我" onclick=alert("我被点,晕了")>
    <!--<a href="" onclick="alert"('超链接被触发')>超链接</a>-->
    <a href="javascript:alert('超链接被触发')">超链接</a>

    <div onmousemove="alert('走开')">把鼠标移上来</div>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lcQTyG7x-1593399355585)(.\images\案例1.png)]$

test02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //变量
        var name;     //定义了-变量name
        name = "tom";  //将字符常量透明赋值给变量name
        // alert(name);

        var age=18;//定义一个变量age，并将整数18常量赋值给age
                   //age整型变量 age中存放的是整数，age是整型变量
        // alert(age);

        var sex ="male";//不建议使用
        // alert(sex);

        {
            // var x=8;
            // alert(x)
            let y = 7;
            // alert(y);
        }
        // alert(x);
        //  姓名="tom";
        //  alert(姓名);
        age = 18;
        Age = 19;
        alert(Age);
    </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q5XJop5B-1593399355586)(.\images\案例2.png)]$

test03.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 输出信息
        // alert("嘿嘿")
        // console.log("哈哈哈")
        // document.write("嘻嘻")
        // 输入
        //var name=prompt("请输入你的名字")
        //console.log(name)
        // var age=prompt("输入你的年龄:")
        // console.log(age typeof age)
        // age =Number(age)
        // console.log(age typeof age)
        //转义字符
        console.log("he\'llo world")//\n表示换行
        //注释
        //这是一个单行注释
        /*
        多行注释
        */
    </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uQ68cMqR-1593399355588)(.\images\案例3.png)]$

test04.html

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

        */
        var name = "tom";
        var age = "18";
        var height = "180";
        var flag = true;

        var hobby=null;

        var date=new Date();

        var arr=new Array();

        var sex;//定义了一个变量，但是没有赋值

        // 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(a, typeof a);
        // //方式一：使用Number()
        // a=Number(a);
        // console.log(a, typeof a);
        // a=Number('12.5');
        // a=Number('12abc')
        // a=Number('ab12c')

        // 方式二：parseint
        // a=parseInt('12');
        // a=parseInt('12.5'); //转换时会去掉小数部分
        // a=parseInt('12abc'); //按照字符的顺序依次解析
        // a=parseInt('abc12')

        // 方式三：parseFloat()
        // a=parseFloat('12');
        // a=parseFloat('12.5');
        // a=parseFloat('12abc');
        // a=parseFloat('abc12');

        //将数值转换为字符串
        // var a=12;
        // console.log(a, typeof a);
        // a=a+''; //后接一个空字符串
        // console.log(a, typeof a);

        //将布尔类型的值转换为数字
        // var a;
        // a= Number(false); //在js中true用1或非0表示，false用0表示

        //转换为布尔
        // 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
        name='tom'
        if(name){
            console.log(name)
        }
        // console.log(a, typeof a);
    </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m1MmhbCO-1593399355589)(.\images\案例4.png)]$

test05.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        算术运算符：+、-、*、/、%求余、**乘方、++、--

        比较运算符：>、>=、<、<=、==、===、!=

        赋值运算符：=、+=、-=、*=、/=、%=

        逻辑运算：&&并且、||或者、！非

        条件运算符：条件？表达式1：表达式2

         */
        //1.算术运算符
        //+、-、*、/、%求余、**乘方、++、--
       // var a = 5;
       // var b = 3;
       // var c = '0';
       // 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);//当变量c为数字字符时，会自动将数字字符转换位数值
       // console.log(a+d);
       // var a = 1;
       // console.log(a++);//先使用a的中的值，在让a自加，在原值的基础上加1，表达式返回变化前a的值，然后自加a=a
       // +1
        //console.log(a);
        //console.log(++a);//a先自加减，在返回值
        //console.log(a);//自加自减表达式执行完a的值是多少
        // 2.比较运算符
       // var a = 1;
        //var b = true;
       // console.log(a>b);
        //console.log(a<b);
        //console.log(a>=b);
        //console.log(a<=b);//返回值是Boolean，ture、false
       // console.log(a==b);//判断a和b的值是否相等   只是判断内容是否相等
        //console.log(a===b);//全等于  纪要判断内容，也要判断数据类型
        //console.log(a+b);
        //console.log(a===b);//在js中true表示为1，false表示为0
        //3.赋值运算符
        //var a = 8;
        //a +=2;//a = a + 2
        //a -=2;//a = a - 2
        //console.log(a);
        //4.逻辑运算符
        //var x = true;
        //var y = false;
        //console.log(x && y);// 并且运算   一假必假 两边为真才为真，一边为假就是假
        //console.log(x || y);//或运算      一真必真 两边为假才为假，一边为真就是真
        //逻辑运算短路问题
         a= 0;
         b = 5;
         //console.log(a && b);//0--false
         //console.log(a || b);

         //5.条件运算符
        console.log(a>b?a+b:a-b);//返回值：结果为真返回1，假2
    </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pXPkC7G4-1593399355589)(.\images\案例5.png)]$

test06.html

<!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(123.456));//在js中不可以指定四舍五入到第几位
        //4.向上取整，向下取整
        console.log(Math.ceil(3.5));//取大于等于3.5的最小整数
        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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FeGPl8TR-1593399355591)(.\images\案例6.png)]$

test07.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var age=25;
        if(age>=60)
        {
            console.log('老年');
        }
        else if(age>=30)
        {
            console.log('中年');
        }
        else if(age>=16)
        {
            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('j今天不吃了');
                break
        }
    </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3UlAllkU-1593399355591)(.\images\案例7.png)]$

test08.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //while
        var i = 1 ;
        var sum = 0;
        while(i<=100)
        {
            sum+=i;
            i++;
        }
        console.log(sum);
        //do...while
        var i = 1;
        var sum = 0;
        do
        {
            sum+=i;
            i++;
        }while(i<101);
        console.log(sum);
        //for
        var sum = 0;
        for(var i = 1;i<=100;i++)
            if(i%7!=0)
                sum+=i;
        console.log(sum);
        //for..in
        var str='welcome';//可以将字符串看作是由多个字符组成的集合
        for(var index in str)
        {
            console.log(index);//输出str的索引
            console.log(str[index]);

        }
       // s='abc';
       // document.write(s[0]);
       // document.write(s[1]);
       // document.write(s[2]);
        //break continue
        for(var i= 1;i<=10; i++)
        {
            if (i % 2 == 0)
                continue;
            console.log(i);
        }
    </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xkRwjSHN-1593399355592)(.\images\案例8.png)]$

test09.html数组的使用

<!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[0]);
       // console.log(arr[1]);

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

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

        //将1-100之间所有能被三整除的数字，放到数组number中，输出这个数组，并统计个数
        // var arr=[];    //声明一个空数组
        // for(var i=1;i<=100;i++){
        //     if(i%3==0){    //找出能被3整除的数字
        //         arr[arr.length]=i;  //通过数组的下标添加元素
        //     }
        // }
        // console.log(arr);

        // var nums =[];
        // var index = 0;
        // for(var i =1; i<=100;i++)
        //     if(i%3==0)
        //         nums[nums.length] = i;
        // //每当向数组中添加元素时，length属性值都会改变
        // console.log(nums);

        // var arr =['tom','jack','nick','lice'];
        // console.log(arr);//未排序
        // arr.sort();
        // console.log(arr);//按编码排序后结果

        var arr =['tom','jack','nick','lice','jack'];
        console.log(arr);
        // arr.join();
        // console.log(arr.join('-'));
        console.log(arr.indexOf('jack'));
        console.log(arr.lastIndexOf('jack'));
        console.log(arr.slice(1,4));
        console.log(arr.toString());

    </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LFrjabul-1593399355592)(.\images\案例9.png)]$

test10.html数组的常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // var arr = 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,25,23,36],
            [2,3,52,63,5],
            [23,6,89,5,52]
        ]
        // console.log(arr[0][1]);
        //遍历元素
        for(var i =0;i<arr.length;i++)
        {
            //循环输出每行的四个元素
            for(var j=0;j<arr[i].length;j++)
                document.write(arr[i][j]+'&nbsp;&nbsp');
            // 输出每行的换行
            document.write('<br>')
        }
    </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KaAYrSVq-1593399355592)(.\images\案例10.png)]$

test11.html 自定义函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        自定义函数
       */
        //1.自定义函数
        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);
        //3.变量的作用域
        //var c =6;
        // function fn()
        // {
        //     var a = 5;//局部变量
        //     console.log(a);
        //     console.log(c);
        // }//定义函数
        // fn();//调用函数
        function 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(x);
        //console.log(a);
        console.log(c);
    </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1r4fbtZ9-1593399355594)(.\images\案例11.png)]$

test12.html 回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1()
        {
            console.log('111');
        }
        // f1();//立即执行
        // 当单击窗口时就执行f1
        // window.οnclick=f1();//常规做法,在console窗口显示，有问题，加小括号 立即就执行了
        // window.οnclick=f1;//回调执行，即回头调用此函数，不能加括号

        /*  函数本身也是一种数据类型
            数据类型：string、number、boolean、null、undefined、object、 function
         */
         // console.log(typeof f1);//这是一个function
        // var a = f1;
        // console.log(typeof a);

        //将一个函数f1作为另一个函数f2的参数
        function f2(x,y)
        {
            // console.log(x);
            // console.log(y);
            // 上述功能打印输出f1函数
            y();// 这样就可以调用f1了
           }
        // f2(5,f1);//f1是一个函数，作为实参 f1没有执行，只是打印输出

        /*   示例 */
        var arr = [12,4,23,6,26,86];
        /*
            定义一个比较器
            升序：如果第一个参数比第二个参数大，则返回正数
                  如果第一个参数比第二个参数小，则返回负数
                  如果两个参数相等，则返回0
       */

        function compareFn(a,b)
        {
            return a-b;
            //降序 b-a
            // if(a>b)
            //     return 1;
            // else if(a<b)
            //     return -1;
            // else
            //     return 0;
        }

        arr.sort(compareFn);//将自定义比较规则函数作为函数参数传入
        console.log(arr);
        function show(value,index)
        {
            console.log(index,value);
        }
        arr.forEach(show);//这也是数组本身提供的一个方法
    </script>
</head>
<body>

</body>
</html>

test13.html 匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        1.一般用于回调
         */
        // function show(){
        //     console.log('111');
        // }
        // window.oncllick=show;
        window,onclick = function(){
            console.log('111');
        }
        function f1(){
            console.log(222);
        }
        //var a =f1;
        var a = function(){
            console.log(222);
        };
        var arr =[12,21,32,253]
        function show(value,index){
            console.log(index,value);
        }
        arr.forEach(show);
        //2.自执函数
        // function fn(){
        //     console.log(333);
        // }
        // fn();
        (function (){
            console.log(333);
        })()

    </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jpRbWsnu-1593399355595)(.\images\案例13.png)]$

test14.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        箭头函数语法：
        参数=>返回值
         */
        // var a = function (x){
        //     return x*2;
        // }
        // console.log(a(3));
        //var a = x=> x*2;//优点语法简洁
        //console.log(a(3));
        //示例2  如果箭头函数没有参数或者有两个以上的参数，则必须使用用小括号表示参数部分
        // var a = function (x,y){  //funnction();
        //     return 5;
        // }
        //var a = => 5;//var a = () =>5;
        //console.log(a();

        //示例3
        //var a = function (x,y){
           // var sum = x+y;
           // return sum;
            //return x+y;
       // }
       //  var a =(x,y) =>{
       //      var sum = x+y;
       //      return sum;
       //  }
        // var a = function (x){
        //     console.log(x);
        // };
        //var a = x => console.log(x);
        //a(5);
        //console.log(a(5));

        //应用场景
        var arr = [12,22,32,33,22];
        arr.forEach((value,index)=>{
            console.log(index,value*2)
        });
        window.onclick=()=>{
            console.log(111);
        }
    </script>
</head>
<body>

</body>
</html>

test15.html string字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var str = '   welcome to js hello world   ';

        // 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.toUpperCase());
        // console.log(str.toLowerCase());
        //
        // console.log(str.substring(1,4));
        // console.log(str.substring(1));//从1 开始取到末尾


        //str = str.replace('js','javascript');
        console.log(str);
        console.log(str.length);
        str = str.trim();
        console.log(str.trim());
        //console.log(str.replace('js','javascript'));
        //console.log(str.split(' '));
        //console.log(str.split(' ',3));
        console.log(str.length);
        //console.log(str.length);
        //var str = new String('welcome to js');
        //console.log(typeof str);
       // console.log(str.length);
    </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-enX4F7Jd-1593399355595)(.\images\案例15.png)]$

test16.html date日期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var date = new Date();
       // var date = new Date(2020,5,16,9,07,53);//月份取值【0-11】
       // var date = new Date(123556);


        // console.log(typeof date);
        // console.log(date);

        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var d = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();

        let millseconds = date.getMilliseconds();
        console.log(millseconds);
        let day = date.getDay();
        //et time = date.getTime();


        var weekday = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
        var currentime = checkdDate(year) + '年' + checkdDate(month) + '月' + checkdDate(d) + '日,' + checkdDate(hour) + ':' +  checkdDate(minute) + ':' + checkdDate(second) + ',' +weekday[day];
        console.log(currentime);

        function checkdDate(num) {
            if(num<10)
                return '0'+num;
            else
                return num;
        }
        //console.log(time);
       // console.log(day);
        //console.log(year,month,d);
    </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wEcXcIPy-1593399355596)(.\images\案例16.png)]$

test17.html JSON

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义一个JSON对象
        var user = {
            "id":1001,
            "name":'tom',
            "age":20,
            "height":150.5,
            "address":{
               "province":"山西省",
               "city":"太原市",
               "district":"迎泽区",
            },
            "insmarried":true
        };
        //访问方式：对象名，属性名
        // console.log(user.name);
        // console.log(user.height);
        // console.log(user.address);
        // console.log(user.address.city);

        //JSON 对象的数组
        var user = [
            {
                "id":9527,
                "name":"tom",
                "password":"123",
                "status":1
            },
            {
                "id":9527,
                "name":"tom",
                "password":"111",
                "status":1
            },
            {
                "id":9527,
                "name":"tom",
                "password":"222",
                "status":0
            },
            {"id":9527,
                "name":"tom",
                "password":"33",
                "status":1
            },
        ];
        // for(var i = 0;i <users.length;i++)
        // {
        //     var u =user[i];
        //    // console.log(u.name);
        // }
       // console.log(typeof user);
        //console.log(user);
        //2.字符串转换为JSON对象
        var str ='{"name":"tom","age":20,"sex":"男"}';
        var obj = JSON.parse(str);
       // console.log(typeof str);
       // console.log(str);
       // console.log(typeof obj);
       // console.log(str);

        var users = '[{"id":1,"username":"tom","passwprd":"123"},{"id":2,"username":"tack","passwprd":"567"}]'
        console.log(typeof users);
        var objs = JSON.parse(users);
        console.log(objs);

    </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ZMdetwb-1593399355596)(.\images\案例17.png)]$

test18.html 对象类型

<!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 = 20;
        stu.height = 180.5;
        //添加方法
        stu.study = function(){
            console.log('我叫'+stu.name+ '正在学习....');
        };
        stu.run = function(){
            console.log(stu.name + '正在参加马拉松....');
        };
        //调用属性
        //console.log(stu.name,stu['age']);
        //stu.study();
        //stu.run();

        /*
        使用构造函数的方法
         */
       // var date = new Date(2020.5.20);
        //console.log(date,typeof date);
        function Student(name,age,sex){
            //console.log(name,age,sex);
            //属性
            this.username = name;
        this.age = age;
        this.sex= sex;
        //方法
        this.show = function(){
            console.log(this.username+'正在学习...');
        };
        this.study = function(){
            console.log("正在学习");
        };
        }
        // Student('tom',20,'male');//调用函数
        // var student = new Student('tom',20,'male');
        // console.log(student.username,student.age,student.sex);
        // student.show();
        // student.study();
        /*
        使用JSON对象
         */
        var student = {
            name:"admin",
            age:18,
            sex:"male",
            study:function(){
                console.log(student.name + "正在学习....");
            }
        };
        console.log(student.name,student['age']);
        student.study();
    </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IadwaDu6-1593399355597)(.\images\案例18.png)]$

test19.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMl DOM</title>
    <script>
        function query(){
           // console.log(111);
            /*
            1.根据id属性值来获取，返回单个值
             */
            // var obj = document.getElementById("mydiv");
            // console.log(typeof obj);
            // console.log(obj);
            /*
            2.根据name获取，返回集合，即数组
             */
            // var obj = document.getElementsByName("hobby");
            // console.log(typeof obj);
            // console.log(obj);
            // for(var i in objs)
            //     console.log(objs [i]);
            /*
            3.根据标签名获取，返回集合
             */
            // var objs = document.getElementsByTagName("input");
            // for(var i in objs)
            //     console.log(objs[i]);
            /*
            4.根据CSS的选择器来获取单个对象
             */
            //var obj = document.querySelector("#div2");
            //var obj = document.querySelector(".aaa");
            // var obj = document.querySelector("p.aaa");
            // console.log(typeof obj);
            // console.log(obj);
            /*
            5.根据CSS选择器获取多个对象
             */
            var objs = document.querySelectorAll(".aaa");
            console.log(typeof objs);
            console.log(objs);
            /*
            根据已有节点获取其他节点
             */
            var obj = document.getElementById("second");
            // console.log(obj);
            // console.log(obj.parentNode);
           // console.log(obj.previousSibling);
           //  console.log(obj.nextSibling);
           //  console.log(obj.previousSibling.previousSibling);
            console.log(obj.parentNode.firstChild);
            console.log(obj.parentNode.lastChild);

        }
    </script>
</head>
<body>
    <input type="button" value="获取页面中的元素" onclick="query()">
    <div id="mydiv" class="aaa">hello</div>
    <!--<div id="mydiv">word</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>
       <li>tom</li>
       <li id="second">jack</li>
       <li>alice</li>
       <li>mike</li>
   </ul>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGA3pycg-1593399355598)(.\images\案例19.png)]$

test20.html

![案例20](C:\Users\haocaiyun\Desktop\js\images\案例20.png)![案例20](C:\Users\haocaiyun\Desktop\js\images\案例20.png)<!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:blod;
        }
    </style>
    <script>
       // function getProperty(){
            //获取属性的值
        //     let obj = document.getElementById("baidu");
        //     console.log(typeof obj,obj);
        //     console.log(obj.href);
        //     console.log(obj.target);

            //let obj = document.getElementById("username");
            //console.log(obj.check);//返回值是true或者false

            //设置属性的值
            // var obj = document.getElementById("baidu");
            // obj.href-"http://www.sxgjpx.net";
            // obj.target="_self";

           // let obj = document.getElementById("female");
           // obj.checked=true;

            function getContent() {
                var obj= document.getElementById("mydiv");
                //获取内容
                //console.log(obj.innerHTML);
                //console.log(obj.innerText);

                //设置内容
                obj.innerHTML = "<h2>你好世界</h2>";
                //obj.innerText = "<h2>世界你好</h2>"
            }
            function getStyle() {
                let obj = document.getElementById("mydiv");
                console.log(obj.style);

                //获取CSS样式属性
                // console.log(obj.style.width);
                // console.log(obj.style.height);
                // console.log(obj.style.fontSize);
                //console.log(obj.style.borderTopRightRadius);
                //设置CSS样式
                //     obj.style.width="300px";
                //     obj.style.height="300px";
                //     obj.style.background="blue";
                //     obj.style.fontSize="20px";

                //设置类选择器
                obj.className="hello";
                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>
    <br>
    <!--<a href="https://www.baidu.com" target="_blank" id="baidu">百度</a>-->
    <a href="https://www.baidu.com" target="_blank" id="baidu">点我</a>
    用户名：<input type="text" name="username" id="username" >
    性别：<input type="radio" name="sex" value="male" id="male">男
          <input type="radio" name="sex" value="male" id="female" >女

    <hr>
    <div id="mydiv">
        <p>
            hello world
        </p>

    </div>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AlInFSi1-1593399355598)(.\images\案例20.png)]$

test21.html

![案例21](C:\Users\haocaiyun\Desktop\js\images\案例21.png)![案例21](C:\Users\haocaiyun\Desktop\js\images\案例21.png)![案例21](C:\Users\haocaiyun\Desktop\js\images\案例21.png)<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #logo{
            width: 100px;
            height: 50px;
        }
    </style>
    <script>
        function change(){
            if($("biadu").checked){
                $("logo").src="biadu.png";
                $("txtSearch").name="wd";
                $("frmSearch").action="https://www.baidu.com/s";
                $("btnSearch").value="百度搜索";
            }else if($("sogou").checked){
                $("logo").src="sogou.png";
                $("txtSearch").name="query";
                $("frmSearch").action="https://www.sogou.com/web";
                $("btnSearch").value="搜狗搜索";
            }else{
                $('logo').src="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="biadu" 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="baidu.png" id="logo">
        <input type="text" name="wd" id="txtSearch" placeholder="请输入查询关键字">
        <input type="submit" id="btnSearch" value="百度搜索">
    </form>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-74nrWf7W-1593399355599)(.\images\案例21.png)]$

test22.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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();
            //ul.removeChild(document.getElementById("first"));

            ul.removeChild(ul.lastChild);
        }
    </script>
    <title>Title</title>
</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>milk</li>
    </ul>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YUbCzGQx-1593399355600)(.\images\案例22.png)]$

test23.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1(){
            console.log(111);
            // var btn2 = document.getElementById("btn2");
            // console.log(btn2);

        }
        //当页面加载完成后 执行
        window.onload=function (){
            // var btn2 = document.getElementById("btn2");//由于代码执行到此时，该部分diamante先执行，而后面按钮2没有加载执行后面阿牛
            // console.log(btn2);
            // btn2.οnclick=function (ev){
            //     console.log(222);
            // };
            // document.getElementById("btn2").οnclick=function (){
            //     console.log(222);
            // };
            //document.getElementById("btn2").οnclick=f1;//提示回调时不加括号

            document.getElementById("btn2").onclick=function(){
                console.log(222);
                console.log(event);
                console.log(this);//this表示事件源
                console.log(event.srcElement);
            };
            //为复选框绑定事件
            var hobbies = document.getElementsByName("hobby");
            console.log(hobbies);
            for(var i =0;i <hobbies.length;i++)
            {
                hobbies[i].onclick=function(){
                    //console.log(hobbies[i].value);
                    console.log(this.value);
                };
            }
        };


    </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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QsDw2yY8-1593399355600)(.\images\案例23.png)]$

test24.html

<!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;
            text-align: center;
        }
        #mytable tfoot td{
            text-align: right;
        }
        #myform{
            line-height: 30px;
        }
        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("tr");
                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").check=true;
                    }
                    else{
                        $("all").check=false;
                    }
                };

                tdName.innerText = $("name").value;
                tdAge.innerText = $("age").value;
                tdSex.innerText = $("f").checked ? $("f").value : $("m").value;
                tdPhone.innerText = $("phone").value;

                //创建一个input
                var btnDelete = document.createElement("input");
                btnDelete.type = "button";
                btnDelete.value = "删除";
                btnDelete.onclick = function () {
                    this.parentElement.parentNode.remove();
                };//这是添加的按钮可以具备删除行的功能

                tdDelete.appendChild(btnDelete);
                // console.log(tdName.innerText);
                // 将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.parentElement.parentNode.remove();
                };
            }
            ;
            $("btnDeleteFirst").onclick = function () {
                $("tb").getElementsByTagName("tr")[0].remove();
                //在tbody中找tr
            };
            $("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").check=true;
                    }
                    else{
                        $("all").check=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 id="container">
    <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>男</td>
                <td>120</td>
                <td><input type="button" value="删除" class="delete"></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="chk"></td>
                <td>alice</td>
                <td>20</td>
                <td>女</td>
                <td>131</td>
                <td><input type="button" value="删除" class="delete"></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="chk"></td>
                <td>yunduo</td>
                <td>20</td>
                <td>女</td>
                <td>152</td>
                <td><input type="button" value="删除" class="delete"></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="chk"></td>
                <td>jack</td>
                <td>20</td>
                <td>女</td>
                <td>139</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" value="男" id="m">男
        <input type="radio" name="sex" value="女" id="f" checked>女 <br>
        电话：<input type="text" id="phone"><br>
        <hr>
        <input type="button" value="添加" id="btnAdd">
        <input type="reset" value="重 置">
    </form>
</div>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YO519Ydl-1593399355600)(.\images\案例24.png)]$

test25.html

<!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").ondbclick=function(){
        //    document.getElementById("btn").οnmοusedοwn=function(){
        //      console.log(111);
        //    };
        //     document.getElementById("btn").οnmοuseup=function(){
        //         console.log(222);
        //     };
            //键盘事件
            document.getElementById("username").onkeydown=function(){
                console.log(111);
            };
            // document.getElementById("username").οnkeyup=function(){
            // document.getElementById("username").οnkeyup=function(event){
            //     console.log(222);
            //     console.log(event);
            // };
            // //表单事件
            // document.getElementById("username").οnfοcus=function(){
            //     console.log(222);
            //     this.className="textborder";
            // };
            document.getElementById("head").onchange=function(){
            //    console.log(111);
               document.getElementById("img").src=window.URL.createObjectURL(this.files[0]);
             };
            // document.getElementById("username").οnselect=function(){
            //     console.log(222);
            // };
            document.getElementById("frm").onsubmit=function(){
                //console.log(111);
                return true;//允许提交
               // return false;//禁止提交
            };

        };
    </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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-knjb6JhF-1593399355601)(.\images\案例25.png)]$

test26.html

<!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:yellow ;
        }
    </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.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()" id="btn">
        </p>
    </div>
    <a href="https://www.baidu.com" target="_blank" id="mya">百度</a>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KfKUYoWJ-1593399355602)(.\images\案例26.png)]$

test27.html

<!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);
            //console.log(degree.value);

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

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

            //修改opts数组中的内容
           //var opt = opts[degree.selectdIndex];
            //console.log(opt.text,opt.value);

            // opts[1].text="中专";
            // opts[1].value="zhongzhuan";

            //向下拉列表中追加一条信息
            // console.log(opts[opts.length]);
            // opts[opts.length].text="博士";
            // opts[opts.length].value="boshi";

            // var option = document.createElement("option");
            // option.innerText="博士";
            // option.value="boshi";
            // degree.appendChild(option);

            //opts[opts.length]=new Option("博士","boshi");//实际上还是操作 数组

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

            //在大专前面增加中专
            var option = new Option("中专","zhongzhuan");
            degree.add(option,degree.getElementsByTagName("option")[2]);
        };
        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 name="" 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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iTrdLCX1-1593399355603)(.\images\案例27.png)]$

test28.html

<!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:"德州市"
                    }
                ]
            }
        ];
        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>
    省份：
    <select id="province" onchange="change()">
        <option value="0">--请选择省份--</option>
    </select>
    城市：
    <select id="city">
        <option value="0">--请选择城市--</option>
    </select>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N8uOE8mt-1593399355604)(.\images\案例28.png)]$

test29.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // document.getElementById()
        // wondow.history
        // window.location
        /*
           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:200px,height:200px,resizable=no");
        }
        var timer_one;
        var timer_zq;
        function f2(){
            timer_one = setTimeout(function(){
                console.log(111);
            },3000);//单位毫秒
        }
        // function show(){
        //     console.log(111);
        // }
        //6.setInterval()
        function f3(){
           timer_zq =  setInterval(function(){
                console.log("起床了。。。。");
            },1000)
        }
        //周期性计时器使用一次性计时器能否实现
        // function f2(){
        //     setTimeout(show,1000);
        //     }
        // function show(){
        //     console.log(111);
        //     setTimeout(show,1000);
        // }
        //7.clearTimeout()
        function f4(){
            clearTimeout(timer_one);
        }
        //8.clearInterval()
        function f5(){
            clearInterval(timer_zq);
        }
        //window常用事件
        //window.onload
        window.onscroll=function(){
            console.log(222);
        };
        window.onclick = function(){
            console.log(333);
        };
        window.onload = function(){
            console.log(444);
        };
        //一个对象可以绑定多个事件，但是一个事件不能被绑定多次
        window.onload=function(){
            console.log(555);
        };

    </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>
    <hr>
    <p style="background:#ccc; height:2000px; ">
        hello world!
    </p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Los4NdQL-1593399355605)(.\images\案例29.png)]$

test30.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1(){
            //console.log(location.href);//获取location的href属性
            location.href="http://www.baidu.com ";
            //location.reload();

            function f2(){
                history.back();
            }
            function f3(){
                history.forward();
            }
        }
    </script>
</head>
<body>
    <input type="button" value="操作location" onclick="f1()"><br>
    <input type="button" value="后退" onclick="f2()"><br>
    <input type="button" value="前进" onclick="f3()"><br>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JDZE78v8-1593399355605)(.\images\案例30.png)]$

test31.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var timer;
        var l=0,r=0;
        function doStart() {
            $("start").disabled=true;
            $("stop").disabled=false;
            timer = setInterval(function(){
                r++;
                if(r>9){
                    r=0;
                    l++;
                }
                if(l>9){
                    r=0;
                    l=0;
                }
                $("imgr").src="number/"+r+".bmp";
                $("imgl").src="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><img src="number/0.bmp" id="imgl"></td>
            <td><img src="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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yiSyNcrM-1593399355607)(.\images\案例31.png)]$

test32.html

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

        //方式2：定义正则表达式对象
        // var reg = new RegExp('a','i');
        // console.log(reg.test('helloA'));

        //规则验证：
        // var reg = /a\s/;//a字符后是否包含空白
        // console.log(reg.test('hea  llo'))

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

        // var reg = /a\s\d\w/i;//匹配任何字符、数字、字母、下划线
        // console.log(reg.test('hea 888llo'))

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

        // var reg =/a\s\d{3,*}\w/i;
        // console.log(reg.test('hela 77a68_lo'));
        // var reg = /\d?/i;
        // console.log(reg.test('helalo'));

        //特殊符号
        // var reg = /a/;
        // console.log(reg.test('helalo'));

        // var reg = /a^/;//是否以a开头  a结尾
        // var reg = /a$/;
        // console.log(reg.test('helloa'));

        // var reg = /\da$/;//以a结尾，且a的前面是数字
        // console.log(reg.test('hello9a'));

        // var reg =/^a$/;
        // console.log(reg.test('a'));

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

        // var reg = /^a\d?a[\dabc]/;//[0-9]表示数字a、b中选1个结尾
        //  console.log(reg.test('a7a8'));

        // var reg = /^a\d?a[\dabc]$/;//【0-9abc】表示从数字、a、bc中选2个结尾
        // console.log(reg.test('a77a8'));

        //  var reg= /^a\d?a[\dabc]{2}(\da){3}$/;//(\da){3}数字a可以连续出现3次
        // console.log(reg.test('a7a2b896a'));

        // var reg = /^a|b+%/;//b至少出现1次
        // console.log(reg.test('aacb'));

        var reg =/^[^abc]{2}/;//只要不是abc开头就可
        console.log(reg.test('sds'));

    </script>
</head>
<body>


</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dHnrccxM-1593399355607)(.\images\案例32.png)]$

test33.html

<!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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UR3iVwLb-1593399355608)(.\images\案例33.png)]

success.html

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

    function $(id) {
        return document.getElementById(id);
    }
</script>

用户注册

用户名：
密码：
确认密码：
出生日期：
手机号：
邮箱：

```

[外链图片转存中...(img-UR3iVwLb-1593399355608)]

success.html

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

Ao622

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; background:#ccc; } &
复制链接

扫一扫