抽獎小案例(js抽獎概率+css3旋轉動畫)
進入介面後2s開始旋轉抽獎,3s後停止,效果圖：
實現程式碼：
<!DOCTYPE html><html lang="en"><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>Document</title> <script</style> <script> $(function () { // 生成一個隨機數1~100 var num = Math.floor(Math.random() * 100); // 定義一個字串,也就是要新增的類名 var str = ''; // 計算概率 if (num <= 50) { // num<=50表示有50%的概率抽到10元 str = 'jl10' }else if (num < 71 ) { // num->51~70,概率為20% str = 'jl20' } else if (num < 86) { str = 'jl50' }else if (num < 95) { str = 'jl100' } else if (num < 99) { str = 'jl200' }else if(num <= 100){ str = 'jl500' } setTimeout(function () { // 頁面載入2s後.新增類名,開始抽獎 $('.two').addClass(str); },2000) }) </script></head><body> <section> <img class="one" src="./img/01.png" alt=""> <img class="two" src="./img/02.png" alt=""> </section> </body></html>
相關推薦
抽獎小案例(js抽獎概率+css3旋轉動畫)
進入介面後2s開始旋轉抽獎,3s後停止,效果圖：實現程式碼：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi
angularJS實戰之小案例--隨機抽獎
angular.module("lottery",[]) .controller('ctrl_lottery',['$scope','$timeout',function($scope,$timeout){ //1.初始化獎品資料 $scope.items = [ {id:1
python實現簡單的抽獎小程式，抽獎的內容從檔案裡面讀取
開啟檔案，讀取檔案的內容，隨機抽出一個然後刪掉已經抽出來的號碼 import randomfrom random import choicef = open('allnum.txt')data = f.read()a = datab = a.strip('\n').split('\n')pr
微信小程式：Animation實現圖片旋轉動畫
最近小程式中有一個圖片旋轉的需求，最初是想著通過切換多張圖片達到旋轉的效果，後來發現微信小程式帶有動畫api，然後就改由image+Animation來實現。 ###首先在wxml中定義image <image class="bth_image2" mode="aspec
button 元素的css3旋轉動畫
html： 利用偽元素 <button class="btn btn-default btn-lg btn-3d" type="submit" data-hover="SUBMIT REQUEST" ">SUBMIT REQUEST ::before "SUBMIT REQUEST"
抽獎小程式（基於js）
幫同事準備生日會，生日會上有抽獎環節，本意上做個小程式來抽取幸運兒，結果應用到最多的是各種遊戲環節，由於理工科的男生女生都是靦腆型的，沒有人積極主動參與，因此也用來抽取員工上臺參與遊戲。 要求實現功能如下：1.隨機抽取任一員工；2.如果該員工此次生日會被抽到參與過遊戲，
JS小案例(基礎好煩惱少)----持續更新
eof 最大值 res 應該 for tin title style 最小 1 *************************************************** 2 <!DOCTYPE html> 3 <html lan
js學習總結----經典小案例之選項卡
scrip ges div 視頻內容 mil line 學習總結 images ul li <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
js學習總結----小案例之跑馬燈
htm function 微博 border ron == 內容 rip gree 具體代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
【CSS3】變換transform---小案例，行星運動效果
images tle charset har 之間 font 給他 res 問題 transform變換 rotate旋轉 rotate(angle) 2D旋轉；rotateX(angle) 沿著x軸旋轉；rotateY(angle) 沿著y軸旋轉；rotate(ang
JS實現拖拽小案例
res pan urb posit htm eight || move use <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
web前端小案例-css3制作瀏覽器背景漸變背
JavaScript 前端 css3 案例 知識點：rgb全色循環算法，HEX與RGB顏色轉換算法、CSS3顏色漸變，CSS3漸變色兼容ie方法，定時器與循環，函數封裝,數組應用等。 css代碼： <style> *{margin:0;padding:0;}
HTML5小遊戲-簡單抽獎小遊戲
ice orm store scrip stroke meta for oct 樣式 換了新工作以後，專註前端開發，平常空閑時間也比較多，可以多鉆研一下技術，寫一下博客。最近在學習canvas，參考網上的slotmachine插件，用canvas實現了一個簡單抽獎小遊戲
JavaWeb基礎總結之Js幾個經典的小案例
（1）動態顯示當前系統時間 <body> <p>當前時間：<span id="times"></span></p> </body> <script> function get(){
用python實現抽獎小程式的自動抽獎！公司抽獎必背技能！
不知道你們有沒有玩過無碼科技的小程式抽獎助手，沒有玩過的可以在微信小程式入門搜尋抽獎助手，首頁有很多獎品進行抽獎的，我前幾天發現了之後就把那裡的所有獎品都點了一次，就突發萌想，能不能用 python 來實現自動抽獎啊？這樣就不用我每天都點進去看了，我只需要關心是否中獎就可以了。答案是肯定的，今天就為
用python3寫一個小球轉動的抽獎小遊戲
最近老師在講 tkinter,所以我做了一個抽獎小遊戲 一、效果圖 先上效果圖。紅色的小球會圍繞藍色小球做環形運動。我設定的四個角是獎品，其餘的都是再接再厲。 二、方法 基於tkinter中的button,text,PIL ,time.Canvas drawPath():用
四、小電視自動抽獎
自動參加小電視抽獎 自動領取艦長、提督獎勵 執行一天大概能獲取1800包辣條 However. 每次凌晨B站後臺都會檢測賬號指令碼，一次搶太多很容易被封號一週。 可能是依據最大的連續領獎次數判斷的吧 一、抽獎流程 1. 分析頁面可知 每當有人贈送小電視之類的禮物時 系統就會發送廣播彈幕（SYS_MSG） 2
Vue.js 篩選搜尋小案例
使用Vue.js編寫一個很小的篩選搜尋案例。 根據姓名搜尋，性別篩選。 程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit
Vue.js TodoList小案例
使用Vue.js寫的TodoList小案例。 完成功能：增加任務，修改任務狀態，刪除任務和清除已完成任務。 程式碼：（修改Vue引入，即可使用） <!DOCTYPE html> <html lang="en"> <head> <met
js小案例練習
目錄 在瀏覽器輸出以下內容 * ** *** ** * 求1-100的素數 求最大值 陣列排序 過濾器 附錄：TypeScript一些知識 程式碼開始！ （前面寫的很囉嗦，後面慢慢的精簡起來了，說明還是有一點點進步的！！） 在瀏覽器輸出以下內