基于JavaScript+css写一个简单的h5动态下雨效果

文章目录

什么是前端
展示效果
JavaScript是什么？
步骤
- 1.html
- 2.css
- 3.js

什么是前端

前端它是一个工作，它的工作领域是浏览器，它即要跟美工、设计打交道又要懂点后台代码，知道ajax怎么从后台拿数据，接口怎么调用，最主要的是把美工的图合成完成的网页呈现在用户面前，需要实现网页的交互效果。

JavaScript是什么？

JavaScript （通常缩写为 JS ）是一种高级的、解释型的编程语言。. JavaScript是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程式设计，命令式编程，以及函数式编程。. 它提供语法来操控文本、数组、日期以及正则表达式等，不支持 I/O ，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。. 它已经由ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。. 它被世界上的绝大多数网站所使用，也被世界主流浏览器（ Chrome 、 IE 、 Firefox 、 Safari 、 Opera ）支持。

展示效果

步骤

1.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js实现下雨特效</title><link rel="stylesheet" href="css/1.css">
</head>
<body><div class="content"><div id="rainBox"></div></div><script src="js/1.js" type="text/javascript"></script>
</body>
</html>

2.css

*{padding: 0;margin: 0;
}
.content{width: 100vw;height: 100vh;background:url(../img/1.jpg) center center no-repeat;background-size:cover;
}
#rainBox{position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;pointer-events: none;
}
.rain{position: absolute;width: 2px;height: 50px;background: linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.6));
}

3.js

const box=document.getElementById('rainBox');

以上，用绑定id的形式把‘rainBox’绑定

let boxHeight=box.clientHeight;

以上，自动获取box窗口的最新高度

let boxWidth=box.clientWidth;

以上，自动获取box窗口的最新宽度

window.onload=function(){boxHeight=box.clientHeight;boxWidth=box.clientWidth;
}

以上，这里触发一个onload函数，对象为window，并设置获取的box窗口的最新的宽和高

const rain=document.createElement('div');

以上，使用js的创建动态生成层方法，无需改变html代码创建一个div，并且赋值给常量rain

rain.classList.add('rain');

以上，用js添加新的类名写法，给上面定义的常量rain来创建一个calss类名

rain.style.top=0;

以上，返回定位元素的顶部位置

rain.style.left=Math.random()*boxWidth+'px'

以上，利用random随机数，来随机刷新雨点的位置

rain.style.opacity=Math.random();box.appendChild(rain);

以上，随机雨点透明度

let race=1;const timer=setInterval(()=>{if(parseInt(rain.style.top)>boxHeight){clearInterval(timer);box.removeChild(rain)}race++;rain.style.top=parseInt(rain.style.top)+race+'px'},20)},50)

以上，每隔一段时间雨点落下

注意：下面的代码块中有详细的注释（希望能帮助理解）

const box=document.getElementById('rainBox');
//用绑定id的形式把‘rainBox’绑定let boxHeight=box.clientHeight;
//自动获取box窗口的最新高度let boxWidth=box.clientWidth;
//自动获取box窗口的最新宽度window.onload=function(){boxHeight=box.clientHeight;boxWidth=box.clientWidth;
}
//这里触发一个onload函数，对象为window，并设置获取的box窗口的最新的宽和高//每隔一段时间添加雨点
setInterval(()=>{const rain=document.createElement('div');//使用js的创建动态生成层方法，无需改变html代码创建一个div，并且赋值给常量rainrain.classList.add('rain');//用js添加新的类名写法，给上面定义的常量rain来创建一个calss类名rain.style.top=0;//返回定位元素的顶部位置//利用random随机数，来随机刷新雨点的位置rain.style.left=Math.random()*boxWidth+'px'//随机雨点透明度rain.style.opacity=Math.random();box.appendChild(rain); //每隔一段时间雨点落下  let race=1;const timer=setInterval(()=>{if(parseInt(rain.style.top)>boxHeight){clearInterval(timer);box.removeChild(rain)}race++;rain.style.top=parseInt(rain.style.top)+race+'px'},20)},50)

基于JavaScript+css写一个简单的h5动态下雨效果相关推荐

用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
用HTML、CSS写一个酷炫的动态搜索框
用HTML.CSS写一个酷炫的动态搜索框可伸展的动态搜索框! 复制粘贴即可用! HTML部分: <!DOCTYPE html> <html lang="en"& ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
HTML+CSS写一个简单的网页界面
学习了HTML和CSS入门的基本命令后,写出来一个简单的登录网页界面,可以跳转.登录. 主界面代码(log.html) <!DOCTYPE html> <html><he ...
用 html+JavaScript+CSS 写一个全屏时钟
先上效果图来看看代码和原理首先,要能够直接双击运行,不依赖任何的环境或浏览器,就需要引进一个新概念--Microsoft ® HTML 应用程序主机. HTML应用程序它位于Windows系统目 ...
纯HTML、CSS写一个简单的水滴特效，水滴里面可加图标
CSS写水滴特效,里面可加图标代码如下(示例): HTML部分 <!DOCTYPE html> <html lang="en"> <head> ...
基于面向对象来写一个简单的贪吃蛇小游戏（代码可直接用）
分析一下用到的对象(这个案例的地图过于简单,可以不用创建为对象) 食物对象(food) 蛇对象(snake) 游戏对象(game) 1.food对象属性 :x, y, ...
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码学生个人html静态网页制作成品代码
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
用HTML和css写一个简单地购物小票
效果图 HTML代码 <!DOCTYPE html> <html><head><meta charset="utf-8" />< ...