文章目錄

• js算法題
• • 1、求和計(jì)算器
  • 2、求π（萊布尼茨公式）
  • 3.喇叭花數(shù)
  • 4.遞歸
  • • 4.1用遞歸求n的階乘
    • 4.2遞歸求1-100的和
    • 4.3菲波那切數(shù)列
    • 4.4工資漲幅
    • 4.5如何實(shí)現(xiàn)深克隆
  • 5.對象問題
  • 6.全局與局部變量
  • 7.BAT
  • 8.閉包
  • 9.js實(shí)現(xiàn)鼠標(biāo)劃過變色
  • 10.節(jié)點(diǎn)
  • 11.事件
  • 12.數(shù)組去重
  • 13.排序
  • 14.驗(yàn)證碼
  • 15.時(shí)間格式轉(zhuǎn)換
  • 16.網(wǎng)址參數(shù)轉(zhuǎn)對象屬性
  • 17.函數(shù)上下文
  • 18.鼠標(biāo)移動生成小球
  • 19.Date實(shí)現(xiàn)倒計(jì)時(shí)

js算法題

1、求和計(jì)算器

用prompt和alert制作一個(gè)求兩個(gè)數(shù)和的計(jì)算器？

<script>// 創(chuàng)建兩個(gè)變量來存放輸入的值，輸入的值默認(rèn)是字符串類型，需要先轉(zhuǎn)換為數(shù)字類型var a=Number(prompt('請輸入第一個(gè)值'));var b=Number(prompt('請輸入第二個(gè)值'));// 兩個(gè)數(shù)值求和var sum=a+b;// 彈出結(jié)果alert('數(shù)值'+a+'與數(shù)值'+b+'的結(jié)果是'+ sum); </script>

2、求π（萊布尼茨公式）

根據(jù)用戶輸入的值計(jì)算相應(yīng)精度的π？

• 累加器作為總和
• 累乘器作為每一塊的元素結(jié)果

<script>// 根據(jù)用戶輸入的值，根據(jù)萊布尼茨計(jì)算公式計(jì)算πvar n=Number(prompt("請輸入一個(gè)值"));// 存放值的和，因?yàn)楣降谝豁?xiàng)是1，所以先加1var sum=1;// 存放每一項(xiàng)的值var item=1;for(var i=1;i<n;i++){// 每一項(xiàng)都是前邊項(xiàng)的基礎(chǔ)上再乘以一個(gè)i/(2i+1),item就是當(dāng)前項(xiàng)的結(jié)果item*=(i/(2*i+1));// 用sum值加上每一項(xiàng)乘機(jī)的結(jié)果sum+=item;}// 萊布尼茨計(jì)算的是2分之π，所以結(jié)果要乘以2才得到的是πalert(sum*2);</script>

3.喇叭花數(shù)

<script>// 喇叭花數(shù)：一個(gè)三位整數(shù)，各位數(shù)階乘的和等于這個(gè)三位數(shù)： abc=a!+b!+c!// 首先定義求階乘的函數(shù)function factorial(n) {for(var i=1,result=1;i<=n;i++){result*=i;}return result;}// 遍歷所有三位數(shù)判斷它是否為喇叭花數(shù)for(var i=100;i<=999;i++){// 將三位數(shù)拆分var str=String(i);a=str[0];b=str[1];c=str[2];if(factorial(a)+factorial(b)+factorial(c)==i){console.log(i+"是蝴蝶數(shù)");}}</script>

4.遞歸

4.1用遞歸求n的階乘

<!-- 用遞歸求4的階乘 --><script>function digui(n){if(n==1) return 1;return n*(digui(n-1));}alert(digui(5));</script>

4.2遞歸求1-100的和

<script>// 求1-100的和function fun(n){if(n==1) return 1;return n+fun(n-1);}alert(fun(100));</script>

4.3菲波那切數(shù)列

<script>// 求斐波那契數(shù)列第n項(xiàng)的值：從第三項(xiàng)開始，每一項(xiàng)等于前兩項(xiàng)的和function fib(n){if(n==0||n==1) return 1;return fib(n-1)+fib(n-2);}for(i=0;i<10;i++){console.log(fib(i));}</script>

4.4工資漲幅

<script>//小慕入職新公司，月薪一萬元。工資每年漲幅5%。計(jì)算出小慕工作20年后，月薪為少var n=20;var t=0.05;function fun(n){if(n==1) return 10000;return fun(n-1)*0.05+fun(n-1);}console.log(fun(20));</script>

4.5如何實(shí)現(xiàn)深克隆

<script>// 實(shí)現(xiàn)深克隆// 定義一個(gè)多維數(shù)組var array = [1, 2, 3, 5, 6, 8[26, 32, [55, 25]]];function deepClone(arr) {// 在函數(shù)內(nèi)定義結(jié)果，為的是每一次調(diào)用時(shí)都會有一個(gè)初始resultvar result = [];for (var i = 0; i < arr.length; i++) {//判斷這個(gè)數(shù)據(jù)項(xiàng)是不是一個(gè)更深層次的數(shù)組,如果是，就再一次調(diào)用克隆if (Array.isArray(arr[i])){// 數(shù)組深度總有一個(gè)結(jié)尾，當(dāng)調(diào)用到最后一組，則所有的數(shù)據(jù)項(xiàng)都不是數(shù)組了，就可以將數(shù)據(jù)項(xiàng)push到新數(shù)組中了，這樣一層一層往回返result.push(deepClone(arr[i]));}else{// 如果不是數(shù)組，則直接輸入到新數(shù)組中result.push(arr[i]);}}// 將淺克隆的結(jié)果返回給它的調(diào)用官方return result;}var deep=deepClone(array);console.log(deep);console.log(array);console.log(deep==array);//false//深克隆成功</script>

5.對象問題

1.輸出執(zhí)行結(jié)果？

• obj.name尋找的是name屬性名的值
• obj[name]尋找的是name變量名的值

<script>var obj={name:"lili",age:18}var name="zhufeng";console.log(obj.name);//"lili"console.log(obj["name"]);//"lili"console.log(obj[name]);//obj["zhufeng"]====>undefinedconsole.log(obj[job]);//obj[找不到j(luò)ob這個(gè)變量]====>報(bào)錯(cuò)：job is not defined</script>

2.引用數(shù)據(jù)類型改變指向地址問題？

<script>var a = 12;var b = a;//b和a是基本數(shù)據(jù)類型，所以b克隆a的值console.log(b);//12var obj1 = { "name": "lili", "age": 12 };var obj2 = obj1;//obj1和obj2是引用數(shù)據(jù)類型，所以obj1將數(shù)據(jù)地址傳給obj2obj2.age = 18;//obj2修改堆空間中的值，obj1也會看到obj2的修改的值console.log(obj1.age);//18obj2={};//讓obj2又執(zhí)行了另一個(gè)數(shù)據(jù)空間，所以obj2斷掉對原來數(shù)據(jù)地址的引用，從新指向新地址console.log(obj1.age);//18,obj1仍然指向原地址</script>

3.對象內(nèi)存創(chuàng)建順序問題？

<script>var obj = {n: 10,b: obj.n * 10//由于這里obj的值還沒有創(chuàng)建成功，所以報(bào)錯(cuò)，obj未定義undefined}console.log(obj.b);</script>

6.全局與局部變量

1.考察局部變量的聲明提升？

<script>// 局部變量，變量的聲明提升var a=10;//這是全局變量function fun(){a++;//只要函數(shù)中有定義該變量，即使先調(diào)用再定義的，它就不會用全局變量，而是使用聲明提升的局部變量，所以a的值是undefined,a++的值是NaNvar a=5;//a的值由NaN轉(zhuǎn)為5console.log(a);//5}console.log(a);//10,全局變量不受局部變量的變化影響</script>

2.考察形參變量的作用域

<script>var a=123;var b=22;function fun(a){document.write(a);//undefined,因?yàn)檎{(diào)用參數(shù)傳沒有傳入值，則默認(rèn)為undefined值a=34;document.write(b);//22,因?yàn)闆]有形參b，所以會向上尋找定義了的b.}fun();document.write(a);//這是函數(shù)外邊，尋找全局變量</script>

7.BAT

1.判斷輸出結(jié)果？

typeof []//"object"typeof typeof []//"string"

2.判斷輸出結(jié)果？

var num=parseInt("px35.5");//num=NaN if(num==35.5){//不成立alert(0) }else if(num==35){//不成立alert(1) }else if(num==NaN){//NaN不自等（坑）alert(3) }else if(typeof num=='number'){//成立，NaN也是number類型alert(4)//輸出4 }else{alert(5) }

3.1.阿里xue案題

• 訪問執(zhí)行優(yōu)先級高于賦值

  a.x=a={n:2; } a.x是訪問對象屬性 a是對象 所以先給a.x賦值，給a賦值 <script>let a = {n: 1}let b = a;a.x = a = {n: 2}console.log(a.x);//undefinedconsole.log(b);//{n:2,x:地址值}</script>

8.閉包

8.1閉包的記憶性案例？

<script>// 閉包實(shí)例：測量體溫標(biāo)準(zhǔn)，A校區(qū)不能超過37.3度，B校區(qū)不能超過37.0度// 外邊這層函數(shù)，就是閉包封鎖的函數(shù)，傳入的形參biaozhun就是會被記憶的值function creatTemp(biaozhun){//定義局部函數(shù)，在調(diào)用閉包時(shí)傳入的值是給這個(gè)函數(shù)傳值function Temp(n){//if(n>biaozhun){alert("你的溫度過高");}else{alert("你的溫度正常");}}return Temp;//注意，返回的是函數(shù)名，不是Temp()調(diào)用函數(shù)}// 定義完函數(shù)之后，需要換一個(gè)地方執(zhí)行，給creatTemp一個(gè)標(biāo)準(zhǔn)值// 定義A小區(qū)的的標(biāo)準(zhǔn)體溫為37.3，閉包之后只要調(diào)用Temp_A函數(shù)就可以以37.3為標(biāo)準(zhǔn)var Temp_A=creatTemp(37.3);Temp_A(37.2);//溫度正常Temp_A(37.6);//溫度過高// 定義B小區(qū)的標(biāo)準(zhǔn)體溫為37.0，閉包之后只要調(diào)用Temp_B函數(shù)就可以以37.0為標(biāo)準(zhǔn)var Temp_B=creatTemp(37.0);Temp_B(37.3);//溫度過高Temp_B(36.9);//溫度正常</script>

8.2閉包的模擬私有變量？

• 核心要素是封裝，不能直接獲取函數(shù)中的私有變量，想要對私有變量進(jìn)行操作，需要先定義相應(yīng)的函數(shù)，否則操作不了。

//題目：定義一個(gè)變量a,要求是能保證這個(gè)a只能被進(jìn)行指定操作（如加1、乘2），而不能進(jìn)行其他操作。<script>function fun(){//a是局部變量，所以，函數(shù)外是無法訪問到a的var a=0;//我們想要獲取a，就可以定義一個(gè)對象，再在外部通過閉包的方式獲取它return {// 獲取a的值屬性名是我們需要調(diào)用的函數(shù)名，屬性值是函數(shù)表達(dá)式（匿名函數(shù)）getA:function(){return a;},// 另a+1add:function(){a++;},pow: function(){a*=2;}}}// 在外面將外層函數(shù)進(jìn)行閉包var obj=fun();// 這時(shí)obj就可以使用fun函數(shù)中定義的對象屬性了obj.getA();//0obj.add();//a+1obj.pow();//a*2</script>

8.3生成多個(gè)閉包時(shí)的運(yùn)算結(jié)果？

<script>function fun(){var count=0;return function(){count=count+1;console.log(count);};}// 定義了兩個(gè)閉包，他們兩個(gè)互不關(guān)聯(lián)，都獲得了fun的初始值var fun1=fun();//定義一個(gè)新的fun閉包var fun2=fun();//定義一個(gè)新的fun閉包fun1();//1fun2();//1,因?yàn)樗麄儍蓚€(gè)互不關(guān)聯(lián)，所以上面的count+1與fun2中的count無關(guān)fun2();//2,fun1()//2</script>

9.js實(shí)現(xiàn)鼠標(biāo)劃過變色

1.js實(shí)現(xiàn)交叉顏色，并且鼠標(biāo)劃上變色？

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}#lists {width: 500px;height: 500px;margin: 0 auto;border: 1px solid #333;display: flex;flex-direction: column;align-items: stretch;}li {flex: 1;}</style> </head><body><ul id="lists"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul></body></html> <script>var ols = document.getElementById("lists");var lis = ols.querySelectorAll("#lists>li");function color() {for (i = 0; i < lis.length; i++) {if (i % 2 == 0) {lis[i].style.background = "red";} else {lis[i].style.background = "green";}lis[i].onmouseover = function () {this.oldColor=this.style.backgroundColor;this.style.background = "pink";};lis[i].onmouseout = function () {this.style.background = this.oldColor;}}};color(); </script>

10.節(jié)點(diǎn)

10.1節(jié)點(diǎn)創(chuàng)建一個(gè)20行13列的表格

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>td {width: 5px;height: 5px;border: 1px solid #333;}</style> </head><body><table id="tb" class="tab"></table><script>// 獲取到table節(jié)點(diǎn)var otb = document.getElementById("tb");//掛載到table節(jié)點(diǎn)for (i = 0; i < 20; i++) {//創(chuàng)建孤兒節(jié)點(diǎn)trvar otr = document.createElement("tr");for (j = 0; j < 13; j++) {// 創(chuàng)建孤兒節(jié)點(diǎn)tdvar otd = document.createElement("td");otr.appendChild(otd);}otb.appendChild(otr);}</script> </body>

11.事件

11.1文本域只能輸入30個(gè)字符，動態(tài)提示用戶剩余輸入字符個(gè)數(shù)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><p>字?jǐn)?shù)限制在30字內(nèi),<span>您還可以輸入<b>30</b>字</span></p><textarea id="text" cols="50" rows="70"></textarea><script>// 文本域標(biāo)簽var otext=document.getElementById("text");//span標(biāo)簽var ospan=document.querySelector("span");otext.onkeyup=function(){var content=otext.value;var count=content.length;if(count<=30){var remain=30-count;ospan.innerHTML="您還可以輸入<b>"+remain+"</b>字";}else{var remain=count-30;ospan.innerHTML="您已經(jīng)超出了<b>"+remain+"</b>字";}}</script></body> </html>

11.2實(shí)現(xiàn)下拉框動態(tài)改變div的背景顏色

<body><span>請選擇你喜歡的顏色</span><select name="" id="color"><option value="0">請選擇</option><option value="yellow">黃色</option><option value="orange">橙色</option><option value="pink">粉色</option><option value="blue">藍(lán)色</option></select><div id="div">我是div</div><script>var oselect=document.getElementById('color');var ooptions=oselect.querySelectorAll("option");var odiv=document.getElementById("div");oselect.onchange=function(){var col=oselect.value;if(col==0){odiv.innerText="我沒有發(fā)生任何變化";odiv.style.background="white";}else{odiv.innerText="我是div";odiv.style.background=col;}}</script> </body>

12.數(shù)組去重

1.數(shù)組去重？

• 數(shù)組去重有三種方式：
  • 各數(shù)組項(xiàng)一一向后對比
  • 借用對象輔助判斷去重
  • 借用新數(shù)組放不重復(fù)數(shù)據(jù)

方式一：數(shù)組從左往右挑出每一個(gè)值，與后面的項(xiàng)一一對比

<script>// 思路：數(shù)組從左往右挑出每一個(gè)值，與后面的項(xiàng)一一對比，如果相同，就刪除掉后面重復(fù)的數(shù)據(jù)項(xiàng)// ary.length-1:是因?yàn)閿?shù)組最后一項(xiàng)后面沒有值了，所以這一項(xiàng)不需要比較了// j=i+1:這是因?yàn)榈趇向只需要從它后面一項(xiàng)開始一一比較，它本身以及前面的項(xiàng)不需要比較了// j--：是因?yàn)閯h除這一項(xiàng)后，后面的每一項(xiàng)會向前移，填補(bǔ)這一項(xiàng)，所以減一來繼續(xù)監(jiān)測這個(gè)索引的數(shù)據(jù)值function rem(ary){for(var i=0;i<ary.length-1;i++){// 獲取數(shù)組的第i項(xiàng)數(shù)據(jù)項(xiàng)var item=ary[i];//再次遍歷，這次是遍歷第i項(xiàng)后面的所有項(xiàng)for(var j=i+1;j<ary.length;j++){if(ary[j]==item){// 刪除后面重復(fù)的那一項(xiàng)ary.splice(j,1);// 放置數(shù)組塌陷j--;}}}// 一定記得要返回,否則外邊獲取的值就是undefinedreturn arr;}var arr=[1,2,3,5,2,4];alert(rem(arr));</script>

方式二：使用對象存儲已經(jīng)存在的數(shù)組數(shù)據(jù)項(xiàng)，對象的屬性名和屬性值都是數(shù)組某個(gè)數(shù)據(jù)項(xiàng)的數(shù)據(jù)值，如果對象中存在這個(gè)屬性名，則代表數(shù)組中已經(jīng)存在這個(gè)數(shù)據(jù)值了，后面在出現(xiàn)這個(gè)數(shù)據(jù)值，則是重復(fù)的值，就可以刪除

<script>// 思路：使用對象存儲已經(jīng)存在的數(shù)組數(shù)據(jù)項(xiàng)，對象的屬性名和屬性值都是數(shù)組某個(gè)數(shù)據(jù)項(xiàng)的數(shù)據(jù)值，如果對象中存在這個(gè)屬性名，則代表數(shù)組中已經(jīng)存在這個(gè)數(shù)據(jù)值了，后面在出現(xiàn)這個(gè)數(shù)據(jù)值，則是重復(fù)的值，就可以刪除function unique(arr){// 對象是輔助判斷作用，只接收數(shù)組中第一次出現(xiàn)的數(shù)據(jù)項(xiàng)，添加到對象 屬性名:屬性值都是數(shù)據(jù)項(xiàng)的值var obj={};for(var i=0;i<arr.length;i++){if(obj[arr[i]]==arr[i]){// 走到這里說明數(shù)組中已經(jīng)出現(xiàn)過這個(gè)值了，所以需要刪除掉arr.splice(i,1);i--;}// 走到這里說明該數(shù)據(jù)項(xiàng)值在數(shù)組中第一次出現(xiàn)，添加到對象中obj[arr[i]]=arr[i];}return arr;}var arr=[1,5,6,5,5,7,8];console.log(unique(arr));</script>

方式三：使用新數(shù)組接收不重復(fù)數(shù)據(jù)項(xiàng)

<body><script>//方式三：使用新數(shù)組接收不重復(fù)數(shù)據(jù)項(xiàng)var arr = [7, 2, 4, 5, 6, 2, 3, 2, 1];// 創(chuàng)建新數(shù)組，用來存放不重復(fù)的值function unique(arr) {var newArr = [];for (var i = 0; i < arr.length; i++) {// 判斷是否重復(fù)，如果不重復(fù)if (!newArr.includes(arr[i])) {newArr.push(arr[i]);i--;}}// 一定要返回return newArr;}alert(unique(arr));</script>

13.排序

1.冒泡排序?qū)崿F(xiàn)？

<!-- 冒泡排序 -->/* 冒泡排序：目的：從小到大進(jìn)行排序var ary=[2,1,5,8];// 兩兩進(jìn)行比較，如果前者比后者大，就交換順序， 經(jīng)過一輪比較之后，得到了一個(gè)最大值8//--------- 需要比較多少輪？ary.length-1 輪（因?yàn)樽詈笠粋€(gè)數(shù)字不用比，就是最小的）// 每一輪我需要比較多少次？------ary.length-1-已比較的輪數(shù)var ary=[8,2,1,5];// 正常情況下，兩兩比較的次數(shù)： ary.length-1第一輪的：[2,1,5,8]；// 經(jīng)過一輪比較得到了一個(gè)最大值8 比了三次第二輪的：[1,2,5,8]；//經(jīng)過二輪比較得到了一個(gè)最大值5 比了兩次 ary.length-1-已比較的輪數(shù) 第三輪的：[1,2,5,8]； 第四輪 不用比了，已經(jīng)得到三個(gè)最大值了，最后一個(gè)就是最小的 */<script>var ary=[2,1,5,8,5,221,3,2];var swap=0;// 比較的輪數(shù)for(var i=0;i<ary.length;i++){// 每輪比較的for循環(huán)for(var j=0;j<ary.length-i;j++){// 如果前面比后面的大，就交換位置if(ary[j]>ary[j+1]){swap=ary[j];ary[j]=ary[j+1];ary[j+1]=swap;}}}alert(ary);</script>

2.快速排序？

<script>//快速排序var ary=[12,15,4,13,16,11];//4,11,12,13,12function fast(ary){// 做一個(gè)條件，如果傳入的數(shù)組的長度是0或者1，說明已經(jīng)沒有比較的值了，就可以返回這個(gè)數(shù)組了if(ary.length<=1){return ary;}// 中間項(xiàng)的索引var centerIndex=Math.floor(ary.length/2);// splice的返回值是數(shù)組，拿到刪除的項(xiàng)得加索引0,這個(gè)是獲取中間值var centerValue= ary.splice(centerIndex,1)[0];// 設(shè)置左右兩個(gè)空數(shù)組var leftArr=[];var rightArr=[];// for循環(huán),交換位置for(var i=0;i<ary.length;i++){// 如果遍歷的數(shù)小于中間數(shù)，就把這個(gè)數(shù)放在左邊if(centerValue>ary[i]){leftArr.push(ary[i]);}else{//否則放在右邊的數(shù)組中rightArr.push(ary[i]);}}// 最終獲得左右數(shù)組和中間值，將三個(gè)數(shù)組拼接// 左右兩個(gè)數(shù)組又能夠作為一個(gè)無序數(shù)組，進(jìn)行快速排序，所以左數(shù)組和右數(shù)組仍需要調(diào)用函數(shù)return fast(leftArr).concat(centerValue, fast(rightArr));}alert(fast(ary));</script>

14.驗(yàn)證碼

1.驗(yàn)證碼如何實(shí)現(xiàn)？

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>button {width: 200px;height: 50px;cursor: pointer;}#code {border: 1px solid #333;height: 50px;width: 200px;margin-top: 100px;font-size: 40px;line-height: 50px;text-align: center;}</style> </head><body><button id="btn">獲取驗(yàn)證碼</button><div id="code"></div><script>// 字母和數(shù)字的范圍let codeText = "1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";var obtn=document.getElementById("btn");var ocode=document.getElementById("code");function getCode(num,begin,end) {// 先判斷這三個(gè)數(shù)是否為未定義if(num==undefined){ num=4;}if(begin==undefined) {begin=0;}if(end==undefined) {end=codeText.length-1;}// 獲取一個(gè)在0-61的隨機(jī)索引var newCode = "";var indexArr=[];while(newCode.length<num){// 獲取0-61，包括61之間的一個(gè)隨機(jī)數(shù)var index =Math.round(Math.random() * (end-begin)+begin) ;// 如果已經(jīng)出現(xiàn)了這個(gè)index，則重新選擇,實(shí)現(xiàn)不出現(xiàn)重復(fù)的數(shù)字if(!indexArr.includes(index)){indexArr.push(index);// 將隨機(jī)數(shù)的索引對應(yīng)數(shù)據(jù)項(xiàng)放到新字符串中newCode += codeText.charAt(index);} }// for (let i = 0; i < num; i++) {// // 獲取0-61，包括61之間的一個(gè)隨機(jī)數(shù)// var index =Math.round(Math.random() * (end-begin)+begin) ;// // 如果已經(jīng)出現(xiàn)了這個(gè)index，則重新選擇,實(shí)現(xiàn)不出現(xiàn)重復(fù)的數(shù)字// if(indexArr.includes(index)){// i--;// continue;// }// indexArr.push(index);// // 將隨機(jī)數(shù)的索引對應(yīng)數(shù)據(jù)項(xiàng)放到新字符串中// newCode += codeText.charAt(index);// }return newCode;}ocode.innerText=getCode();// 設(shè)計(jì)按鈕的點(diǎn)擊事件obtn.onclick=function(){ocode.innerText=getCode();}</script></body></html>

15.時(shí)間格式轉(zhuǎn)換

1.如何將"2019-8-18 12:32:18"轉(zhuǎn)換為"2019年8月18日 12時(shí)32分18秒"?

<script>var str="2019-8-18 12:32:18";var timeArr=str.split(" ");// 將年月日與時(shí)分秒分割開var year=timeArr[0];var time=timeArr[1];//將每一個(gè)數(shù)分開var newyear=year.split("-");var newtime=time.split(":");// 各拼接兩部分var nyear=newyear[0]+"年"+newyear[1]+"月"+newyear[2]+"日";var ntime=newtime[0]+"時(shí)"+newtime[1]+"分"+newtime[2]+"秒";// 拼接兩部分,用空格隔開var ne=nyear.concat(" ",ntime);console.log(ne);</script>

16.網(wǎng)址參數(shù)轉(zhuǎn)對象屬性

1.將網(wǎng)址中的問號后面的參數(shù)截取為對象中的屬性？

<script>var str = "http://www.mi.com/?id=100&price=180";function toObj(str) {// 首先獲取?出現(xiàn)的位置var qusindex = str.indexOf("?");console.log(qusindex);// 截取？后面的字符串var parm = str.slice(qusindex + 1);// 將字符串根據(jù)&分割var parmArr = parm.split("&");// 向新對象中添加var obj = {};for (var i = 0; i < parmArr.length; i++) {var item = parmArr[i].split("=");obj[item[0]] = item[1];}console.log(obj);return obj;}var ob=toObj(str);</script>

17.函數(shù)上下文

1.求下面函數(shù)的執(zhí)行結(jié)果？

<script>function fun(){return this.a+this.b;}var a=1;var b=2;var obj={a:3,b: fun(),//3，執(zhí)行到這一步時(shí)，會執(zhí)行fun()函數(shù)，符合函數(shù)名()的規(guī)則，所以this指代的是window對象fun:fun}var res=obj.fun();//6這里符合對象名.方法()的調(diào)用形式，所以this指代的是obj對象console.log(res);</script>

2.求函數(shù)的執(zhí)行結(jié)果？

//注意點(diǎn)：考慮到this.b和this.b()的區(qū)別// this.b表示獲取b后面的函數(shù)體// this.b()，表示調(diào)用b后面的函數(shù)，函數(shù)會被執(zhí)行//return 函數(shù)體時(shí)，函數(shù)體會被執(zhí)行 <script>var c=1;var obj={a:function(){var c=3;return this.b;//轉(zhuǎn)為obj.b,調(diào)用b后面的匿名函數(shù)，this指代window對象，},b:function(){var c=4;document.write(this.c)//window.c，所以結(jié)果為1},c:2};var obj1=obj.a();//符合規(guī)則一對象名.函數(shù)名()調(diào)用，this指代objobj1()</script>

3.上下文規(guī)則四題目？

<script>var a=1;var obj={a=2,//因?yàn)楹瘮?shù)是立即執(zhí)行函數(shù)，所以在預(yù)編譯時(shí)期，就會執(zhí)行這個(gè)函數(shù)，所以fun的值是return的那個(gè)函數(shù)fun=(function(){var a=this.a;//立即執(zhí)行函數(shù)的this表示window對象，所以找window對象中的全局變量a//返回這個(gè)函數(shù)，用于上面執(zhí)行了立即執(zhí)行函數(shù)，形成了閉包，記住了a的值等于1return function(){console.log(a+this.a);//}} )()}obj.fun();//3，a是閉包中的a，this.a：由于是對象名.方法名（）方式調(diào)用的，所以this代指的是obj</script>

4.上下文規(guī)則五題目？

<script>setInterval(obj.fun,2000)//調(diào)用fun的是定時(shí)器，所以fun函數(shù)中的this代指window對象setInterval(function(){obj.fun(),2000})//調(diào)用fun的是obj，所以fun函數(shù)中的this代指obj對象</script>

18.鼠標(biāo)移動生成小球

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color: black;}.ball{border-radius: 50%;position: absolute;}</style> </head> <body><script>// 小球類function Ball(x,y){// 傳入小球的圓心距離瀏覽器左上角的坐標(biāo)值this.x=x;this.y=y;//給定小球的初始半徑this.r=10;//小球的背景顏色this.color=colorArr[parseInt(Math.random()*5)];//調(diào)用初始化方法生成小球元素this.init();//把自己推入數(shù)組，這里的this不是類本身，而是new出來的實(shí)例對象arr.push(this);// 添加隨機(jī)的x和y的增量，實(shí)現(xiàn)小球隨機(jī)方向的移動，放在構(gòu)造函數(shù)中，是因?yàn)樵趧?chuàng)建實(shí)例之前就應(yīng)該給定一個(gè)確定的方向讓小球移動do{this.xadd=parseInt(Math.random()*10-5);this.yadd=parseInt(Math.random()*10-5);}while(this.xadd==0&&this.add==0);//透明度屬性this.opacity=1;}//初始化方法Ball.prototype.init=function(){//創(chuàng)建自己的dom元素this.dom=document.createElement('div');this.dom.className="ball";this.dom.style.width=this.r*2+"px";this.dom.style.height=this.r*2+"px";this.dom.style.left=this.x-this.r+"px";this.dom.style.top=this.y-this.r+"px";this.dom.style.backgroundColor=this.color;// 將該元素上樹到body元素中document.body.appendChild(this.dom); }// 小球狀態(tài)更新方法Ball.prototype.update=function(){// 位置改變this.x+=this.xadd;this.y+=this.yadd;//使小球的透明度減小this.opacity-=0.05;//半徑改變this.r+=0.02;this.dom.style.width=this.r*2+"px";this.dom.style.height=this.r*2+"px";this.dom.style.left=this.x-this.r+"px";this.dom.style.top=this.y-this.r+"px";this.dom.style.backgroundColor=this.color;this.dom.style.opacity=this.opacity;//如果小球的opacity為0，則刪除小球，釋放內(nèi)存if(this.opacity<0){// 刪除數(shù)組中的小球for(var i=0;i<arr.length;i++){if(arr[i]==this){arr.splice(i,1);}}//刪除dom元素中的小球document.body.removeChild(this.dom);}}// 把所有的小球?qū)嵗挤旁谕粋€(gè)數(shù)組中var arr=[];//創(chuàng)建一個(gè)顏色數(shù)組var colorArr=["#666fff","#aaabbb","#ccff66","#ff99cc","#ff6666"];//設(shè)置定時(shí)器，更新所有小球的實(shí)例setInterval(function(){//遍歷數(shù)組，調(diào)用小球的undate方法for(var i=0;i<arr.length;i++){arr[i].update();}},50)// 鼠標(biāo)指針的事件監(jiān)聽document.onmousemove=function(e){var x=e.clientX;var y=e.clientY;// 只要鼠標(biāo)移動就會產(chǎn)生一個(gè)新的小球隨機(jī)移動new Ball(x,y);}</script> </body> </html>

19.Date實(shí)現(xiàn)倒計(jì)時(shí)

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><h1 id="tag">2021年高考倒計(jì)時(shí)</h1><h2 id="tag2">2021年高考倒計(jì)時(shí)</h2><script>// 獲取2022年6月7號時(shí)間對象var gt = new Date("2022-06-21");// 設(shè)置定時(shí)器,每秒更新一次setInterval(function () {// 獲取當(dāng)前時(shí)間var nt = new Date();// 讓后面的時(shí)間減前面的時(shí)間，獲取的是時(shí)間戳var sy = gt - nt;//得到的是剩余時(shí)間戳,毫秒數(shù)// 獲取剩余天數(shù)syDay = parseInt(sy / (1000 * 60 * 60 * 24));//獲取減去天數(shù)后剩余的小時(shí)數(shù)syHours = parseInt(sy % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));//獲取減去上面剩余的分鐘數(shù)syMinutes = parseInt(sy % (1000 * 60 * 60) / (1000 * 60));// 獲取減去上面剩余的秒數(shù)sySeconds = parseInt(sy % (1000 * 60) / (1000));// 獲取顯示倒計(jì)時(shí)的dom元素var tags = document.getElementById("tag2");tags.innerText = "倒計(jì)時(shí)" + syDay + "天" + syHours + "小時(shí)" + syMinutes + "分" + sySeconds + "秒";},1000)</script> </body></html>

總結(jié)

以上是生活随笔為你收集整理的js常见简单编程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。