JavaScript1.6陣列方法的擴充套件
var tmp = [1, 2, 3, 4, 5, 3]; console.log('indexOf:找出陣列中某一物件的下標，如果沒有則為-1'); console.log(tmp.indexOf(3) == 2); console.log(tmp.indexOf(8) == -1); console.log('lastIndexOf：找出陣列中某一物件最後一次出現的下標'); console.log(tmp.lastIndexOf(3) == 5); console.log('forEach：對陣列的每個元素呼叫函式'); tmp.forEach(alert); console.log('every:只當所有物件都返回true則為true'); console.log(tmp.every(function (num) { return num<6; })); console.log('some:只要其中一個物件返回true則為true'); console.log(tmp.some(function (num) { return num>6; })); console.log('filter:只保留滿足某一具體條件的物件來過濾陣列,返回滿足條件的陣列'); console.log(tmp.filter(function (num) { return num>3; })); console.log('map:將陣列中所有物件轉換為另一套物件，轉換規則由傳入的函式來定'); console.log(tmp.map(function (num) { return num + 2; }));
執行結果如下圖所示：
給陣列賦值簡單的方式
var array = []; for (var i = 0; i < 10; i++) {//這是傳統的方式給陣列賦值 array.push(i); } var arr=[i for ( i=0; i<10; i++ )];//同樣簡單的語句可以實現上述賦值功能 var array1=[]; for (var key in obj) {//傳統的通過遍歷的方式將物件obj的屬性放到陣列中 array1.push(key); } var arr1=[key for (key in obj)];//同樣一句簡單的話可以實現上述物件賦值功能
let的簡單介紹
大家都知道js裡面是沒有塊級作用域的。
var test = 10; let (test=20){ alert(test);//20; } alert(test);//10 var test1=10; alert(let(test1=20) test1);//20 alert(test1);//10 var test3=10; if(test3==10){ let newTest=20; test3+=newTest; } alert(test3);//30 alert(newTest);//報錯 newTest未定義 for (let i = 0; i < 10; i++) { //alert(i); } alert(i);//報錯 i未定義
解析式賦值
var a = 10, b = 20; [b, a] = [a, b];//交換兩個變數的值 alert(a + '|' + b);//20|10 function test() { return ["John", "October"]; } var [name,month]=test();//把函式返回的資料解析為兩個變數 alert(name+'|'+month);//John|October var {name:myName}={name:"John"}; alert(myName);//John var users=[ {name:"John",month:"October"}, {name:"Bob",month:"December"}, {name:"Jame",month:"May"}, ]; for ( let { name: name, month: month } in users) { alert(name+" was born in "+month); }
利用Canvas製作時鐘
介面HTML如下所示：
<canvas id="demoCanvas" width="150" height="150"> <p>您還在上個世紀吧，現在都html5了，您還在ie6時代？</p> </canvas>
Script如下：
function clock() { //獲得當前時鐘 var now = new Date(), sec = now.getSeconds(), min = now.getMinutes(), hr = now.getHours(); hr = hr >= 12 ? hr - 12 : hr; var ctx = document.getElementById('demoCanvas').getContext('2d');//獲得繪圖區域 ctx.save(); ctx.clearRect(0,0,150,150);//初始化繪圖canvas ctx.translate(75, 75);//將原點移到75,75 ctx.scale(0.4, 0.4);//將所有操作的效果縮小到0.4 ctx.rotate(-Math.PI / 2);//讓指標開始指向12點 ctx.strokeStyle = 'black';//初始化繪圖屬性 ctx.fillStyle = 'black'; ctx.lineWidth = 8; ctx.lineCap = 'round'; ctx.save();//小時刻度 ctx.beginPath(); for (var i = 0; i < 12; i++) {//每小時一個 ctx.rotate(Math.PI / 6);//將canvas旋轉一週的1/12 一週為2*PI ctx.moveTo(100, 0);//將遊標往canvas外側移動一些 ctx.lineTo(120, 0);//繪製長20px線 } ctx.stroke(); ctx.restore(); ctx.save(); ctx.lineWidth = 5;//初始化繪圖屬性 ctx.beginPath(); for (var i = 0; i < 60; i++) {//分鐘刻度 if (i%5!=0) {//除去那些整點上的分鐘 ctx.moveTo(117, 0);//將遊標移遠一些 ctx.lineTo(120, 0);//繪製短線 } ctx.rotate(Math.PI / 30);//將canvas再旋轉1/60圓周 } ctx.stroke(); ctx.restore(); ctx.save();//繪製時針 ctx.rotate((Math.PI / 6) * hr + (Math.PI / 360) * min + (Math.PI / 21600) * sec);//旋轉方向 ctx.lineWidth = 14; ctx.beginPath(); ctx.moveTo(-20, 0);//將時針開頭處移動到稍稍偏離中心的位置 ctx.lineTo(80, 0);//在小時刻度附近繪製 ctx.stroke(); ctx.restore(); ctx.save();//繪製分針 ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec); ctx.lineWidth = 10; ctx.beginPath(); ctx.moveTo(-28, 0);//分針要更長一些 所以要更偏離中心一些 ctx.lineTo(112, 0);//繪製的長一些 ctx.stroke(); ctx.restore(); ctx.save();//繪製秒針 ctx.rotate(sec * Math.PI / 30);//旋轉到當前秒針位置 ctx.strokeStyle = '#D40000';//這根錢接近紅色並且比其它指標都細 ctx.fillStyle = '#D40000'; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(-30, 0);//偏離中心更遠 ctx.lineTo(83, 0);//線段更短 ctx.stroke(); ctx.restore(); ctx.save();//繪製藍色圓圈 ctx.lineWidth = 14;//邊框足夠粗 藍色 ctx.strokeStyle = '#325FA2'; ctx.beginPath(); ctx.arc(0, 0, 142, 0, Math.PI * 2, true);//繪製五個完整的圓 半徑為142 ctx.stroke(); ctx.restore(); ctx.restore(); } window.onload = function () { clock();//繪製時鐘 setInterval(clock, 1000);//此後每秒重繪一次時鐘 }
上述程式碼的效果圖如下所示：
利用canvas模擬地球圍繞太陽旋轉
介面HTML如下所示：
<canvas id="canvas" height="300" width="300"> </canvas> <div style="display:none;"> <img src="img/sun.jpg" id="sun" /> <img src="img/moon.png" id="moon" /> <img src="img/earch.png" id="earch" /> </div>
Script如下：
var imgs = { sun: null, moon: null, earch: null };//初始化要使用的一系列影象 window.onload = function () { for (var i in imgs) {//從文件中載入所有的影象 imgs[i] = document.getElementById(i); } setInterval(draw, 100);//每秒繪製10次 } function draw() { var time = new Date();//獲得所需的時間間隔 var s = ((2 * Math.PI) )/ 6 * time.getSeconds(); var m = ((2 * Math.PI)) / 6 * time.getMilliseconds(); var ctx = document.getElementById('canvas').getContext('2d');//獲得canvas的繪圖上下文 ctx.clearRect(0, 0, 300, 300);//清空canvas ctx.globalCompositeOperation = 'destination-over';//新內容總在舊內容之下繪製（以實現陰影） ctx.save(); ctx.translate(150, 150);//在150,150繪製 ctx.rotate((s + m) / 10);//將canvas向地球的位置旋轉 ctx.translate(105, 0);//向外移動105畫素 ctx.fillStyle = 'rgba(0,0,0,0,4)';//填充陰影 半透明狀態 ctx.strokeStyle = 'rgba(0,153,255,0.4)'; ctx.fillRect(0, -12, 50, 24);//繪製陰影區域 ctx.drawImage(imgs.earch, -12, -12);//繪製地球 ctx.save(); ctx.rotate(s + m);//相對地球的旋轉來轉動canvas ctx.translate(0, 28.5);//將月球放入“軌道” ctx.drawImage(imgs.moon, -3.5, -3.5);//繪製月球圖案 ctx.restore(); ctx.restore(); ctx.beginPath();//繪製地球軌道 ctx.arc(150, 150, 105, 0, Math.PI * 2, false); ctx.stroke(); ctx.drawImage(imgs.sun, 0, 0);//繪製靜態的太陽 }