你见过雪飘人间吗

2024-02-27 01:50

文章标签 人间

本文主要是介绍你见过雪飘人间吗，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body {background-color: #000;/*防止出现向下滚动条*/overflow: hidden;}</style>
</head><body><img src="./05fc35c82f8feeec15eea3187c33dfc.jpg" style="height: 100%; width:100%;"><script>function snow() {//  1、定义一片雪花模板var flake = document.createElement('div');// 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺flake.innerHTML = '❅';flake.style.cssText = 'position:absolute;color:#fff;';//获取页面的高度 相当于雪花下落结束时Y轴的位置var documentHieght = window.innerHeight;//获取页面的宽度，利用这个数来算出，雪花开始时left的值var documentWidth = window.innerWidth;//定义生成一片雪花的毫秒数var millisec =10;//2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；setInterval(function() { //页面加载之后，定时器就开始工作//随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置var startLeft = Math.random() * documentWidth;//随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置var endLeft = Math.random() * documentWidth;//随机生成雪花大小var flakeSize = 3 + 20 * Math.random();//随机生成雪花下落持续时间var durationTime = 4000 + 7000 * Math.random();//随机生成雪花下落 开始 时的透明度var startOpacity = 0.7 + 0.3 * Math.random();//随机生成雪花下落 结束 时的透明度var endOpacity = 0.2 + 0.2 * Math.random();//克隆一个雪花模板var cloneFlake = flake.cloneNode(true);//第一次修改样式，定义克隆出来的雪花的样式cloneFlake.style.cssText += `left: ${startLeft}px;opacity: ${startOpacity};font-size:${flakeSize}px;top:-25px;transition:${durationTime}ms;`;//拼接到页面中document.body.appendChild(cloneFlake);//设置第二个定时器，一次性定时器，//当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；setTimeout(function() {//第二次修改样式cloneFlake.style.cssText += `left: ${endLeft}px;top:${documentHieght}px;opacity:${endOpacity};`;//4、设置第三个定时器，当雪花落下后，删除雪花。setTimeout(function() {cloneFlake.remove();}, durationTime);}, 0);}, millisec);}snow();</script>
</body>
</html>

这篇关于你见过雪飘人间吗的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！