JavaScript学习记录《一》

蔚落 2024-04-03 10:23 78阅读 0赞

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