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