使用ES6實現乙個絢麗的滑鼠滑動效果

2021-08-16 06:41:57 字數 946 閱讀 9225

通常我們在訪問一些**的時候,進行滑鼠滑動的時候,會出現非常絢麗的效果,下面我們就用es6的方式,編寫乙個簡單的滑鼠滑動的效果;

上面的是這個demo的html的標籤,建立了乙個canvas標籤,其他的處理我們會放在js中進行,我會把所有的js**都放在下面,可以參照**:

// 0.定義乙個取兩個數之間的額隨機數的方法

let newmath = (x, y) =>

//1.生成乙個隨機的色值

let randomrgbcolor = () => ,$,$,.5)`; //返回rgb(r,g,b,a)格式顏色

}// 2.獲取當前的畫布

const canvas = document.getelementbyid('canvas');

const ctx = canvas.getcontext('2d');

canvas.width = 1000;

canvas.height = 600;

canvas.style.backgroundcolor = '#000';

// 3.建立小球的類

class ball

render()

}//4. 繪製移動的小球

class moveball extends ball

update() }}

//5.儲存變化的小球

let ballarr = ;

//6.監聽滑鼠的移動

canvas.addeventlistener('mousemove',function(e) )

//7. 開啟定時器,並開始畫圖

setinterval(function()

},50)

通過上面的建立,我們就可以實現我們需要的效果,具體表現可自行嘗試;

用es6實現乙個簡單的promise

promise是乙個面試經常會問的問題,在這裡我們可以通過es6的語法實現乙個簡單的promise,面試能寫出來基本就沒問題了 const pending pending const resolved resolved const rejected rejected class mypromise ...

來自乙個react SPA的總結 es6的應用

這篇主要總結一些,es6在react中的應用,並沒有囊括所有,只是總結一些本人平常沒有理解的知識點 1.es6 arrow functions es6的箭頭函式在這個簡單project中用到多次,下面以乙個對比 塊展示一下 old way with es5 componentdidmount fun...

es6 封裝乙個基礎的表單驗證

設計乙個通用的表單驗證,如果後期表單中新增了更多的需求,不需要更改之前的 邏輯,最好不要改之前的 需要加什麼直接加就好了。此表單驗證最好返回乙個函式,在api設計這塊我選擇在每個表單項上新增valid屬性,在驗證中通過檢視是否有valid屬性 valid屬性的內容來獲取需要驗證的表單,並且返回驗證的...