摘要:需求總是很緊急,昨天正在開會收到人力需求,有時間做個抽獎嗎下午四點,年會五點開始。好了不扯淡了開始干活吧先屢一下思路好看是好看不了了,別指望沒設計沒時間程序員搞出來的效果。樣式開始按鈕停止按鈕人員名單別列表抽中名單列表。
需求總是很緊急,昨天正在開會收到人力需求,有時間做個抽獎嗎?(now 下午四點12,年會五點開始。)還沒能等我拒絕,人事又補了一句做不出來我們就不抽獎了,我擦瞬間感覺要是搞不出來會被兄弟們捅死的節奏,默默的刪除了沒時間做的消息,重新寫了四個字名單給我。
還好去年前年都是我搞得很慶幸沒被當場打臉,重啟去年程序(需要收集全員頭像并ps)時間顯然不夠,慶幸的是還有點經驗,會議結束時間已經四點半了。
好了不扯淡了開始干活吧!
先屢一下思路1、好看是好看不了了,別指望沒設計沒時間程序員搞出來的效果。
2、樣式開始按鈕、停止按鈕、人員名單別列表、抽中名單列表。
3、點擊開始,首先亂序名單列表保證每次抽獎列表順序不一樣,防止他們懷疑我作弊搞權重(就TM半小時哪有時間搞權重)時間緊任務重,直接用的lodash shuffle方法來亂序視圖
4、隨機數是肯定要有的,每隔200ms隨機一個從0到人員個數(數組長度隨機整數)
5、抽中人員和沒抽中人員分兩個數組存入localStorage,防止抽獎過程中刷新頁面,純靜態不存本地那場面就尷尬了每次刷新完如果本次存儲了從本地獲取人員列表和中獎名單
6、點擊end選中當前隨機數在頁面上高亮顯示。
接下來看整體實現代碼
2019抽獎程序 {{item}}{{ item }}
體驗下效果
需求搞定,經現場測試目前沒發現什么問題!如有疑問隨時回復留言!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108978.html
摘要:總是看到類似的九宮格抽獎效果后來想自己手擼一個試一試吧。多多嘗試萬一成功了呢先來總結一下效果類似與跑馬燈效果,閃動效果先快后慢。 總是看到類似的九宮格抽獎效果,后來想自己手擼一個試一試吧。(多多嘗試,萬一成功了呢 github L6zt) 先來總結一下效果,類似與跑馬燈效果,閃動效果先快后慢。代碼解析如下所示:代碼 0 ...
摘要:總是看到類似的九宮格抽獎效果后來想自己手擼一個試一試吧。多多嘗試萬一成功了呢先來總結一下效果類似與跑馬燈效果,閃動效果先快后慢。 總是看到類似的九宮格抽獎效果,后來想自己手擼一個試一試吧。(多多嘗試,萬一成功了呢 github L6zt) 先來總結一下效果,類似與跑馬燈效果,閃動效果先快后慢。代碼解析如下所示:代碼 0 ...
摘要:圍繞以太坊的開發生態是目前相對最成熟的,比如有開發框架,有智能合約在線集成開發環境,還有專設的開發者問答頻道。 showImg(https://segmentfault.com/img/bVbaJOL?w=1200&h=514); 張泉靈說,時代拋棄我們的時候連聲再見都不會說,馬云說對于新興事物,絕大多數人是看不見、看不起、看不懂、來不及。自從學完 Coursera 上的 Crypto...
摘要:圍繞以太坊的開發生態是目前相對最成熟的,比如有開發框架,有智能合約在線集成開發環境,還有專設的開發者問答頻道。 showImg(https://segmentfault.com/img/bVbaJOL?w=1200&h=514); 張泉靈說,時代拋棄我們的時候連聲再見都不會說,馬云說對于新興事物,絕大多數人是看不見、看不起、看不懂、來不及。自從學完 Coursera 上的 Crypto...
閱讀 1864·2019-08-30 15:53
閱讀 3192·2019-08-30 15:44
閱讀 2806·2019-08-26 13:31
閱讀 1949·2019-08-26 12:10
閱讀 792·2019-08-26 11:01
閱讀 2120·2019-08-23 15:32
閱讀 1584·2019-08-23 13:43
閱讀 2529·2019-08-23 11:58