标签：body style snowDiv 雪花 案例 飘落 document Math
使用DOM节点操作
1、周期性创建雪花
setInterval()
2、雪花出现的位置随机
function rand(m,n){return Math.floor(Math.random() * (n-m+1)) + m}
document.documentElement.clientWidth || document.body.clientWidth
3、控制雪花向下飘（移动的步径）
var step = 1;
4、移除超出窗口高度的雪花元素
document.documentElement.clientHeight || document.body.clientHeight
==================具体代码如下所示======================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪花飘落特效实现</title>
<style>
*{
margin:0;
padding:0;
}
body{
width: 100%;
height: 100%;
overflow: hidden;
background-image: url('./images/snow.jpg');
}
</style>
</head>
<body>
</body>
<script>
//获取随机整数函数
function rand(m,n){
return Math.floor(Math.random() * (n - m + 1)) + m;
}
function setStyle(snowDiv){
snowDiv.innerHTML = "❄";
snowDiv.style.color = "#fff";
snowDiv.style.position = "absolute";
snowDiv.style.left = rand(0,document.documentElement.clientWidth || document.body.clientWidth) + 'px';
snowDiv.style.top = rand(0,200) + 'px';
snowDiv.style.fontSize = rand(16,50) + 'px';
snowDiv.style.opacity = Math.random();
document.body.appendChild(snowDiv);
}
//周期性创建雪花
setInterval(function(){
var snowDiv = document.createElement('div');
setStyle(snowDiv);
//设置雪花飘落的步径
var step = 1;
var run = setInterval(function(){
var newTop = snowDiv.offsetTop + step;
if(newTop >= document.documentElement.clientHeight || document.body.clientHeight){
document.body.removeChild(snowDiv);
clearInterval(run);
}
snowDiv.style.top = newTop + 'px';
},20)
},100)
</script>
</html>
标签：body,style,snowDiv,雪花,案例,飘落,document,Math 来源： https://www.cnblogs.com/sherryStudy/p/dom_snow.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。