学习Bootstrap第一天
今天是学习java的第65天,也是学习Bootstrap框架的第一天
今天给大家分享一款自写的表白神器
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表白神器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
<style>
body{
background-color: black;
position: relative;
}
.a{
color: yellow;
position: absolute;
display: inline-block;
width: 150px;
height: 5px;
}
.xin{
color: red;
position: absolute;
}
</style>
</head>
<body>
<script src="../js/jquery-1.4.2.min.js"></script>
<script>
//开启定时器添加心图片
let num = 0;
setInterval(function () {
let img = $("<span class='glyphicon glyphicon-heart xin'></span>")
//设置心的随机大小(5-15)
let size = parseInt(Math.random()*5)+15;
//获取窗口的宽高,方便用于设置心的位置
let w = $(window).width();
let h = $(window).height();
//设置随机left值 取值范围(窗口宽-心宽度)
let left = parseInt(Math.random()*(w-size));
//将size赋值给心,让心随机的大小变化
//将left赋值给心,让心的随机生成位置范围固定
img.css({"font-size":size+"px","left":left+"px"});
$("body").append(img)
//让心往下移动,下落时间用随机数控制,并且落地后淡化
img.animate({"top":h-50+"px"},size*100).fadeOut(1500,function () {
img.remove();//淡化后删除
})
//添加人名,当定时器每调用十次,产生一次人名
if(num%10==0){
let name = $("<span class='a'>XX</span>");
let size1 = parseInt(Math.random()*5)+10;
let left = parseInt(Math.random()*(w-size1));
name.css({"font-size":size1+"px","left":left+"px"});
$("body").append(name)
name.animate({"top":h-80+"px"},size1*500).fadeOut(500,function () {
name.remove();//淡化后删除
})
}
num++;
},50)
</script>
</body>
<script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
</html>
以上就是非常简单的一款表白神器,希望各路大神多多指导。