<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" >
<meta name="description" content="" >
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;/*相对于父级的100% 父级是html*/
position: relative;/*相对定位 父级*/
overflow: hidden;
background: #222;
}
.balloon{
position: absolute;/*绝对定位*/
top: 0;
left: 0;
height: 160px;
width: 160px;
margin: 0 auto;
background: #faf9f9;
box-shadow: -8px -8px 80px -8px rgba(234,80,122,0.6) inset;/*横向 纵向 羽化 大小 颜色*/
border-radius:160px 160px 64px 160px;/*圆角属性 左上 右上 右下 左下 （顺时针）*/
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.balloon::after{/*伪元素 不存在的 css创建出来的元素**/
position: absolute;
bottom: 0;
right: 0;
content: ‘‘;/*开启伪元素*/
display: block;
width: 0;
height: 0;
border: 8px solid transparent;/*四边透明*/
border-right-color: rgba(234,98,122,.8);/*设置右边边框*/
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
</style>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js 基于原型的动态解释性 脚本语言
/**
* 1 .响应用户操作 点击鼠标
* 2 .操作页面DOM节点 增删改查 css样式
* 3 .数据交互 ajax json 正则表达式
* 4 .封装插件 框架 mvc mvvm augular vue node.js
*/
/**
* 1 .利用js动态生成div 并且初始化气球的坐标
* 1.生成几个
* 2.怎么生成
* 2 .气球动起来
* 1 .改变气球top
* 2 .在一定时间内一直减少top值
*
*
* 3 .点击气球，爆炸
* 1. 点击-放气动画
* 2. 删除
* 知识点： querySelector querySelectorAll （h5 api 兼容ie8）
* call 函数执行的时候 改变函数内部this指向为当前环境下的this
* bind 硬绑定当前延时触发函数的内部this指向为当前环境下的this
*
* 【进阶】 迭代 递归 函数 词法作用域
* */
var num = 10;/*气球数量*/
var wW = window.innerWidth;//浏览器宽度
var wH = window.innerHeight;
var bW = 160;//气球宽度
var timer = null;//初始化定时器
init();
timer = setInterval(move,30);
function init(){
for(var i = 0;i<10;i++){
var randomX = Math.floor(Math.random()*wW)-bW;
randomX = Math.max(0,randomX);//限制left最小为0
var oBalloon = document.createElement(‘div‘);
oBalloon.className = ‘balloon‘;//添加类名
oBalloon.style.left = randomX+‘px‘;
oBalloon.style.top = wH - bW + ‘px‘;
oBalloon.speed = Math.random()*4+1;//自定义属性
document.body.appendChild(oBalloon);//添加到body
oBalloon.onclick = function(){
boom.call(this,function(){
clearInterval(this.timer);//移除定时器
this.parentNode.removeChild(this);
});//call 转移this指向
//this.parentNode.removeChild(this);
}
}
}
/*
* 气球运动
*/
function move(){
var oBalloons = document.querySelectorAll(‘.balloon‘);
for(var i=0,len=oBalloons.length;i<len;i++){
oBalloons[i].style.top = oBalloons[i].offsetTop - oBalloons[i].speed+‘px‘;
}
}
function boom(callback){//气球放气动画
var This = this;
this.timer = setInterval(function(){//setInterval里面的this指向widown 相当于window.setInterval
if(this.offsetWidth<10){
console.log(‘delete‘)
callback&&callback.call(this);
}
this.speed = this.speed + 1;//速度递加
this.style.width = this.offsetWidth-10+‘px‘;//缩小
this.style.height = this.offsetHeight-10+‘px‘;
this.style.top = this.offsetTop-this.speed+‘px‘;//加速向上
}.bind(this),30);
}
</script>
时间： 2024-08-06 19:32:19