表白神器！

子傲学Java

已于 2022-08-11 18:39:15 修改

阅读量366

点赞数 3

文章标签： jquery javascript bootstrap

于 2020-08-04 19:28:45 首次发布

本文链接：https://blog.csdn.net/weixin_48620689/article/details/107796123

版权

学习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>

以上就是非常简单的一款表白神器，希望各路大神多多指导。

子傲学Java

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
表白神器！

学习Bootstrap第一天今天是学习java的第65天，也是学习Bootstrap框架的第一天今天给大家分享一款自写的表白神器先上效果图代码如下<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表白神器</title><meta name="viewport" content="width=device-width,initial-scale=1
复制链接

扫一扫