JavaScript学习记录《一》

最新推荐文章于 2024-09-03 17:02:58 发布

captain_dong

最新推荐文章于 2024-09-03 17:02:58 发布

阅读量146

点赞数 1

文章标签： javascript 学习 servlet

本文链接：https://blog.csdn.net/m0_63064861/article/details/127213543

版权

JavaScript学习记录《一》

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>初次网</title>
</head>

<body>

    <table>

        <!--第一行-->

        <tr>

            <td>姓名：</td>

            <td>诗栋</td>

        </tr>
        <!--第二行-->

        <tr>

            <td rowspan="2">喜欢水果：</td>

            <td>苹果</td>

        </tr>

        <!--第三行-->

        <tr>

            <td>香蕉</td>
        </tr>
    </table>
   
    <script>
     /*
       /*
        var str = 20;
        alert(str);
        */
      /*
        var sum = 0;
        for (let i = 0; i < 100; i++) {
            sum += i;
        }
        alert(sum);
      */
        //函数：(语法与就java不同)由function关键字进行定义
         /*
        //方式一：
        function add(a, b) {
            return a + b;
        }
        //调用：函数名称（实际参数列表）
        var result = add(1, 2);
        alert(result);
        //方式二：
        var add2 = function (a, b) {
            return a + b;
        }
        var result2 = add2(1, 400);
        alert(result2);
         /*
        //JavaScript中的数组相当于java中的集合，变长变类型
        //Array对象用于定义数组
         /*
        //方式一：
        var arr1 = new Array(1, 2, 3, 4);
        alert(arr1);
       //方式二：(常用)
        var arr2 = [1, 2, 3, 4, 5];
        alert(arr2);
        arr2[0] = 20;
        alert(arr2);

        var arr3 = [1, 2, 3, 4, 5];
        arr3[10] = 10;
        //变长
        alert(arr3[10]);
       // alert(arr3[9]);//undefined
        //变类型
        arr3[6] = "hello!";
        //alert(arr3[6]);
        alert(arr3);//1,2,3,4,5,,hello!,,,,10
        //属性：length:数组中元素个数
       // var arr4 = [1, 2, 3, 4, 5, 6];
       // for (let i = 0; i < arr4.length; i++) {
         //   alert(arr4[i]);
       // }
        //方法：
        //Puah:添加方法
        var arr5 = [1, 2, 3];
        arr5.push(10);
        alert(arr5);//1,2,3,10
        //splice:删除元素
        arr5.splice(0, 1);//从下标0开始删除，删除1个元素
        alert(arr5);//2,3,10
      
        var arr6 = [10, 12, 52, 65];
        arr6.sort();
        alert(arr6); //10, 12, 52, 65
      
        var arr7 = [100, 102, 152, 165];
        arr7.sort();
        alert(arr7);//100,102,152,165
      
      */
        //String 对象
        /*
        //方式一：
        var str1 = new String("hello,everyone!");
        alert(str1);
        //方式二：
        var str2 = "hello,everyone,I'm John!";
        alert(str2);
        //属性：length:字符串长度。
        alert(str1.length);//15
        alert(str2.length);//24
        //方法：charAt():返回指定位置的字符；indexOf():检索字符串
        //trim()方法：去除字符串前后两端的空白字符
        var str3 = "  abc  ";
        alert(1 + str3 + 1);//1  abc  1
        str3.trim();
        alert(1 + str3.trim() + 1);//1abc1
        */
        //自定义对象
        /*
        var person = {
            name: "zhangsan",
            age: 23,
            eat: function () {
                alert("干饭干饭！");
            }
        };
        alert(person.name);
        alert(person.age);
        person.eat();
        */

        //两个特殊的对象 BOM-DOM
        //BOM-Window-Navigator-Screen-History-Lacation
        //Window:浏览器窗口对象
        /*
           方法：
           alert():显示带有一段消息和一个确认按钮的警告框；
           confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框；
           setInterval()：按照指定的周期（以毫秒计）来调试函数或计算表达式；
           setTimeout（）：在指定的毫秒数后调用函数或计算表达式；

         */
        /*
        //window可省略
        //1- alert()
        //window.alert("abc");
        alert("bbb");
        // 2-confirm() : 确定-》true;取消-》false
        // window.confirm("确认删除吗？");
        var flag = confirm("确认删除吗？");
        //alert(flag);//确定-》true;取消-》false
        if (flag) {
            alert(1 + 5);
        } else {
            alert(5 + 6);
        }
        */
        //定时器：
        /*
          setTimeout（function,毫秒值）：在一定的时间间隔后执行一个function，只执行一次
          setInterval(function,毫秒值) ：在一定的时间间隔后执行一个function，循环执行
         */
        /*
        setTimeout(
                function () {
                alert("hahahhaha~~~~");
            }, 3000
        )
        setInterval(
            function () {
                alert("循环播放咯hhhhh");
            }, 2000
        )
         */
    </script>

    
    <input type="button" onclick="on()" value="开灯" />
    <img id="myImge" border="0" src="梦幻.jpg" height="500" width="600">
    <input type="button" onclick="off()" value="关灯" />
    <script>
        //小案例-切换图片
        function on() {
            document.getElementById('myImge').src = '梦幻.jpg';
        }
        function off() {
            document.getElementById('myImge').src = '周传雄.jpg';
        }

        var x = 0;
        //定时器
        setInterval(
            function (){
                if (x%2==0) {
                    on();
                }
                else {
                    off();
                }
                x++;
            },1050
        )
    </script>
</body>

</html>