Js案例

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

Ao622

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

阅读量197

点赞数

文章标签： js

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

版权

案例1 test01.html

<!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-JDBNUOA7-1589012594417)(C:\Users\haocaiyun\Desktop\js\images\案例1.png)]$

案例2 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-HXTtc5EN-1589012594419)(C:\Users\haocaiyun\Desktop\js\images\案例2.png)]$

案例3 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-9BGM4Pee-1589012594421)(C:\Users\haocaiyun\Desktop\js\images\案例3.png)]$

案例4 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-4KVpTvN1-1589012594421)(C:\Users\haocaiyun\Desktop\js\images\案例4.png)]$

案例5 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-OztEXyVH-1589012594424)(C:\Users\haocaiyun\Desktop\js\images\案例5.png)]$

案例6 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-uKTk079y-1589012594425)(C:\Users\haocaiyun\Desktop\js\images\案例6.png)]$

案例7 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-gpyykn9m-1589012594426)(C:\Users\haocaiyun\Desktop\js\images\案例7.png)]$

案例8 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-H8kb0QqP-1589012594426)(C:\Users\haocaiyun\Desktop\js\images\案例8.png)]$

案例9 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-mT3ud5is-1589012594428)(C:\Users\haocaiyun\Desktop\js\images\案例9.png)]$

案例10 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>

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>

```

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