亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

利用JS打造黑客代碼雨效果

 更新時間:2022年06月16日 14:50:00   作者:肥學  
window.onload()方法用于在網頁加載完畢后立刻執(zhí)行的操作,即當 HTML 文檔加載完畢后,立刻執(zhí)行某個方法。本文將用window.onload()打造黑客代碼雨效果,感興趣的可以嘗試一下

演示

技術棧

js實戰(zhàn)我們也寫過很多了,其中每次幾乎都用到畫布,大家知道它的重要性了吧。今天依舊用到它了。不過我們講過它的用法就不多說了。 這次我們說一下window.onload

window.onload() 方法用于在網頁加載完畢后立刻執(zhí)行的操作,即當 HTML 文檔加載完畢后,立刻執(zhí)行某個方法。

window.onload() 通常用于 元素,在頁面完全載入后(包括圖片、css文件等等)執(zhí)行腳本代碼。

只有一個要執(zhí)行的函數(shù)語法:

window.onload = funcRef;

因為 JavaScript 中的函數(shù)方法需要在 HTML 文檔渲染完成后才可以使用,如果沒有渲染完成,此時的 DOM 樹是不完整的,這樣在調用一些 JavaScript 代碼時就可能報出"undefined"錯誤。

所以對于一些函數(shù)功能要用window.onload

window.onload 與 jQuery ready() 區(qū)別

window.onload = function () {};    // JavaScript 
$(document).ready(function () {}); // jQuery

在這里插入圖片描述

源碼

畫布

 <canvas id="mom" style="background:#111"></canvas>

js樣式設置

  window.onload = function(){
        //獲取畫布對象
        var canvas = document.getElementById("mom");
        //獲取畫布的上下文
        //getContext() 方法返回一個用于在畫布上繪圖的環(huán)境。
        var context =canvas.getContext("2d");
        //獲取瀏覽器屏幕的寬度和高度
        var W = window.innerWidth;
        var H = window.innerHeight;
        //設置canvas的寬度和高度
        canvas.width = W;
        canvas.height = H;
        //每個文字的字體大小
        var fontSize = 16;
        //計算列
        var colunms = Math.floor(W /fontSize);
        //記錄每列文字的y軸坐標
        var drops = [];
        //給每一個文字初始化一個起始點的位置
        //計算每一個文字所謂坐標 存儲y軸的坐標  
        for(var i=0;i<colunms;i++){
            drops.push(0);
        }
        //運動的文字
        var str ="JavaScript function(){}";
        //4:fillText(str,x,y);原理就是去更改y的坐標位置
        //繪畫的函數(shù)
        function draw(){
            context.fillStyle = "rgba(0,0,0,0.05)";
            //fillRect() 方法繪制“已填色”的矩形。默認的填充顏色是黑色。
            context.fillRect(0,0,W,H);
            //給字體設置樣式
            context.font = "700 "+fontSize+"px  微軟雅黑";
            //給字體添加顏色
            context.fillStyle ="#00cc33";//可以rgb,hsl, 標準色,十六進制顏色
            //寫入畫布中
            for(var i=0;i<colunms;i++){
                var index = Math.floor(Math.random() * str.length);//設置文字出發(fā)時間隨機 Math.floor(Math.random()*str.length)讓數(shù)組里面的文字索引隨機出現(xiàn)  
                var x = i*fontSize;
                var y = drops[i] *fontSize;//也讓y軸方向也向下掉一個文字的距離
                context.fillText(str[index],x,y);
                // //如果要改變時間,肯定就是改變每次他的起點
                if(y >= canvas.height && Math.random()>0.99){
                    drops[i] = 0;
                }
                drops[i]++;//讓數(shù)組里面的值每次加一,用于上面的y軸下掉 
            }
        };
        //隨機顏色
        function randColor(){
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb("+r+","+g+","+b+")";
        }
        draw();
        setInterval(draw,20);
    };

以上就是利用JS打造黑客代碼雨效果的詳細內容,更多關于JS代碼雨的資料請關注腳本之家其它相關文章!

相關文章

  • 在JavaScript中驗證URL的新方法(2023版)

    在JavaScript中驗證URL的新方法(2023版)

    在JavaScript領域,URL 驗證方面有了新消息!多年來,人們一直在討論JavaScript沒有一種簡便的方法來驗證 URL,現(xiàn)在有了一種新方法URL.canParse(),需要的朋友可以參考下
    2023-09-09
  • 讓AJAX不依賴后端接口實現(xiàn)方案

    讓AJAX不依賴后端接口實現(xiàn)方案

    網頁中的ajax請求越來越多,或者應用開始就一直使用ajax與后端進行數(shù)據(jù)交換,本文將詳細介紹,需要的朋友可以參考下
    2012-12-12
  • 運用js教你輕松制作html音樂播放器

    運用js教你輕松制作html音樂播放器

    這篇文章主要為大家詳細介紹了如何運用js教你輕松制作html音樂播放器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • 跟我學習javascript的全局變量

    跟我學習javascript的全局變量

    跟我學習javascript的全局變量,告訴大家三種避免全局變量的方法,感興趣的小伙伴們可以參考一下
    2015-11-11
  • 詳解TypeScript2.0標記聯(lián)合類型

    詳解TypeScript2.0標記聯(lián)合類型

    這篇文章主要介紹了TypeScript2.0標記聯(lián)合類型,對TS感興趣的同學,可以參考下
    2021-05-05
  • js控制臺輸出的方法(詳解)

    js控制臺輸出的方法(詳解)

    下面小編就為大家?guī)硪黄猨s控制臺輸出的方法(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-11-11
  • 詳解JavaScript實現(xiàn)監(jiān)聽路由變化

    詳解JavaScript實現(xiàn)監(jiān)聽路由變化

    前端實現(xiàn)路由變化主要有兩種方式,本文主要介紹了這兩種方法的實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • 禁用Enter鍵表單自動提交實現(xiàn)代碼

    禁用Enter鍵表單自動提交實現(xiàn)代碼

    這篇文章主要介紹了禁用Enter鍵表單自動提交實現(xiàn)代碼,需要的朋友可以參考下
    2014-05-05
  • 學習使用bootstrap3柵格系統(tǒng)

    學習使用bootstrap3柵格系統(tǒng)

    這篇文章主要教會大家學習使用bootstrap3柵格系統(tǒng),bootstrap開發(fā)環(huán)境搭建,還介紹了柵格系統(tǒng)的類型,感興趣的小伙伴們可以參考一下
    2016-04-04
  • JavaScript實現(xiàn)網頁端播放攝像頭實時畫面

    JavaScript實現(xiàn)網頁端播放攝像頭實時畫面

    這篇文章主要介紹了如何利用JavaScript實現(xiàn)在網頁端播放局域網(不能上云)或是廣域網的攝像頭的實時畫面,文中的示例代碼講解詳細,需要的可以參考一下
    2022-02-02

最新評論