Python全棧之學(xué)習(xí)JS(2)
更新時(shí)間：2022年01月23日 16:24:10 作者：熬夜泡枸杞
這篇文章主要為大家介紹了Python全棧之JS，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
1. js對(duì)象
1.1 object對(duì)象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object對(duì)象</title>
</head>
<body>
<script>
// 1.定義對(duì)象方法一
var obj = new Object();
console.log(obj , typeof(obj))
obj.name = "孫堅(jiān)";
obj.age = 18;
obj.weight = "200斤";
obj.eat = function(){
alert("我會(huì)吃竹子");
}
console.log(obj.name)
// obj.eat();
//2.定義對(duì)象方法二
/* 對(duì)象中的成員不要使用單引號(hào),在特殊場(chǎng)景中,比如json格式字符串的轉(zhuǎn)換中會(huì)報(bào)錯(cuò); */
var obj = {
name:"張三",
"age" : 20,
sex : "男性",
drink : function(something){
console.log("我會(huì)喝牛欄山",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.定義對(duì)象方法三
/* 類(lèi)比python中定義類(lèi)的寫(xiě)法 , 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.遍歷對(duì)象
for(var i in obj1){
console.log(i)
}
//5. with(對(duì)象) 語(yǔ)法可以直接獲取對(duì)象成員的值
with(obj1){
console.log(name);
console.log(sex);
console.log(age);
res = func();
console.log(res);
}
console.log("<===================================>")
//將4和5結(jié)合,遍歷對(duì)象中的數(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對(duì)象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>json對(duì)象</title>
</head>
<body>
<script>
var data = {
'name':"文東",
age:20,
"sleep":function(){
alert("文東一天睡23小時(shí),還有一個(gè)小時(shí)上廁所.");
}
}
// js對(duì)象 => json格式的字符串
var res = JSON.stringify(data);
console.log(res , typeof(res)); // {"name":"文東","age":20}
// json格式的字符串 => js對(duì)象
res = '{"name":"東東","age":30}'; // success
// res = "{'name':90,'age':40}"; error 引號(hào)必須是雙引號(hào)
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>字符串對(duì)象的相關(guān)方法</title>
</head>
<body>
<script>
var string = "to be or not to be";
//獲取字符串長(zhǎng)度 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(開(kāi)始值,結(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(開(kāi)始值,截取幾個(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.大小寫(xiě) 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ū)分大小寫(xiě) 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ù)組對(duì)象的相關(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 刪除
/* 把值刪掉了,原位置用空來(lái)取代,返回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è)位置開(kāi)始,刪除幾個(gè),[可選的是添加的元素]) */
var arr = [1, 2, 3, "你好", "我好", "她也好"];
// 從第二個(gè)2位置開(kāi)始,刪除2個(gè)
var res = arr.splice(2,2)
console.log(res , arr)
// 從第二個(gè)2位置開(kāi)始,刪除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 是一對(duì);*/
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(開(kāi)始值,結(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ù),通過(guò)函數(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é)對(duì)象相關(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é)對(duì)象中的相關(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);
//絕對(duì)值 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)
//開(kāi)方運(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ù)字,把對(duì)應(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對(duì)象
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對(duì)象 </title></head><body> <script> /*### BOMjs BOM對(duì)象 : 針對(duì)于瀏覽器的控制 browser object model js 中最大的對(duì)象 window 整個(gè)瀏覽器窗口出現(xiàn)的所有內(nèi)容行為都是window對(duì)象中的成員; */ 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("請(qǐng)輸入您的銀行密碼:") // 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)前頁(yè)面跳轉(zhuǎn) // window.open("http://www.baidu.com","_blank","width=500,height=500"); // 在新窗口頁(yè)面跳轉(zhuǎn) // ###定時(shí)器 /* # 定時(shí)器種類(lèi)(兩種):基于單線程的異步并發(fā)程序; window.setInterval(函數(shù)名,間隔時(shí)間(毫秒)) // 定時(shí)執(zhí)行多次任務(wù) window.setTimeout(函數(shù)名,間隔時(shí)間(毫秒)) // 定時(shí)執(zhí)行一次任務(wù) window.clearInterval(id號(hào)) // 清除定時(shí)器 setInterval window.clearTimeout(id號(hào)) // 清除定時(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對(duì)象 </title>
</head>
<body>
<script>
/*
### BOM
js BOM對(duì)象 : 針對(duì)于瀏覽器的控制 browser object model
js 中最大的對(duì)象 window 整個(gè)瀏覽器窗口出現(xiàn)的所有內(nèi)容行為都是window對(duì)象中的成員;
*/
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("請(qǐng)輸入您的銀行密碼:")
// 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)前頁(yè)面跳轉(zhuǎn)
// window.open("http://www.baidu.com","_blank","width=500,height=500"); // 在新窗口頁(yè)面跳轉(zhuǎn)
// ###定時(shí)器
/*
# 定時(shí)器種類(lèi)(兩種):基于單線程的異步并發(fā)程序;
window.setInterval(函數(shù)名,間隔時(shí)間(毫秒)) // 定時(shí)執(zhí)行多次任務(wù)
window.setTimeout(函數(shù)名,間隔時(shí)間(毫秒)) // 定時(shí)執(zhí)行一次任務(wù)
window.clearInterval(id號(hào)) // 清除定時(shí)器 setInterval
window.clearTimeout(id號(hào)) // 清除定時(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 對(duì)象 </title>
</head>
<body>
<script>
console.log(navigator);
console.log(navigator.platform) // 判斷是pc端還是移動(dòng)端
console.log(navigator.userAgent) // 在爬蟲(chóng)程序中,可以偽造成瀏覽器進(jìn)行數(shù)據(jù)爬取,繞開(kāi)服務(wù)端的反爬機(jī)制;
</script>
</body>
</html>
5.4 歷史對(duì)象
<!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()">查看歷史對(duì)象</button>
<button onclick="func2()">跳轉(zhuǎn)到上一頁(yè)</button>
<button onclick="func3()">跳轉(zhuǎn)到下一頁(yè)</button>
<button onclick="func4()">當(dāng)前頁(yè)面刷新</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對(duì)象location
location作用： 負(fù)責(zé)刷新頁(yè)面，跳轉(zhuǎn)頁(yè)面用的，可以獲取地址欄上面的參數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOM對(duì)象 location</title>
</head>
<body>
<button onclick="func1()">查看location對(duì)象</button>
<button onclick="func2()">跳轉(zhuǎn)其他頁(yè)面</button>
<button onclick="func3()">刷新頁(yè)面</button>
<button onclick="func4()">過(guò)一秒在刷新頁(yè)面</button>
<script>
function func1(){
/* 鏈接地址: http://ip + 端口號(hào) + 路徑 + 參數(shù) + 錨點(diǎn) */
console.log(location);
console.log(`協(xié)議:${location.protocol}`);
console.log(`ip端口號(hào):${location.host}`);
console.log(`端口號(hào):${location.port}`);
console.log(`路徑:${location.pathname}`);
console.log(`獲取錨點(diǎn):${location.hash}`);
console.log(`獲取地址欄參數(shù):${location.search}`);
console.log(`完全地址:${location.href}`)
}
//跳轉(zhuǎn)頁(yè)面
function func2(){
// location.;方法一
location.assign("http://www.jd.com");
}
//刷新頁(yè)面
function func3(){
location.reload();
}
// 過(guò)一秒在刷新頁(yè)面
function func4(){
setTimeout(func3,1000);
console.log("我執(zhí)行了...")
}
// 每過(guò)一秒刷新一下頁(yè)面
/* 等待所有頁(yè)面圖片文字全部加載完畢之后,再去執(zhí)行對(duì)應(yīng)的代碼 */
window.onload = function(){
func4()
}
</script>
</body>
</html>
7. 小提示
js三大對(duì)象 1. 本地對(duì)象：js語(yǔ)法 2. bom對(duì)象：瀏覽器相關(guān)的成員（針對(duì)于瀏覽器的控制）brower object model 3. dom文檔對(duì)象：關(guān)于html文件節(jié)點(diǎn)相關(guān)的數(shù)據(jù)、相關(guān)的值（針對(duì)于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)用自動(dòng)播放函數(shù)
timer = setInterval(autoPlay, 2000);
// 鼠標(biāo)劃過(guò)整個(gè)容器時(shí)停止自動(dòng)播放
wrap.onmouseover = function () {
clearInterval(timer);
}
// 鼠標(biāo)離開(kāi)整個(gè)容器時(shí)繼續(xù)播放至下一張
wrap.onmouseout = function () {
timer = setInterval(autoPlay, 2000);
}
// 遍歷所有數(shù)字導(dǎo)航實(shí)現(xiàn)劃過(guò)切換至對(duì)應(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>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Python操作mongodb數(shù)據(jù)庫(kù)的方法詳解
這篇文章主要介紹了Python操作mongodb數(shù)據(jù)庫(kù)的方法,結(jié)合實(shí)例形式詳細(xì)分析了Python下載、安裝pymongo及操作MongoDB數(shù)據(jù)庫(kù)相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12
Python數(shù)學(xué)建模StatsModels統(tǒng)計(jì)回歸之線性回歸示例詳解
這篇文章主要為大家介紹了Python數(shù)學(xué)建模中StatsModels統(tǒng)計(jì)回歸之線性回歸的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-10-10
解析Python 偏函數(shù)用法全方位實(shí)現(xiàn)
這篇文章主要介紹了解析Python 偏函數(shù)用法全方位實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了numpy數(shù)組的維度、軸詳解,numpy數(shù)組的某個(gè)軸,指的是：該數(shù)組的某個(gè)維度的方向,其方向從索引號(hào)由底到高,許多numpy方法或函數(shù)在調(diào)用時(shí),常常需要指定一個(gè)關(guān)鍵參數(shù)“axis=X”,它表示的是沿哪個(gè)軸的方向進(jìn)行運(yùn)算,需要的朋友可以參考下2023-09-09
關(guān)于python的編碼與解碼decode()方法及zip()函數(shù)
這篇文章主要介紹了關(guān)于python的編碼與解碼decode()方法及zip()函數(shù),encode0?方法是字符串對(duì)象內(nèi)置的一個(gè)實(shí)現(xiàn)方法用于實(shí)現(xiàn)編碼操作,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Python 如何訪問(wèn)外圍作用域中的變量的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了python django的入門(mén)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要介紹了Python json模塊使用實(shí)例,本文給出多個(gè)使用代碼實(shí)例,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了詳解Python中文分詞而生的jieba庫(kù),在Python中，最好用的中文分詞庫(kù)是jieba。用“結(jié)巴”給一個(gè)中文分詞庫(kù)命名，非常生動(dòng)形象，同時(shí)還帶有一種程序員式的幽默感,需要的朋友可以參考下2023-07-07
Python中的文件和目錄操作實(shí)現(xiàn)代碼
對(duì)于文件和目錄的處理，雖然可以通過(guò)操作系統(tǒng)命令來(lái)完成，但是Python語(yǔ)言為了便于開(kāi)發(fā)人員以編程的方式處理相關(guān)工作，提供了許多處理文件和目錄的內(nèi)置函數(shù)。重要的是，這些函數(shù)無(wú)論是在Unix、Windows還是Macintosh平臺(tái)上，它們的使用方式是完全一致的。2011-03-03