会动的水晶球

水晶球"/>

会动的水晶球

        * {/* 修改标签和模型类型 */box-sizing: border-box;}html {height: 100%;}body {margin: 0;height: 100%;/* 径向渐变 */background: radial-gradient(circle, #999, #000, #000);display: flex;justify-content: center;align-items: center;}#ball {width: 450px;height: 450px;border: 10px solid #000;border: 10px solid rgba(122, 126, 141, 0.7);border-radius: 50%;margin: 0 auto -60px;background-image: url('img/tree.png');background-size: 120%;background-repeat: no-repeat;position: relative;/* 对于位置，参数1左右方向控制，参数2是垂直方向控制 */background-position: center bottom;/* 将溢出的内容隐藏 */overflow: hidden;}.fla {width: 20px;height: 20px;background: #fff;border-radius: 50%;/* 外侧阴影 */box-shadow: 0 0 20px #fff;position: absolute;}#base{width: 100%;position: relative;z-index:3;}</style><main><div id="ball"></div><img id="base" src="img/base.png" alt=""></main><script>var a = 1;//var 声明变量的关键字// 声明：假设新建，让某个东西从无到有// 变量：可以变化的一个符号// 关键字:编程环境中默认具有特殊含义的词语// a 自定义的变量名称// = 赋值号（不是等号——），作用是将右侧的值传递给左侧的变量或属性// 上面整体称为，语句，结束时一般使用；结尾，表示书写结束// 调试语句（方法），用于查看变量的值// console 控制台 log 日志console.log(a);var b = 3;var c = a + b;console.log(c);// 函数// 函数声明关键字 自定义函数名（添加参数，可选，数量不限）{  包装的代码片段}function fun() {console.log('fun 函数执行了')}// 函数调用fun();// -------------------------------------------------------------------// 要在一个指定的标签内，需要几步；// 1.获取一个指定的容器标签// 2.新建一个指定类型的新标签// 3.将新标签加入容器标签var ball = document.getElementById('ball');function snow() {var flake = document.createElement('div');console.log(flake);// 给新标签增加样式，增加类名// 添加静态样式flake.classList.add('fla');//  追加字标签 append 追加ball.appendChild(flake);// 下落过程// 1.随机的出现在球内的某一个位置// 使用定位方式控制位置// 2.开始下落// 完善动态样式// 获取动态范围的数字// 随机+范围// 获取随机数[0.1)之间的随机小数// var ran = Math.random();// console.log(ran);// 获取球的宽高// client 可视区var w = ball.clientWidth;var h = ball.clientHeight;console.log(w, h)// 换算指定范围内的动态整数// floor 向下取整var _left = Math.floor(w * Math.random());var _top = Math.floor(h * Math.random());// 将得到的合适的随机数作用在标签样式上flake.style.left = _left + 'px';flake.style.top = _top + 'px';// 补充随机大小flake.style.transform = 'scale(' + Math.random() + ')';//不停地增大 top 样式值，实现下落动作// 使用计时器方法实现不停的执行某个动作 interval 间隔// 参数1：指定需要不停制定的动作，参数2：指定时间间隔setInterval(function () {// 增大 top 样式_top = _top + 1;// 临界判断if (_top > h) {_top = -20;// 在重新下落时，在随机一个大小flake.style.transform = 'scale(' + Math.random() + ')';}// 将增大后的新值再次作用在样式上flake.style.top = _top + 'px';}, 1000 / 60);}
// 循环执行，控制一定的次数
for(var i = 0; i < 30;i++){snow();
}
</script>