最近,在教學生使用js的基本操作,為了練習js的基本作用,特地寫了乙個噴泉效果,**如下:
頁面**:
particle.js**如下:
window.onload = function(), 50);
function particle(x, y){
// 原座標
this.x = x;
this.y = y;
// 初始出現的改變的y的值
this.yval = -5;
// 改變的x的值
this.xval = math.random() * 8 - 4;
// 定義乙個下降的重力加速度
this.g = 0.1;
// 更新位置
this.updatedata = function(){
// x值的變化
this.x = this.x + this.xval;
// y值的變化
this.y = this.y + this.yval;
// 每次改變y值速度的變化
this.yval = this.yval + this.g;
// 生成乙個隨機顏色
context.fillstyle = "#" + math.floor(math.random() * 0xffffff).tostring(16);
// 將更新位置後的圓繪製出來
this.draw();
// 繪圖的方法
this.draw = function(){
// 開始畫圖
context.beginpath();
// 畫圓
context.arc(this.x, this.y,5,0,math.pi * 2, false);
// 結束畫圖
context.closepath();
// 填充
context.fill();
js實現簡單瀑布流效果
1.瀑布流,雖然是一種經典的前端效果,但經常不用都忘了它的寫法。前些天需要時,一直忙著找外掛程式,但外掛程式並不是很友好,免費的達不到效果,花金幣又感覺很不值。有時間還不如自己來,又是自己就隨意寫了乙個,還好能勉強過關。var left top left div div last child off...
原生js實現簡單動畫效果
實現動畫效果可以用jquery提供的animate方法,或一些外掛程式來實現,但是隨著前端元件化開發的流行,jquery大量的dom操作已經顯得十分多餘,正在逐漸從前端技術棧中被淘汰,下面我們使用原生js實現簡單的勻速動畫效果和緩動效果 勻速動畫實現水平移動 css樣式 box line400 li...
使用js實現時鐘效果
首先在單元格中輸入下面的 然後使用html顯示內容。這個寬高可以根據自己需要填。然後在預覽方式中新增載入結束事件 var dom document.getelementbyid view var ctx dom.getcontext 2d var width ctx.canvas.width var...