前端纯源生js 数字流（全代码）

纯源生js代码书写数字流

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>数字雨滴效果</title><style type="text/css">* {margin: 0;padding: 0;}html {overflow: hidden;}</style></head><body><div id="test"></div><br><input onclick="dianji(this)" id="operate" type="button" value="暂停" /><br><canvas id="canvas" style="background: #000;" width="" height=""></canvas></body><script type="text/javascript">/* window.onload = function(){ *//* 获取画布对象 */var canvas = document.getElementById("canvas");/* 获取画布的上下文 */var context = canvas.getContext("2d");/* 获取浏览器屏幕的宽度和高度,这里控制显示的宽度和高度,且涵盖所有的浏览器 */var w = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;var h = document.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;/* 设置canvas 的宽度和高度 */canvas.width = w;canvas.height = h;/* 设置每个字的字体大小 */var fontSize = 20;/* 计算可以显示多少列 屏幕宽度除以字体大小得出显示的列数*/var colunms = Math.floor(w / fontSize);/* Math。floor()  向下取整 *//* 记录每列文字的Y轴坐标 */var drops = [];/* 给每一个文字初始化一个起始点的位置 */for (var i = 0; i < colunms; i++) {drops.push(0);}/* 运动的文字 */var str = "显示运动字体";/* fillText(str,x,y) 原理就是去更改y的坐标位置*//* 绘画的函数 */function draw(){/* 黑BG的帆布   半透明BG显示的轨迹*/context.fillStyle = "rgba(0,0,0,0.05)"context.fillRect(0,0,w,h);/* 给字体设置样式 */context.font =fontSize +"px 微软黑体";/* 给字体添加颜色*/context.fillStyle = "red";/* 可以设置rgb,标准色，十六进制颜色 *//* 循环字体    写入画布中*/for (var i = 0; i < colunms; i++) {/* 随机汉字打印 */var index = Math.floor(Math.random()*str.length);/* Math.random()方法可返回介于0~9之间的一个随机数 *//* index 伪随机整数 */var x = i*fontSize;/* x坐标 */var y = drops[i]*fontSize;/* y坐标 */context.fillText(index,x,y);/* 如果要改变事件，肯定就是改变每次他的起点 *//* 在屏幕上划线后，把他的顶部随机发送到顶部 *//* 讲一个随机性添加到复位中，使分散在轴上的下降 */if (y >= canvas.height && Math.random() > 0.99) {drops[i] = 0;}/* 增加的y坐标 */drops[i]++;};};draw();var intervalId = setInterval(draw,30);  // 测试效果开始/暂停  function dianji(objBtn){  var operate = document.getElementById("operate");  if(objBtn.value == "开始"){  objBtn.value = "暂停";  intervalId = setInterval(draw,30);  }else{  objBtn.value = "开始";  clearInterval(intervalId);  }  return false;  }  /*     } */</script>
</html>

（一）获取浏览器屏幕的宽度和高度
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth

所以这里我为了涵盖所有浏览器，将获取方法均列出来

（二）setInterval（翻译为set设置Interval间隔）
setIntervalsetInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
Html代码
1.
2.
10.Stop interval

【与setTimeout的使用区别】
这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。
(方法):
实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。
不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。

（3）Math.floor() === 向下取整

（4）Math.random()方法可返回介于 0 ~ 1 之间的一个随机数

（5）clearInterval（翻译为清除clear间隔interval）
①clearInterval()：取消由 setInterval() 设置的 timeout
②setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由该方法返回的 ID 值可用作 clearInterval() 方法的参数。

前端纯源生js 数字流（全代码）相关推荐

【简易实用】源生js瀑布流示列
代码片段示列: <!DOCTYPE html> <html><head><title>js流布局</title><style>* ...
数字时钟html5 js,html5 canvas js(数字时钟)实例代码
canvas dClock 您的浏览器太古董了,升级吧! var clock = document.getElementById("clock"); var cxt = clock ...
html数字时钟免费代码,html5 canvas js(数字时钟)实例代码
canvas dClock 您的浏览器太古董了,升级吧! var clock = document.getElementById("clock"); var cxt = clock ...
react 原生html 插件,纯原生JS的瀑布流插件Macy.js，前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...
“是男人就下一百层”h5游戏全网最详细教学、全代码，js操作
"是男人就下一百层"h5游戏全网最详细教学.全代码,js操作博主的话游戏展示编程工具介绍游戏代码代码讲解 js 第一步切换div的显示与隐藏 js 第二步在菜单页面用 ...
vuejs项目前端纯js在线下载网页内容保存为自定义格式的word文件、另存为word文件
所有前端导入导出方法集合: 前端必备技能知识:JS导出Blob流文件为Excel表格.Vue.js使用Blob的方式实现excel表格的下载(流文件下载)_勤动手多动脑少说多做厚积薄发-CSDN博客_ ...
JS正则表达式验证数字非常全 - 吾心无所 - 博客园
JS正则表达式验证数字非常全 Js代码 <script type="text/javascript"> function SubmitCk() { var reg = ...
2020年前端面试之JS手写代码题合集
2020年前端面试之JS手写代码题合集预计会有上千道题,后续慢慢补! 1. 写一个把字符串大小写切换的方法 function caseConvert(str){return str.replace ...

前端纯源生js 数字流（全代码）