溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Python全棧中的JS對象是什么

發(fā)布時(shí)間:2022-01-24 09:09:19 來源:億速云 閱讀:116 作者:kk 欄目:開發(fā)技術(shù)

這篇文章主要為大家分析了Python全棧中的JS對象是什么的相關(guān)知識點(diǎn),內(nèi)容詳細(xì)易懂,操作細(xì)節(jié)合理,具有一定參考價(jià)值。如果感興趣的話,不妨跟著跟隨小編一起來看看,下面跟著小編一起深入學(xué)習(xí)“Python全棧中的JS對象是什么”的知識吧。

1. js對象

1.1 object對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>object對象</title>
</head>
<body>
    <script>
        // 1.定義對象方法一
        var obj = new Object();
        console.log(obj , typeof(obj))
        obj.name = "孫堅(jiān)";
        obj.age = 18;
        obj.weight = "200斤";
        obj.eat = function(){
            alert("我會吃竹子");
        }
        console.log(obj.name)
        // obj.eat();
        //2.定義對象方法二
        /* 對象中的成員不要使用單引號,在特殊場景中,比如json格式字符串的轉(zhuǎn)換中會報(bào)錯(cuò); */
        var obj = {
            name:"張三",
            "age" : 20,
            sex   : "男性",
            drink : function(something){
                console.log("我會喝牛欄山",something);
            }
        }
        //調(diào)用方式一
        console.log(obj.sex)
        obj.drink("老白干")
        //調(diào)用方式二
        console.log(obj["age"])
        obj["drink"](1)
        // 注意點(diǎn)
        var str = "name"
        console.log(obj.str , "<==========================>") //error
        console.log(obj.name)
        console.log(obj[str]) // obj["name"]
        // eval 可以把字符串當(dāng)成代碼執(zhí)行
        eval("console.log(333)")
        //3.定義對象方法三
        /* 類比python中定義類的寫法 , this等價(jià)于self */
        function Person(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.func = function(){
                console.log("我是func");
                return this.sex;
            }
        }
        var obj1 = new Person("劉一風(fēng)",30,"男性");
        var obj2 = new Person("張三風(fēng)",90,"女性");
        console.log(obj1.name);
        var res = obj1.func();
        console.log(res);
        console.log(obj2.name)
        var res = obj2.func();
        console.log(res);
        //4.遍歷對象 
        for(var i in obj1){
            console.log(i)
        }
        //5. with(對象) 語法可以直接獲取對象成員的值
        with(obj1){
            console.log(name);
            console.log(sex);
            console.log(age);
            res = func();
            console.log(res);
        }
        console.log("<===================================>")
        //將4和5結(jié)合,遍歷對象中的數(shù)據(jù);
        for(var i in obj1){
            //console.log(i , typeof(i)) // name age sex func  ... string
            with(obj1){
                console.log(eval(i))
            }
        }

    </script>
</body>
</html>

1.2 json對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>json對象</title>
</head>
<body>
    <script>
        var data = {
            'name':"文東",
            age:20,
            "sleep":function(){
                alert("文東一天睡23小時(shí),還有一個(gè)小時(shí)上廁所.");
            }
        }
        // js對象 => json格式的字符串
        var res = JSON.stringify(data);
        console.log(res , typeof(res)); // {"name":"文東","age":20} 
        // json格式的字符串 => js對象
        res = '{"name":"東東","age":30}';  // success
        // res = "{'name':90,'age':40}"; error 引號必須是雙引號
        var res2 = JSON.parse(res);
        console.log(res2,typeof(res2));

    </script>
</body>
</html>

2. js字符串函數(shù)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串對象的相關(guān)方法</title>
</head>
<body>
    <script>
        var string = "to be or not to be";
        //獲取字符串長度 length	
        var res = string.length
        var res = string[-1]
        console.log(res)
        //1.清除兩側(cè)的空白 trim [ python的strip ]
        var res = string.trim()
        console.log(string)
        console.log(res)
        //2.獲取首次出現(xiàn)的位置 indexOf   [ python的find ]
         /*找不到返回-1*/
        var string = "to be or not to be";
        var res = string.indexOf("z")
        console.log(res)
        //3/最后一次出現(xiàn)的位置 lastIndexOf 
        /*找不到返回-1*/
        var res = string.lastIndexOf("zzz")
        console.log(res);
        //4.連接字符串	concat	 [ python的 os.path.join  + ]
        var res = string.concat("d:\\","python32\\","day42");
        console.log(res);
        //5.截取字符串 slice
        /* string.slice(開始值,結(jié)束值) 字符串的切片  留頭舍尾  [支持逆向下標(biāo)]*/
        var string = "11122233e or not to be";
        var res = string.slice(1,7);
        var res = string.slice(-5,-1);      // to b
        // var res = string.slice(-5,-10); //截取不到返回空
        console.log(res,"<==1==>")
        //6.截取字符串 substr
        /* string.substr(開始值,截取幾個(gè)) */
        var string = "11122233e or not to be";
        var res = string.substr(3,4)
        console.log(res,"<==2==>")
        //7.拆分字符串 split  [ python的 split ]
        var string = "11122233e or not to be";
        var res = string.split(" ")
        console.log(res,"<==3==>")
        //8.大小寫 toUpperCase toLowerCase
        var string = "11122233e Or noT tO be";
        res = string.toUpperCase();
        res = string.toLowerCase();
        console.log(res,"<==4==>")
        //9.search 匹配第一次找到的索引位置,找不到返回-1
        var string = "aaabbb oldaoy ccc"
        var res = string.search(/oldboy/)
        console.log(res,"<==5==>")
        //10.match 返回匹配的數(shù)據(jù)
        /* /正則表達(dá)式/修飾符 g:全局匹配 i:不區(qū)分大小寫 m:多行匹配  */
        var string = "我的電話是 : 13838384388 你的電話是: 13854381438"
        var res = string.match(/\d{11}/);  // 匹配一個(gè)
        var res = string.match(/\d{11}/g); // 匹配多個(gè),(需要修飾符加上g)
        console.log(res)
        console.log(res[0])
        console.log(res[1])
        //11.字符串替換 replace
        /* replace默認(rèn)只替換一次 */
        var string = "to be or not to be";
        var res = string.replace("to","two")
        console.log(res,"<==6==>")       
        // 方法一:
        function myreplace(string,a,b){
            /*
                找最后一個(gè)to,如果找不到返回-1
                如果能找到就不停的進(jìn)行替換,直到-1為止,循環(huán)終止;
            */
            while(string.lastIndexOf(a) != -1){
                console.log(1)
                string = string.replace(a,b);
            }
            return string;
        }     
        var string = "to be or not to be";   
        var res = myreplace(string,"to","two")
        console.log(res) // two be or not two be
        // 方法二
        var string = "to be or not to be";
        var res = string.replace(/to/g,"two");
        console.log(res)
    </script>
</body>
</html>

3. js數(shù)組相關(guān)方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>數(shù)組對象的相關(guān)方法</title>
</head>
<body>
    <script>
        // 1.定義一個(gè)數(shù)組
        var arr = Array();
        var arr = Array(10,11,12);
        var arr = [15,16,17]
        console.log(arr , typeof(arr))
        // ### 1.增
        var arr = [];
        arr[0] = 10;
        arr[1] = 11;
        arr[2] = 12;
        // js特征:允許在一個(gè)臨時(shí)的索引值上插入數(shù)據(jù); ok
        arr[10] = 50;
        console.log(arr)
        console.log(arr[5])

        // (1)push 從數(shù)組的最后插入元素  相當(dāng)于python的append
        var arr = [];
        var res = arr.push(111);
        var res = arr.push(222);
        var res = arr.push(333);
        console.log(res,arr)
        // (2)unshift 從數(shù)組的前面插入元素 相當(dāng)于python的insert
        var arr = [100,101];
        var res = arr.unshift(1);
        var res = arr.unshift(333);
        console.log(res , arr);
        // (3)concat 迭代追加數(shù)據(jù) 相當(dāng)于python的extend
        var arr1 = [1,2,3]
        var arr2 = ["你好","我好","她也好"]
        var res = arr1.concat(arr2)
        console.log(res, typeof(res));
        // ###2刪
        // (1) delete 刪除
        /* 把值刪掉了,原位置用空來取代,返回undifined */
        var arr = [1, 2, 3, "你好", "我好", "她也好"];
        delete arr[1];
        console.log(arr);
        console.log(arr[1])
        // (2)pop  從后面刪除;
        var arr = [1, 2, 3, "你好", "我好", "她也好"];
        var res = arr.pop();
        console.log(res ,arr);
        // (3)shift 從前面刪除
        var arr = [1, 2, 3, "你好", "我好", "她也好"];
        var res = arr.shift()
        console.log(res , arr)
        // ###  特別splice  從指定位置往后進(jìn)行刪除或者添加
        /* arr.splice(從第幾個(gè)位置開始,刪除幾個(gè),[可選的是添加的元素])   */
        var arr = [1, 2, 3, "你好", "我好", "她也好"];
        // 從第二個(gè)2位置開始,刪除2個(gè)
        var res = arr.splice(2,2)
        console.log(res , arr)
        // 從第二個(gè)2位置開始,刪除0個(gè),添加,"hello","world"
        var arr = [1, 2, 3, "你好", "我好", "她也好"];
        var res = arr.splice(2,0,"hello","world")
        console.log(res , arr)
        // ###3改查
        var arr = [1, 2, 3, "你好", "我好", "她也好"];
        //修改元素
        arr[3] = "你不好";
        //獲取元素
        console.log(arr[3]);
        console.log(arr);
        // ###4 其他方法
        // 拼接字符串  join
        /* split 和 join 是一對;*/
        var arr = ["you","can","you","up"];
        var res = arr.join("#")
        console.log(res)
        // 數(shù)組元素反轉(zhuǎn) reverse
        var arr = [100,200,3,150];
        var res = arr.reverse();
        console.log(res);
        // 截取數(shù)組的一部分 slice 
        /* arr.slice(開始值,結(jié)束值) 數(shù)組的切片  留頭舍尾  [支持逆向下標(biāo)]*/
        var arr = ["宋健","何旭彤","劉利偉","高雪峰","戈隆","王致和","馬生平"]
        var res = arr.slice(2)
        // var res = arr.slice(2,4)
        var res = arr.slice(-3,-1)
        console.log(res);
        // 排序 默認(rèn)升序 sort
        var arr = [1,2,3,4,9,22,21];
        var arr = ["1","2","3","4","9","22","21"];
        var res = arr.sort()
        console.log(res)
        var arr = [100,1,2,3,4,9,22,21];
        // sorted 里面的參數(shù)是一個(gè)函數(shù),通過函數(shù)進(jìn)行升序或者降序排序;
        /* return 1代表交換位置,如果return -1 代表不交換位置 */
        var res = arr.sort(function(a,b){
            if(a>b){
                return -1;
            }else{
                return 1;
            }               
        });
        console.log(res)
    </script>
    <!-- 
    python : 冒泡排序
        nums = [1,22,3,2,4,9,21];
    def bubble_sort(nums):
        for i in range(len(nums) - 1):  # 這個(gè)循環(huán)負(fù)責(zé)設(shè)置冒泡排序進(jìn)行的次數(shù)
            for j in range(len(nums) - i - 1):  # j為列表下標(biāo)
                if nums[j] > nums[j + 1]:
                    nums[j], nums[j + 1] = nums[j + 1], nums[j]
            break;
        return nums
    res = bubble_sort(nums)
    print(res) -->
</body>
</html>

4. js數(shù)學(xué)對象相關(guān)方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>數(shù)學(xué)對象中的相關(guān)方法</title>
</head>
<body>
    <script>
        //四舍五入round
        var res = Math.round(3.5)
        var res = Math.round(2.5)
        var res = Math.round(2.31)
        console.log(res)
        //最大值 max        
        var res = Math.max(1,2,3,4,34343);
        //最小值 min
        var res = Math.min(1,2,3,4,34343);
        //絕對值 abs
        var res = Math.abs(-90);
        console.log(res)
        //向下取整 floor 地板
        var res = Math.floor(3.001)
        //向上取整 ceil 天花板
        var res = Math.ceil(3.990)
        //冪運(yùn)算 pow
        var res = Math.pow(2,3)
        //開方運(yùn)算 sqrt             
        var res = Math.sqrt(9)
        console.log(res)
        // ### 隨機(jī)值推導(dǎo)公式
        //獲取從0到1隨機(jī)值   0<x<1
        var res = Math.random()
        console.log(res)
        //獲取1~10的隨機(jī)值 1 <= x <= 10
        var res = Math.ceil(Math.random() * 10 )
        console.log(res)
        // 1.獲取從 m 到 n 的隨機(jī)值   5,14  m=5 , n=14
        // 1 <= x <= 10  =>  1+4 <= x <= 10+4 < 5 <= x <= 14
        var res = Math.ceil(Math.random() * 10 ) + 4
        //  m = 5 , n = 14
        // 2.拆解數(shù)字,把對應(yīng)的m和n進(jìn)行替換;
        var res = Math.ceil(Math.random() * (14-5+1) ) + (5 - 1)
        // 3.推出最后結(jié)果
        var res = Math.ceil(Math.random() * (n-m+1) ) + (m - 1)
        // 4.封裝函數(shù):終極版:隨機(jī)值;
        function randrange(m,n){
            return Math.ceil(Math.random() * (n-m+1) ) + (m - 1);
        }

    </script>
</body>
</html>

5. BOM對象

5.1 定時(shí)器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>BOM對象 </title></head><body>    <script>        /*### BOMjs BOM對象  : 針對于瀏覽器的控制   browser object model js 中最大的對象 window 整個(gè)瀏覽器窗口出現(xiàn)的所有內(nèi)容行為都是window對象中的成員;        */        console.log(window)        // 1.彈出警告框        // window.alert('你好')        // 2.確認(rèn)彈窗        // var res = window.confirm("確認(rèn)彈窗")        // console.log(res); // true / false        // 3.等待輸入彈窗        // var res = window.prompt("請輸入您的銀行密碼:")        // console.log(res);        // 4.關(guān)閉瀏覽器窗口        // window.close();        // innerHeight innerWidth 獲取瀏覽器窗口內(nèi)部的寬和高        console.log(`瀏覽器窗口內(nèi)部的寬度${window.innerWidth}`)        console.log(`瀏覽器窗口內(nèi)部的高度${window.innerHeight}`)        // window.open("http://www.baidu.com","_self"); // 在當(dāng)前頁面跳轉(zhuǎn)        // window.open("http://www.baidu.com","_blank","width=500,height=500");   // 在新窗口頁面跳轉(zhuǎn)        // ###定時(shí)器        /*            # 定時(shí)器種類(兩種):基于單線程的異步并發(fā)程序;            window.setInterval(函數(shù)名,間隔時(shí)間(毫秒))   // 定時(shí)執(zhí)行多次任務(wù)            window.setTimeout(函數(shù)名,間隔時(shí)間(毫秒))    // 定時(shí)執(zhí)行一次任務(wù)            window.clearInterval(id號)  // 清除定時(shí)器 setInterval            window.clearTimeout(id號)   // 清除定時(shí)器 setTimeout        */        var num = 1        function func(){            console.log(`我執(zhí)行了${num}`);            num++;        }        var id1 = window.setInterval(func,1000);        var id2 = window.setTimeout(func,2000);        console.log(id1,"id1")        console.log(id2,"id2")        console.log("我執(zhí)行完了....")        window.clearInterval(id1)    </script>    </body></html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM對象 </title>
</head>
<body>
    <script>
        /*
			### BOM
			js BOM對象  : 針對于瀏覽器的控制   browser object model 
			js 中最大的對象 window 整個(gè)瀏覽器窗口出現(xiàn)的所有內(nèi)容行為都是window對象中的成員;
        */
        console.log(window)
        // 1.彈出警告框
        // window.alert('你好')
        // 2.確認(rèn)彈窗
        // var res = window.confirm("確認(rèn)彈窗")
        // console.log(res); // true / false
        // 3.等待輸入彈窗
        // var res = window.prompt("請輸入您的銀行密碼:")
        // console.log(res);
        // 4.關(guān)閉瀏覽器窗口
        // window.close();
        // innerHeight innerWidth 獲取瀏覽器窗口內(nèi)部的寬和高
        console.log(`瀏覽器窗口內(nèi)部的寬度${window.innerWidth}`)
        console.log(`瀏覽器窗口內(nèi)部的高度${window.innerHeight}`)
        // window.open("http://www.baidu.com","_self"); // 在當(dāng)前頁面跳轉(zhuǎn)
        // window.open("http://www.baidu.com","_blank","width=500,height=500");   // 在新窗口頁面跳轉(zhuǎn)
        // ###定時(shí)器
        /*
            # 定時(shí)器種類(兩種):基于單線程的異步并發(fā)程序;
            window.setInterval(函數(shù)名,間隔時(shí)間(毫秒))   // 定時(shí)執(zhí)行多次任務(wù)
            window.setTimeout(函數(shù)名,間隔時(shí)間(毫秒))    // 定時(shí)執(zhí)行一次任務(wù)
            window.clearInterval(id號)  // 清除定時(shí)器 setInterval
            window.clearTimeout(id號)   // 清除定時(shí)器 setTimeout
        */
        var num = 1
        function func(){
            console.log(`我執(zhí)行了${num}`);
            num++;
        }
        var id1 = window.setInterval(func,1000);
        var id2 = window.setTimeout(func,2000);
        console.log(id1,"id1")
        console.log(id2,"id2")
        console.log("我執(zhí)行完了....")
        window.clearInterval(id1)
    </script>
</body>
</html>

5.2 獲取年月日時(shí)分秒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>獲取年月日時(shí)分秒</title>
    <style>
        #clock
        {
            width:500px;
            height:50px;
            border:solid 1px red;
            border-radius: 25px;
            text-align: center;
            line-height: 50px;
            background-color: chartreuse;
            color:red;
        }
    </style>
</head>
<body>
    <div id="clock"> </div>
    <script>
        var obj = document.getElementById("clock");
        console.log(obj)
        function func(){
            var d = new Date();
            console.log(d);
            // 獲取年份
            var year = d.getFullYear()
            // 獲取月份 月份范圍 0 ~ 11 0代表1月份
            var month = d.getMonth()
            // 獲取日期
            var date = d.getDate()
            // 獲取小時(shí)
            var hour = d.getHours()
            // 獲取分鐘
            var minutes = d.getMinutes()
            // 獲取秒數(shù)
            var seconds = d.getSeconds()
            strvar= `現(xiàn)在的時(shí)間是: ${year}年-${month+1}月-${date}日  ${hour}:${minutes}:${seconds}`;
            console.log(strvar);
            obj.innerHTML = strvar
            console.log(minutes, typeof(minutes));
            // 清除定時(shí)器的效果
            if(minutes == 8){
                clearInterval(id);
            }
        }
        var id = window.setInterval(func,1000)

    </script>
</body>
</html>

5.3 Navigator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM模型中 Navigator 對象 </title>
</head>
<body>
    <script>
        console.log(navigator);
        console.log(navigator.platform)  // 判斷是pc端還是移動端
        console.log(navigator.userAgent) // 在爬蟲程序中,可以偽造成瀏覽器進(jìn)行數(shù)據(jù)爬取,繞開服務(wù)端的反爬機(jī)制;
    </script>
</body>
</html>

5.4 歷史對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="func1()">查看歷史對象</button>
    <button onclick="func2()">跳轉(zhuǎn)到上一頁</button>
    <button onclick="func3()">跳轉(zhuǎn)到下一頁</button>
    <button onclick="func4()">當(dāng)前頁面刷新</button>
    <script>
        function func1(){
            console.log(history);
        }
        function func2(){
            history.go(-1);
        }
        function func3(){
            // history.go(1);
            history.go(2);
        }
        function func4(){
            history.go(0);
        }
    </script>
</body>
</html>

6. BOM對象location

location作用: 負(fù)責(zé)刷新頁面,跳轉(zhuǎn)頁面用的,可以獲取地址欄上面的參數(shù)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM對象 location</title>
</head>
<body>
    <button onclick="func1()">查看location對象</button>
    <button onclick="func2()">跳轉(zhuǎn)其他頁面</button>
    <button onclick="func3()">刷新頁面</button>
    <button onclick="func4()">過一秒在刷新頁面</button>
    <script>
        function func1(){
            /* 鏈接地址:  http://ip + 端口號 + 路徑 + 參數(shù) + 錨點(diǎn) */
            console.log(location);
            console.log(`協(xié)議:${location.protocol}`);
            console.log(`ip端口號:${location.host}`);
            console.log(`端口號:${location.port}`);
            console.log(`路徑:${location.pathname}`);
            console.log(`獲取錨點(diǎn):${location.hash}`);
            console.log(`獲取地址欄參數(shù):${location.search}`);
            console.log(`完全地址:${location.href}`)
        }
        //跳轉(zhuǎn)頁面
        function func2(){
            // location.href = "http://www.baidu.com";方法一
            location.assign("http://www.jd.com");
        }
        //刷新頁面
        function func3(){
            location.reload();
        }
        // 過一秒在刷新頁面
        function func4(){
            setTimeout(func3,1000);
            console.log("我執(zhí)行了...")
        }
        // 每過一秒刷新一下頁面
        /* 等待所有頁面圖片文字全部加載完畢之后,再去執(zhí)行對應(yīng)的代碼 */
        window.onload = function(){
            func4()
        }
    </script>
</body>
</html>

7. 小提示

js三大對象
1. 本地對象:js語法
2. bom對象:瀏覽器相關(guān)的成員(針對于瀏覽器的控制)brower object model
3. dom文檔對象:關(guān)于html文件節(jié)點(diǎn)相關(guān)的數(shù)據(jù)、相關(guān)的值(針對于html的控制) document object model
js是單線程的異步程序
定時(shí)器是單線程的異步程序(例子)

ceshi.html:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{margin:0;
 padding:0;
 list-style:none;}
 .wrap{height:170px;
 width:490px;
 margin:60px auto;
 overflow: hidden;
 position: relative;
 margin:100px auto;}
 .wrap ul{position:absolute;} 
 .wrap ul li{height:170px;}
 .wrap ol{position:absolute;
 right:5px;
 bottom:10px;}
 .wrap ol li{height:20px; width: 20px;
 background:#ccc;
 border:solid 1px #666;
 margin-left:5px;
 color:#000;
 float:left;
 line-height:center;
 text-align:center;
 cursor:pointer;}
 .wrap ol .on{background:#E97305;
 color:#fff;}
 </style>
 <script type="text/javascript">
 window.onload=function(){
 var wrap=document.getElementById('wrap'),
 pic=document.getElementById('pic').getElementsByTagName("li"),
 list=document.getElementById('list').getElementsByTagName('li'),
 index=0,
 timer=null;
 // 定義并調(diào)用自動播放函數(shù)
 timer = setInterval(autoPlay, 2000);
 // 鼠標(biāo)劃過整個(gè)容器時(shí)停止自動播放
 wrap.onmouseover = function () {
 clearInterval(timer);
 }
 // 鼠標(biāo)離開整個(gè)容器時(shí)繼續(xù)播放至下一張
 wrap.onmouseout = function () {
 timer = setInterval(autoPlay, 2000);
 }
 // 遍歷所有數(shù)字導(dǎo)航實(shí)現(xiàn)劃過切換至對應(yīng)的圖片
 for (var i = 0; i < list.length; i++) {
 list[i].onmouseover = function () {
 clearInterval(timer);
 index = this.innerText - 1;
 changePic(index);
 };
 };
 function autoPlay () {
 if (++index >= pic.length) index = 0;
 changePic(index);
 }
 // 定義圖片切換函數(shù)
 function changePic (curIndex) {
 for (var i = 0; i < pic.length; ++i) {
 pic[i].style.display = "none";
 list[i].className = "";
 }
 pic[curIndex].style.display = "block";
 list[curIndex].className = "on";
 }
 };
 </script> 
</head>
<body>
 <div class="wrap" id='wrap'>
 <ul id="pic">
 <li><img src="../image/img1.png" alt=""></li>
 <li><img src="../image/img2.png" alt=""></li>
 <li><img src="../image/img3.png" alt=""></li>
 </ul>
 <ol id="list">
 <li class="on">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ol>
 </div>
</body>
</html>

python是什么意思

Python是一種跨平臺的、具有解釋性、編譯性、互動性和面向?qū)ο蟮哪_本語言,其最初的設(shè)計(jì)是用于編寫自動化腳本,隨著版本的不斷更新和新功能的添加,常用于用于開發(fā)獨(dú)立的項(xiàng)目和大型項(xiàng)目。

關(guān)于“Python全棧中的JS對象是什么”就介紹到這了,更多相關(guān)內(nèi)容可以搜索億速云以前的文章,希望能夠幫助大家答疑解惑,請多多支持億速云網(wǎng)站!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI