2. 程式人生 > >JavaScript寫的隨機選人真實案例

JavaScript寫的隨機選人真實案例

阿新 • • 發佈：2018-12-15
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>java</title> <!-- 最新版本的 Bootstrap 核心 CSS 檔案 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"> <!-- 可選的 Bootstrap 主題檔案（一般不用引入） --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"
> <!-- 最新的 Bootstrap 核心 JavaScript 檔案 --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <style>
body { overflow: hidden; /*當內容溢位時，不顯示*/ /* background-image: url("image/流星雨.jpg"); */ } .divv { position: absolute; top: 50px; left: 42%; width: 268px; height: 600px; } #num { text-align: center; color: white; font-size: 40px; } .button { text-align: center; } #img { width: 268px; height: 271px; } #canvas { } </style> <body> <div class="divv"> <img class="img-thumbnail" alt="頭像" id="img" src="image/yuan.jpg"> <div id="num"></div> <div class="button"> <button id="start" class="btn btn-success">開始</button> <button id="stop" class="btn btn-info">結束</button> </div> </div> <!-- <canvas>畫布 畫板 畫畫的本子 --> <canvas width=400 height=400 style="background: #000000;" id="canvas"></canvas> <!-- javascript 畫筆 --> </body> <script type="text/javascript"> var num = document.getElementById("num"); var img = document.getElementById("img"); var start = document.getElementById("start"); var stop = document.getElementById("stop"); var image = [ "image/XX.jpg", "image/zXXn.jpg", "image/XX.jpg", "image/XX.jpg", "image/XX.jpg", "image/XX.jpg" ]; var arr = [ "曹XX", "趙XX", "XX", "李XX", "馬XX", "沈XX" ]; var intv = null; start.onclick = function() { if (intv == undefined) { intv = setInterval(function() { var random = Math.floor(Math.random() * 6); num.innerHTML = arr[random]; img.src = image[random]; }, 500); } } stop.onclick = function() { clearInterval(intv); intv = null; } /* 下面是流星雨程式碼 */ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var s = window.screen; var w = s.width; var h = s.height; canvas.width = w; canvas.height = h; var fontSize = 14; var clos = Math.floor(w / fontSize); var drops = []; var str = "qwertyuiopasdfghjklzxcvbnm"; for (var i = 0; i < clos; i++) { drops.push(0); } function drawString() { ctx.fillStyle = "rgba(0,0,0,0.05)" ctx.fillRect(0, 0, w, h); ctx.font = "600 " + fontSize + "px 微軟雅黑"; ctx.fillStyle = "#00ff00"; for (var i = 0; i < clos; i++) { var x = i * fontSize; var y = drops[i] * fontSize; ctx.fillText(str[Math.floor(Math.random() * str.length)], x, y); if (y > h && Math.random() > 0.99) { drops[i] = 0; } drops[i]++; } } setInterval(drawString, 30); </script> </html>

相關推薦

JavaScript寫的隨機選人真實案例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>java</title> <!-- 最新版本的 Bootstrap 核心 CSS 檔案 --> <l

深究AngularJS——ng-checked（回寫：帶真實案例程式碼）

1.需求 在新增頁面實現一個checkbox的選擇，然後在詳情頁面展示時，會自動選上之前被選中的。 2.新增頁面 看官最好將這個程式碼複製過去看看效果。 <!DOCTYPE htm

用javascript寫計算器

一位 先來 itl else 對象 alt img 技術 value 本人新手，如果有什麽不足的地方，希望可以得到指點 今天嘗試用javascript寫一個計算器 首先把計算器的按鈕做出來，用button做好了，這樣可以不用設置太多的樣式 <button value

Javascript寫的一個可拖拽排序的列表

自己 pos 清除 children align 定義 width nbsp console 自己常試寫了一個可拖拽進行自定義排序的列表，可能寫的不太好，歡迎提供意見。 我的思路是將列表中的所有項都放進一個包裹層，將該包裹層設為相對定位，每當點擊一個項時，將該項脫離文檔並

原生JavaScript寫AJAX

php javascript jscript 前端JavaScript:function ajaxGet(url, obj) { var request; if(window.XMLHttpRequest) { request = new XMLHttpReques

【JavaScript】隨機生成10個0~100的數字

set 需要 false 不重復 meta col 包含 四舍五入 true 隨機生成10個0~100不重復的數字（包含0和100）； 需要用到的知識點：隨機數 　　　　　　　　　去重 下面放代碼 <!DOCTYPE html> <html>

JavaScript寫到控制臺的方法console.log()

ole AI margin 實例 調試 meta htm asc pad 如果您的瀏覽器支持調試，你可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。瀏覽器中使用 F12 來啟用調試模式， 在調試窗口中點擊 "Console" 菜單。&l

4個錯誤使用JavaScript數組方法的案例

布爾 註意 and node.js 金山 getc eric some rip 譯者按： 做一個有追求的工程師，代碼不是隨便寫的！ 原文: Here’s how you can make better use of JavaScript arrays 譯者: Fundeb

一文拆解Faas的真實案例

一鍵 資源 發布 觸發器 技術 遇到 機器 res 支持 歡迎大家前往騰訊雲+社區，獲取更多騰訊海量技術實踐幹貨哦~ 本文來自騰訊雲技術沙龍，本次沙龍主題為Serverless架構開發與SCF部署實踐 劉敏潔：具有多年雲計算行業經驗，曾任職於華為、UCloud等企業擔

用JavaScript寫一個簡單的計算器

res scroll ref 簡單的 精度 arguments alt inf create 本文使用js實現了一個簡單的加、減、乘、除計算器。 以下是css部分代碼： *{ padding:0; margin:0; color: #424242;

真實案例：異常斷電導致虛擬機無法啟動恢復成功

sql 日期 工程師 cache 虛擬機數據恢復 合並 存儲設備 表空間 proc 虛擬機數據恢復故障： 發生故障的存儲設備是某品牌存儲 EVA8400型號，由於機房意外斷電導致該存儲中的一臺VMware虛擬機無法啟動（虛擬機中存儲了oracle數據庫），管理員清空cach

JavaScript寫貪吃蛇

分析: 遊戲中有三個物件:地圖(map), 食物(food), 蛇(snake) 地圖很簡單就是一個div盒子,給樣式即可,蛇,和食物都是屬於地圖中的元素,相對於地圖不斷改變自己的座標值,不要忘了給地圖定位 食物 1,食物的建構函式,  屬性===width,height,

JMeter全程實戰、效能測試實戰、分散式效能測試、真實案例分析

測試需求描述 1、 本次測試的介面為http服務端介面 2、 介面的主要分成兩類，一類提供給查詢功能介面，一類提供儲存資料功能介面，這裡我們舉例2個儲存資料的介面，因為這兩個介面有關聯 性，比較有代表性； 儲存信用卡賬戶資訊介面： 傳入引數： args={ "clientNo":"43434

JMeter全程實戰、性能測試實戰、分布式性能測試、真實案例分析

信息 結束 例如 日誌 賬戶 信用卡 每次 計算 權限 測試需求描述 1、 本次測試的接口為http服務端接口 2、 接口的主要分成兩類，一類提供給查詢功能接口，一類提供保存數據功能接口，這裏我們舉例2個保存數據的接口，因為這兩個接口有關聯 性，比較有代表性； 保存信用卡

純JavaScript寫一個對錶格的簡單增刪改查操作

功能:     新增表格資料，   修改表格資料，  刪除表格資料。 不完善區:  刪除資料之後序號沒有做處理 ，表單驗證簡單的提示警告， 沒有文字提醒。 介面: 線上檢視 下面是程式碼:

【譯】用JavaScript寫一個區塊鏈

幾乎每個人都聽說過像比特幣和以太幣這樣的加密貨幣，但是隻有極少數人懂得隱藏在它們背後的技術。在這篇部落格中，我將會用JavaScript來建立一個簡單的區塊鏈來演示它們的內部究竟是如何工作的。我將會稱之為SavjeeCoin！ 全文分為三個部分： part1：實現一個基本的區塊鏈

怎麼用JavaScript寫一個區塊鏈？

　　幾乎所有語言都可以編寫區塊鏈開發程式。那麼如何用JavaScript寫一個區塊鏈？以下我將要用JavaScript來建立1個簡單的區塊鏈來演示它們的內部到底是怎樣工作的。我將會稱作SavjeeCoin！ 　　區塊鏈是由一個個所有人能夠訪問的區塊構成的公共資料庫。這好像沒有什麼特別的，不過它們有個有意

怎麽用JavaScript寫一個區塊鏈？

再次 his 實現 鏈接 turn 引入 數組 alc 保持 　　幾乎所有語言都可以編寫區塊鏈開發程序。那麽如何用JavaScript寫一個區塊鏈？以下我將要用JavaScript來創建1個簡單的區塊鏈來演示它們的內部到底是怎樣工作的。我將會稱作SavjeeCoin！

javascript,Dom程式設計,遞迴案例

javascript,Dom程式設計,遞迴案例 <html> <head> <meta charset="UTF-8"> <title>javascript,Dom程式設計,遞迴案例,雪豹軟體工作室</title> <link

javascript,window物件,window物件案例,window物件的使用

javascript,window物件,window物件案例,window物件的使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>javascript,wi