js实现闪屏

是不是感觉很牛批?(不准你们说不牛皮),其实代码实现起来很简单。也就几行.下面跟着我一起来看看吧。

打开工具

这里我打开的是VsCode。
开始.jpg

新建一个项目

直接命名js闪屏
项目.jpg

新建index.html和index.js

开始.jpg

引入index.js

在title标签下添加
<script src="js/index.js"></script>

编写js代码

先使用window.onload函数,意思是页面加载完毕后才会加载这个函数

直接看图,不多逼逼
html.jpg
ji.jpg

问题详解

*{
        padding: 0px;
        margin: 0px;
    }
    html,body{
        width: 100%;
        height: 100%;
    }

这里先清除浏览器默认的样式 然后再设置整个窗口铺满

function randomColor (min , max) {
return Math.floor(Math.random() * (max - min) + min);
}

这里是写了一个获取从最小值到最大数的随机数
这里详细解答下Math.floor对数值向下取整
打个比方 Math.floor(12.6) 结果是12
Math.floor(12.1) 结果还是12

然后Math.random 是0~1之前取值
当Math.random = 0时 结果是Math.floor(min);
当Math.random =1时 结果是Math.floor(max);
这里应该没毛病 有问题可以私聊我

所以最后这个函数就是min~max取值

function init () {
//定时器 25毫秒执行一次 即一帧
setInterval(function (){
    //改变body背景颜色
    document.body.style.background = `rgb(${randomColor(0,255)},${randomColor(0,255)},${randomColor(0,255)})`;
},25) 
}

这里给大家讲下setInterval 这个也是js自带的 意思是定时器

setInterval(function(){},1000)

这里表示每隔1000毫秒 = 1秒 执行一次function(){}

document.body.style.background = `rgb(${randomColor(0,255)},${randomColor(0,255)},${randomColor(0,255)})`;
}

这里是改变背景颜色代码 不多提示 自己理解理解 实在不理解私聊我哦


哼哼,看了我这个这么赞的教程是不是要转发一下啊!

官方交流群:963859174
官方交流群:963859174
官方交流群:963859174


版权声明
本文是Mobai原创文章,转载请附上原文出处链接和本声明。
本文链接:http://boke.whitemo.xyz/index.php/archives/9/