引言:作为一名优秀的程序猿,在生活中总要给自己心爱的人一些小惊喜,今天小编来教一下大家如何用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>标签来存放音乐。