文章目錄

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

js算法題

1、求和計算器

用prompt和alert制作一個求兩個數和的計算器？

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

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

根據用戶輸入的值計算相應精度的π？

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

<script>// 根據用戶輸入的值，根據萊布尼茨計算公式計算πvar n=Number(prompt("請輸入一個值"));// 存放值的和，因為公式第一項是1，所以先加1var sum=1;// 存放每一項的值var item=1;for(var i=1;i<n;i++){// 每一項都是前邊項的基礎上再乘以一個i/(2i+1),item就是當前項的結果item*=(i/(2*i+1));// 用sum值加上每一項乘機的結果sum+=item;}// 萊布尼茨計算的是2分之π，所以結果要乘以2才得到的是πalert(sum*2);</script>

3.喇叭花數

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

<script>// 求斐波那契數列第n項的值：從第三項開始，每一項等于前兩項的和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%。計算出小慕工作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如何實現深克隆

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

5.對象問題

1.輸出執行結果？

• 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[找不到job這個變量]====>報錯：job is not defined</script>

2.引用數據類型改變指向地址問題？

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

3.對象內存創建順序問題？

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

6.全局與局部變量

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

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

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

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

7.BAT

1.判斷輸出結果？

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

2.判斷輸出結果？

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

• 訪問執行優先級高于賦值

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

8.2閉包的模擬私有變量？

• 核心要素是封裝，不能直接獲取函數中的私有變量，想要對私有變量進行操作，需要先定義相應的函數，否則操作不了。

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

8.3生成多個閉包時的運算結果？

<script>function fun(){var count=0;return function(){count=count+1;console.log(count);};}// 定義了兩個閉包，他們兩個互不關聯，都獲得了fun的初始值var fun1=fun();//定義一個新的fun閉包var fun2=fun();//定義一個新的fun閉包fun1();//1fun2();//1,因為他們兩個互不關聯，所以上面的count+1與fun2中的count無關fun2();//2,fun1()//2</script>

9.js實現鼠標劃過變色

1.js實現交叉顏色，并且鼠標劃上變色？

<!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.節點

10.1節點創建一個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節點var otb = document.getElementById("tb");//掛載到table節點for (i = 0; i < 20; i++) {//創建孤兒節點trvar otr = document.createElement("tr");for (j = 0; j < 13; j++) {// 創建孤兒節點tdvar otd = document.createElement("td");otr.appendChild(otd);}otb.appendChild(otr);}</script> </body>

11.事件

11.1文本域只能輸入30個字符，動態提示用戶剩余輸入字符個數

<!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>字數限制在30字內,<span>您還可以輸入<b>30</b>字</span></p><textarea id="text" cols="50" rows="70"></textarea><script>// 文本域標簽var otext=document.getElementById("text");//span標簽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="您已經超出了<b>"+remain+"</b>字";}}</script></body> </html>

11.2實現下拉框動態改變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">藍色</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="我沒有發生任何變化";odiv.style.background="white";}else{odiv.innerText="我是div";odiv.style.background=col;}}</script> </body>

12.數組去重

1.數組去重？

• 數組去重有三種方式：
  • 各數組項一一向后對比
  • 借用對象輔助判斷去重
  • 借用新數組放不重復數據

方式一：數組從左往右挑出每一個值，與后面的項一一對比

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

方式二：使用對象存儲已經存在的數組數據項，對象的屬性名和屬性值都是數組某個數據項的數據值，如果對象中存在這個屬性名，則代表數組中已經存在這個數據值了，后面在出現這個數據值，則是重復的值，就可以刪除

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

方式三：使用新數組接收不重復數據項

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

13.排序

1.冒泡排序實現？

<!-- 冒泡排序 -->/* 冒泡排序：目的：從小到大進行排序var ary=[2,1,5,8];// 兩兩進行比較，如果前者比后者大，就交換順序， 經過一輪比較之后，得到了一個最大值8//--------- 需要比較多少輪？ary.length-1 輪（因為最后一個數字不用比，就是最小的）// 每一輪我需要比較多少次？------ary.length-1-已比較的輪數var ary=[8,2,1,5];// 正常情況下，兩兩比較的次數： ary.length-1第一輪的：[2,1,5,8]；// 經過一輪比較得到了一個最大值8 比了三次第二輪的：[1,2,5,8]；//經過二輪比較得到了一個最大值5 比了兩次 ary.length-1-已比較的輪數 第三輪的：[1,2,5,8]； 第四輪 不用比了，已經得到三個最大值了，最后一個就是最小的 */<script>var ary=[2,1,5,8,5,221,3,2];var swap=0;// 比較的輪數for(var i=0;i<ary.length;i++){// 每輪比較的for循環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){// 做一個條件，如果傳入的數組的長度是0或者1，說明已經沒有比較的值了，就可以返回這個數組了if(ary.length<=1){return ary;}// 中間項的索引var centerIndex=Math.floor(ary.length/2);// splice的返回值是數組，拿到刪除的項得加索引0,這個是獲取中間值var centerValue= ary.splice(centerIndex,1)[0];// 設置左右兩個空數組var leftArr=[];var rightArr=[];// for循環,交換位置for(var i=0;i<ary.length;i++){// 如果遍歷的數小于中間數，就把這個數放在左邊if(centerValue>ary[i]){leftArr.push(ary[i]);}else{//否則放在右邊的數組中rightArr.push(ary[i]);}}// 最終獲得左右數組和中間值，將三個數組拼接// 左右兩個數組又能夠作為一個無序數組，進行快速排序，所以左數組和右數組仍需要調用函數return fast(leftArr).concat(centerValue, fast(rightArr));}alert(fast(ary));</script>

14.驗證碼

1.驗證碼如何實現？

<!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">獲取驗證碼</button><div id="code"></div><script>// 字母和數字的范圍let codeText = "1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";var obtn=document.getElementById("btn");var ocode=document.getElementById("code");function getCode(num,begin,end) {// 先判斷這三個數是否為未定義if(num==undefined){ num=4;}if(begin==undefined) {begin=0;}if(end==undefined) {end=codeText.length-1;}// 獲取一個在0-61的隨機索引var newCode = "";var indexArr=[];while(newCode.length<num){// 獲取0-61，包括61之間的一個隨機數var index =Math.round(Math.random() * (end-begin)+begin) ;// 如果已經出現了這個index，則重新選擇,實現不出現重復的數字if(!indexArr.includes(index)){indexArr.push(index);// 將隨機數的索引對應數據項放到新字符串中newCode += codeText.charAt(index);} }// for (let i = 0; i < num; i++) {// // 獲取0-61，包括61之間的一個隨機數// var index =Math.round(Math.random() * (end-begin)+begin) ;// // 如果已經出現了這個index，則重新選擇,實現不出現重復的數字// if(indexArr.includes(index)){// i--;// continue;// }// indexArr.push(index);// // 將隨機數的索引對應數據項放到新字符串中// newCode += codeText.charAt(index);// }return newCode;}ocode.innerText=getCode();// 設計按鈕的點擊事件obtn.onclick=function(){ocode.innerText=getCode();}</script></body></html>

15.時間格式轉換

1.如何將"2019-8-18 12:32:18"轉換為"2019年8月18日 12時32分18秒"?

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

16.網址參數轉對象屬性

1.將網址中的問號后面的參數截取為對象中的屬性？

<script>var str = "http://www.mi.com/?id=100&price=180";function toObj(str) {// 首先獲取?出現的位置var qusindex = str.indexOf("?");console.log(qusindex);// 截取？后面的字符串var parm = str.slice(qusindex + 1);// 將字符串根據&分割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.函數上下文

1.求下面函數的執行結果？

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

2.求函數的執行結果？

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

3.上下文規則四題目？

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

4.上下文規則五題目？

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

18.鼠標移動生成小球

<!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){// 傳入小球的圓心距離瀏覽器左上角的坐標值this.x=x;this.y=y;//給定小球的初始半徑this.r=10;//小球的背景顏色this.color=colorArr[parseInt(Math.random()*5)];//調用初始化方法生成小球元素this.init();//把自己推入數組，這里的this不是類本身，而是new出來的實例對象arr.push(this);// 添加隨機的x和y的增量，實現小球隨機方向的移動，放在構造函數中，是因為在創建實例之前就應該給定一個確定的方向讓小球移動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(){//創建自己的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); }// 小球狀態更新方法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，則刪除小球，釋放內存if(this.opacity<0){// 刪除數組中的小球for(var i=0;i<arr.length;i++){if(arr[i]==this){arr.splice(i,1);}}//刪除dom元素中的小球document.body.removeChild(this.dom);}}// 把所有的小球實例都放在同一個數組中var arr=[];//創建一個顏色數組var colorArr=["#666fff","#aaabbb","#ccff66","#ff99cc","#ff6666"];//設置定時器，更新所有小球的實例setInterval(function(){//遍歷數組，調用小球的undate方法for(var i=0;i<arr.length;i++){arr[i].update();}},50)// 鼠標指針的事件監聽document.onmousemove=function(e){var x=e.clientX;var y=e.clientY;// 只要鼠標移動就會產生一個新的小球隨機移動new Ball(x,y);}</script> </body> </html>

19.Date實現倒計時

<!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年高考倒計時</h1><h2 id="tag2">2021年高考倒計時</h2><script>// 獲取2022年6月7號時間對象var gt = new Date("2022-06-21");// 設置定時器,每秒更新一次setInterval(function () {// 獲取當前時間var nt = new Date();// 讓后面的時間減前面的時間，獲取的是時間戳var sy = gt - nt;//得到的是剩余時間戳,毫秒數// 獲取剩余天數syDay = parseInt(sy / (1000 * 60 * 60 * 24));//獲取減去天數后剩余的小時數syHours = parseInt(sy % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));//獲取減去上面剩余的分鐘數syMinutes = parseInt(sy % (1000 * 60 * 60) / (1000 * 60));// 獲取減去上面剩余的秒數sySeconds = parseInt(sy % (1000 * 60) / (1000));// 獲取顯示倒計時的dom元素var tags = document.getElementById("tag2");tags.innerText = "倒計時" + syDay + "天" + syHours + "小時" + syMinutes + "分" + sySeconds + "秒";},1000)</script> </body></html>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。