19.1 簡易抽獎

? ? ?準備一個數組,里面添加10個獎品數據,讓獎品數據快速的在盒子中隨機顯示,通過按鈕控制盒子里面的內容停止。

? ? ? ? 效果圖:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}#box{width: 230px;height: 80px;text-align: center;border: 2px solid red;margin: 50px auto;display: flex;align-items: center;justify-content: center;font-size: 28px;}#btn{width: 200px;height: 50px;text-align: center;margin: 30px auto;display: flex;justify-content: space-between;}button{width: 80px;height: 30px;background-color: white;border: 1px solid rgb(0, 110, 255);}</style>
</head>
<body><div id="box"></div><div id="btn"><button onclick="start()">開始</button><button onclick="end()">結束</button></div><script>var box=document.querySelector('#box')var arr=['巧克力','鍵盤','筋膜槍','充電寶','瑜伽墊','電風扇','旺旺大禮包','一箱酸奶','手機','平板']box.innerHTML=arr[0]var  timerfunction start(){if(timer){return}timer=setInterval(function(){var random=parseInt(Math.random()*10)box.innerHTML=arr[random]},200)}function end(){console.log("結束")clearInterval(timer)timer=''}</script>
</body>
</html>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/20612.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/20612.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/20612.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

解釋Python中的PEP 8是什么 為什么它很重要

PEP 8 是 Python 的一個編碼規范&#xff0c;也稱為 Python 增強提案 8。它提供了一系列關于如何編寫清晰、一致的 Python 代碼的指導原則。這些原則涵蓋了代碼布局、命名約定、注釋、文檔字符串、編碼建議、導入語句、異常、全局變量、嵌套等方面。 為什么PEP 8很重要&#x…

npm install pubsub-js報錯的解決匯總

我在練習谷粒商城P83時&#xff0c;選擇分類時觸發向后端請求選擇分類catId綁定的品牌數據&#xff0c;發現前端控制臺報錯&#xff1a; "PubSub is not definded",找不到pubsub。 因為缺少pubsub包&#xff0c;所以開始安裝此包。 于是在網上一頓搜索猛如虎&…

xilinx ip自帶XDC只讀

檢查生成的IP核再目錄下顯示的文件類型是不是.xcix 如果是的話&#xff0c;重新生成為.xci 再二次編輯即可 或者 將框柱的部分不選擇&#xff0c;從新生成

MongoDB CRUD操作:批量寫操作

MongoDB CRUD操作&#xff1a;批量寫操作 文章目錄 MongoDB CRUD操作&#xff1a;批量寫操作關于批量操作的順序bulkWrite()支持的方法舉例向分片集合批量插入的策略預分割集合無序寫入 mongos避免單調節流 MongoDB提供了批量執行寫入操作的能力&#xff0c;但批量寫入操作只影…

《計算機工程與應用》最新投稿經驗2024年5月

研二下第一次投稿&#xff0c;深度學習長時間序列預測方向&#xff0c;選擇了《計算機工程與應用》期刊&#xff0c;是CSCD擴展刊北大核心&#xff0c;且在24年被EI收錄等等。4.10交稿到最后5.31收到錄用通知&#xff0c;歷時不到2個月&#xff0c;總的來說編輯部效率確實高。 …

LLM背后的基礎模型 1

寫在最前面的話 任何開源技術是最有生命力的&#xff0c;也是最具分享精神的。一直覺得大模型領域需要有一個系列能夠從零開始系統性的講述領域知識&#xff0c;給與這個領域的從業人員或者對其有興趣的門外漢及時的幫助。國外承擔“布道者”的公司眾多&#xff0c;而數磚公司…

云技術最全詳解

目錄 云技術 1.定義 2.特點 2.類型 2.1IaaS&#xff08;基礎設置即服務&#xff09; 2.2PaaS&#xff08;平臺即服務&#xff09; 2.3SaaS&#xff08;軟件即服務&#xff09; 3.云技術模型 3.1公有云 3.2私有云 3.3混合云 云技術 1.定義 云技術是一種云計算和存儲…

如何讓 LightRoom 每次導入照片后不自動彈出 SD 卡 LR

如何讓 LightRoom 每次導入照片后不自動彈出 SD 卡 LR 在導入窗口左上角有個選項&#xff1a; 導入后彈出 把這個去掉就可以了

Rust 基本語法

變量 整數 無符號整數以u開頭有符號整數以i開頭對于Rust默認整數是i32對于整數溢出 開發模式中編譯會檢測溢出&#xff0c;如果溢出會導致程序panic發布模式中編譯不會檢查可能會導致的溢出&#xff0c;如果運行時發生溢出&#xff0c;會執行環繞操作保證數值在范圍內且程序不…

Spark大數據 掌握RDD的創建

在Apache Spark中&#xff0c;彈性分布式數據集&#xff08;Resilient Distributed Dataset&#xff0c;簡稱RDD&#xff09;是一個核心的數據結構&#xff0c;用于表示不可變、可分區、可并行操作的元素集合。理解并掌握RDD的創建是使用Spark進行大數據處理的關鍵步驟之一。 …

Qt Creator(Qt 6.6)拷貝一行

Edit - Preference - Environment&#xff1a; 可看到&#xff0c;拷貝一行的快捷鍵是&#xff1a; ctrl Ins

數據結構-堆(帶圖)詳解

前言 本篇博客我們來仔細說一下二叉樹順序存儲的堆的結構&#xff0c;我們來看看堆到底如何實現&#xff0c;以及所謂的堆排序到底是什么 &#x1f493; 個人主頁&#xff1a;普通young man-CSDN博客 ? 文章專欄&#xff1a;數據結構_普通young man的博客-CSDN博客 若有問題 評…

程序員是牛馬嗎?

在今天的討論中&#xff0c;一個引人深思的問題被提出&#xff1a;程序員是否只是現代社會的牛馬&#xff1f;這個問題迅速引發了激烈的爭論。許多程序員開始意識到&#xff0c;盡管他們辛勤工作&#xff0c;但最終可能仍無法擺脫被剝削的命運。因此&#xff0c;他們渴望改變&a…

MySQL(二)-基礎操作

一、約束 有時候&#xff0c;數據庫中數據是有約束的&#xff0c;比如 性別列&#xff0c;你不能填一些奇奇怪怪的數據~ 如果靠人為的來對數據進行檢索約束的話&#xff0c;肯定是不行的&#xff0c;人肯定會犯錯~因此就需要讓計算機對插入的數據進行約束要求&#xff01; 約…

混合模型方差分析

文章目錄 一、說明二、受試者“間”因素和受試者“內”因素的意思&#xff1f;三、混合模型方差分析回答 3 件事四、混合模型方差分析的假設 一、說明 在本文中&#xff0c;我將討論一種稱為混合模型方差分析的方差分析變體&#xff0c;也稱為具有重復測量的 2 因素方差分析。…

音視頻開發_SDL事件處理

今天我為大家介紹一下SDL的事件處理。這里所指的事件處理就是我們通常所說的&#xff0c;鍵盤事件&#xff0c;鼠標事件&#xff0c;窗口事件等。 SDL對這些事件都做了封裝&#xff0c;提供了統一的API&#xff0c;下面我們就來詳細的看一下。 SDL中的事件處理 要想了解 SDL…

VB.net進行CAD二次開發(四)

netload不能彈出對話框&#xff0c;參考文獻2 參考文獻1說明了自定義菜單的問題&#xff0c;用的是cad的系統命令 只要加載了dll&#xff0c;自定義的命令與cad的命令同等地位。 這時&#xff0c;可以將自定義菜單的系統命令替換為自定義命令。 <CommandMethod("Add…

STL-queue的使用及其模擬實現

在C標準庫中&#xff0c;隊列(queue)是一種容器適配器&#xff0c;它以先進先出的方式組織數據&#xff0c;其中從容器一端插入元素&#xff0c;另一端取出元素。 queue的使用 queue的構造函數 queue的成員函數 empty&#xff1a;檢測隊列是否為空size&#xff1a;返回隊列中有…

代碼隨想錄算法訓練營 day23| ● 669. 修剪二叉搜索樹 ● 108.將有序數組轉換為二叉搜索樹 ● 538.把二叉搜索樹轉換為累加樹

文章目錄 前言669. 修剪二叉搜索樹思路方法一 遞歸法方法二 迭代法 108.將有序數組轉換為二叉搜索樹思路方法一 遞歸法方法二 迭代法 538.把二叉搜索樹轉換為累加樹思路方法一方法二 總結 前言 迭代法都沒看主要是669和538【538很簡單】 669. 修剪二叉搜索樹 思路 不用看教程…

【C++刷題】優選算法——位運算

常見位運算操作總結&#xff1a; 基礎位運算 &&#xff1a;有0則為0 |&#xff1a;有1則為1 ^&#xff1a;相同為0&#xff0c;相異為1 / 無進位相加運算符的優先級 管它什么優先級&#xff0c;加括號就完事兒了給一個數 n&#xff0c;確定它的二進制表示中的第 i (默認是從…