原生JS實現愛心氣球隨機飄落

原理:

.給定乙個寬高的div設定背景顏色；

在盒子的上方建立隨機個愛心；

讓隨機速度 隨機左右方向 垂直向下落；

大致原理結構圖

**如下：內附詳細注釋

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
*.box 
<
/style>
<
/head>
="box"
>
<
/div>
<
/body>
function
snowflake()
; snowflake.prototype.
init
=function()
px;height:
$px;position:absolute;left:
$px;top:
$px;`
;//隨機產生正負號，針對水平方向(實現隨機左右移動)。
let sign = math.
random()
>
0.5?
'-':'';
//設定隨機左右移動的速度 
let speedx =
parseint
(sign +
this.sj
(1,3
));//設定隨機的垂直移動的速度 
let speedy =
this.sj
(2,4
);//利用計時器,不斷的給隨機的left和top賦值，從而達到愛心飄落的感覺
creatimg.timer =
setinterval((
)=>
//賦值愛心的位置
creatimg.style.left = leftwz +
"px"
; creatimg.style.top = topwz +
"px";}
,1000/60
);};
//呼叫
snowflake.prototype.
creat
=function()
,50);
//50毫秒建立乙個隨機位置愛心，1秒建立20個。
}//封裝乙個可以min到max的隨機數
snowflake.prototype.sj=
function
(min, max)
//呼叫
let s1 =
newsnowflake()
; s1.
creat()
;<
/script>
<
/html>效果圖：
小總結：

原生js實現Ajax

一般來說，大家可能都會習慣用jquery提供的ajax方法，但是用原生的js怎麼去實現ajax方法呢？jquery提供的ajax方法 ajax success function error function 原生js實現ajax方法 var ajax obj.send post function u...

原生js實現Ajax

ajax success function error function 原生js實現ajax方法 var ajax xhr.send datat應為 a a1 b b1 這種字串格式，在jq裡如果data為物件會自動將物件轉成這種字串格式 post function url,data,fn xhr...

原生js實現Ajax，JSONP

利用script標籤可以跨域請求資源解決跨域問題。詳細解釋可以看徹底弄懂跨域問題 原生js實現ajax function ajax params params.data params.data var json params.jsonp jsonp params json params 判斷是jso...