引言：作爲一名優秀的程序猿，在生活中總要給自己心愛的人一些小驚喜，今天小編來教一下大家如何用HTML5來製作一個浪漫的告白氣球表白頁面
具體功能有
1.氣球的隨機移動
2.照片的隨機產生
3.浪漫的唯美音樂
代碼如下
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>告白氣球</title>
<style type="text/css">
body,html{
width: 100%;
height: 100%;
background-color: #000;
}
div{
position: absolute;
border-radius: 50%;
}
#txt{
position: relative;
width: 400px;
height: 100px;
margin: 300px 600px;
font-size: 50px;
z-index: 1000;
}
</style>
</head>
<body>
<div id="txt">
<p>老婆我愛你!</p>
</div>
<embed src="mp3/周杰倫 - 告白氣球.mp3" autostart="true" loop="true" hidden="true"></embed>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
//照片
var n = 1;
var t =setInterval(function(){
var b = new Balloon("url(image/img"+n+".jpg)");
//繪製氣球
b.drawBalloon(document.body);
//氣球動起來
b.run();
n++;
if(n>3){
clearInterval(t);
}
},3000);
//氣球
for (var i =0; i<=30;i++){
//創建氣球對象
var b = new Balloon();
//繪製氣球
b.drawBalloon(document.body);
//氣球動起來
b.run();
}
</script>
</body>
</html>
js部分：
//要使用面向對象的思維來開發
//定義一個氣球對象
function Balloon(pic){
//盒子
this.div=document.createElement("div");
//初始位置
this.left = randomRange(0,1000);
this.top = randomRange(0,600);
//背景顏色
if(pic == null){
this.bg = randomColor();//0-255
//半徑 範圍20~80
this.r=Math.random()*60+40;
//運行速度
this.speedX = randomRange(-5,5);
this.speedY = randomRange(-5,5);
}else{
this.bg = pic;
this.r=80;
//運行速度
this.speedX = randomRange(-3,3);
this.speedY = randomRange(-3,3);
}
}
//繪製氣球 原型概念
Balloon.prototype.drawBalloon = function(parent){
this.parent = parent;
var style = this.div.style;
this.div.style.width = this.r * 2 + "px";
this.div.style.height = this.r * 2 + "px";
style.left = this.left + "px";
style.top = this.top + "px";
style.background = this.bg;
parent.appendChild(this.div);
}
//讓氣球動起來
Balloon.prototype.run = function(){
//獲取父容器寬高
var maxLeft = this.parent.offsetWidth - this.r * 2;
var maxTop = this.parent.offsetHeight - this.r * 2;
var ts = this;
//定時器
setInterval(function(){
//獲取左邊移動的距離
var left = ts.div.offsetLeft + ts.speedX;
//獲取上邊移動的距離
var top = ts.div.offsetTop + ts.speedY;
//判斷邊界位置
if(left <= 0){
left = 0;
ts.speedX *= -1;
}
if(top <= 0){
top = 0;
ts.speedY *= -1;
}
if(left >= maxLeft){
left = maxLeft;
ts.speedX *= -1;
}
if(top >= maxTop){
top = maxTop;
ts.speedY *= -1;
}
//開始移動
ts.div.style.left = left + "px";
ts.div.style.top = top + "px";
},20);
}
//封裝一個指定範圍的隨機函數
function randomRange(min,max){
return Math.random()*(max-min)+min;
}
//封裝隨機顏色
function randomColor(){
var r = randomRange(0,255);
var g = randomRange(0,255);
var b = randomRange(0,255);
var a = randomRange(0,1);
return "rgba("+r+","+g+","+b+","+a+")";
}
PS:H5中的音樂播放<audio></audio>標籤在谷歌瀏覽器中可能出現不兼容問題；解決方案：更換瀏覽器，
或者使用<embed></embed>標籤來存放音樂。