JS元件系列——圖片切換特效：簡易抽獎系統

阿新 • • 發佈：2019-01-14

<div id="randomize">
        <div class="content container" style="text-align: center;max-width: 900px;">
            <h1>簡易遊戲機</h1>

            <div class="row">
                <div class="col-xs-4">
                    <div>
                        < 
div id="machine1" class="randomizeMachine">
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div>
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot2.png" /></div>
                            < 
div><img src="/Content/jQuery-SlotMachine-master/img/slot3.png" /></div>
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot4.png" /></div>
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></ 
div>
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-4">
                    <div>
                        <div id="machine2" class="randomizeMachine">
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div>
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot2.png" /></div>
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot3.png" /></div>
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot4.png" /></div>
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div>
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-4">
                    <div>
                        <div id="machine3" class="randomizeMachine">
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div>
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot2.png" /></div>
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot3.png" /></div>
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot4.png" /></div>
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div>
                            <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <div class="btn-group btn-group-justified btn-group-randomize" role="group">
                    <div id="ranomizeButton" type="button" class="btn btn-danger btn-lg">開始</div>
                </div>
            </div>
        </div>
    </div>

JS元件系列——圖片切換特效：簡易抽獎系統

<div id="randomize"> <div class="content container" style="text-align: center;max-width: 900px;"> <h1>簡易遊戲機</h

JS元件系列——表格元件神器：bootstrap table（三：終結篇，最後的乾貨福利）

前言：前面介紹了兩篇關於bootstrap table的基礎用法，這章我們繼續來看看它比較常用的一些功能，來個終結篇吧，毛爺爺告訴我們做事要有始有終~~bootstrap table這東西要想所有功能覆蓋似乎不太現實，博主挑選了一些自認為比較常用的功能在此分享給各位園友。原始

JS元件系列——表格元件神器：bootstrap table

前言：之前一直在忙著各種什麼效果，殊不知最基礎的Bootstrap Table用法都沒有涉及，罪過，罪過。今天補起來吧。上午博主由零開始自己從頭到尾使用了一遍Bootstrap Table ，遇到不少使用方面的問題，也做了一部分筆記，在此分享出來供需要使用的園友參考。還記得前

JS元件系列——表格元件神器：bootstrap table（二：父子表和行列調序）

前言：上篇 JS元件系列——表格元件神器：bootstrap table 簡單介紹了下Bootstrap Table的基礎用法，沒想到討論還挺熱烈的。有園友在評論中提到了父子表的用法，今天就結合Bootstrap table的父子表和行列調序的用法再來介紹下它稍微高階點的用法

JS元件系列——又一款MVVM元件：Vue（一：30分鐘搞定前端增刪改查）

正文前言：關於Vue框架，好幾個月之前就聽說過，瞭解一項新技術之後，總是處於觀望狀態，一直在猶豫要不要系統學習下。正好最近有點空，就去官網瞭解了下，看上去還不錯的一個元件，就抽空研究了下。最近園子裡vue也確實挺火，各種入門博文眼花繚亂，博主也不敢說寫

JS元件系列——又一款MVVM元件：Vue（二：構建自己的Vue元件）

前言：轉眼距離上篇 JS元件系列——又一款MVVM元件：Vue（一：30分鐘搞定前端增刪改查）已有好幾個月了，今天打算將它撿起來，發現好久不用，Vue相關技術點都生疏不少。經過這幾個月的時間，Vue的發展也是異常迅猛，不過這好像和博主都沒什麼太大的關係，博主還是老老實實研究自己的技術吧。技術之路還很長，且行

JS元件系列——BootstrapTable 行內編輯解決方案：x-editable

前言：之前介紹bootstrapTable元件的時候有提到它的行內編輯功能，只不過為了展示功能，將此一筆帶過了，罪過罪過！最近專案裡面還是打算將行內編輯用起來，於是再次研究了下x-editable元件，遇到過一些坑，再此做個採坑記錄吧！想要了解bootstrapTable的園友可以移步 JS元件系列——表格元

JS元件系列——自己動手擴充套件BootstrapTable的凍結列功能：徹底解決高度問題

前言：一年前，博主分享過一篇關於bootstrapTable元件凍結列的解決方案 JS元件系列——Bootstrap Table 凍結列功能IE瀏覽器相容性問題解決方案，通過該篇，確實可以實現bootstrapTable的凍結列效果，並且可以相容ie瀏覽器。這一年的時間，不斷有園友以及群裡面的朋友問過我關

JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案（三）：兩個Viewmodel搞定增刪改查

前言：之前博主分享過knockoutJS和BootstrapTable的一些基礎用法，都是寫基礎應用，根本談不上封裝，僅僅是避免了html控制元件的取值和賦值，遠遠沒有將MVVM的精妙展現出來。最近專案打算正式將ko用起來，於是乎對ko和bootstraptable做了一些封裝，在此分享出來供園友們參考。封裝

JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案（四）：自定義T4模板快速生成頁面

前言：上篇介紹了下ko增刪改查的封裝，確實節省了大量的js程式碼。博主是一個喜歡偷懶的人，總覺得這些基礎的增刪改查效果能不能通過一個什麼工具直接生成頁面效果，啥程式碼都不用寫了，那該多爽。於是研究了下T4的語法，雖然沒有完全掌握，但是算是有了一個大致的瞭解，給需要自定義模板的園友們提供一個參考。於是乎有了今天

JS元件系列——分享自己封裝的Bootstrap樹形元件：jqTree

前言：之前的一篇介紹了下如何封裝自己的元件，這篇再次來體驗下自己封裝元件的樂趣。看過博主部落格的園友應該記得之前分享過一篇樹形選單的使用JS元件系列——Bootstrap 樹控制元件使用經驗分享，這篇裡面第一個Jquery Tree，只是用簡單樣式和js去實現了效果，沒有給出一個系統的封裝，這篇博主就來試試

JS元件系列——Bootstrap右鍵選單解決方案：ContextMenu

前言：有段時間沒發表隨筆了，過個年人都變得懶了。新年剛來上班，今天正好得空，將去年遺留的兩個小元件總結記錄下。有朋友跟我說：你的bootstrap元件要能夠形成一個可以滿足一般專案需求的系列元件，才有真正的實用價值。想想說得在理。這不今天來總結下bootstrap的一個小元件的應用。好了，不說廢話，進入正題吧

JS元件系列——Bootstrap元件福利篇：幾款好用的元件推薦

前言：之前分享過很多bootstrap常用元件，包括表格、表單驗證、檔案上傳、複選下拉框、彈出框等。這段時間，博主又收藏了一些好用的元件（有些在專案中已經用起來了），經過兩天的時間，已經整理出了一部分，本著“好東西要與人分享”的原則，今天還是來點福利，將博主收藏的東西分享出來，供需要的園友參考。元件大部分都是

JS元件系列——Bootstrap寒冬暖身篇：彈出框和提示框效果以及程式碼展示

前言：對於Web開發人員，彈出框和提示框的使用肯定不會陌生，比如常見的表格新增和編輯功能，一般常見的主要有兩種處理方式：行內編輯和彈出框編輯。在增加使用者體驗方面，彈出框和提示框起著重要的作用，如果你的系統有一個友好的彈出提示框，自然能給使用者很好的頁面體驗。前面幾章介紹了bootstrap的幾個常用元件，這

JS元件系列——Bootstrap元件福利篇：幾款好用的元件推薦（二）

前言：上篇 JS元件系列——Bootstrap元件福利篇：幾款好用的元件推薦分享了幾個專案中比較常用的元件，引起了許多園友的關注。這篇還是繼續，因為博主覺得還有幾個非常簡單、實用的元件，實在不願自己一人獨享，沒辦法，誰讓博主這麼愛分享呢~~ 七、多值輸入元件manifest 關於文字框的多值輸入，一

JS元件系列——Bootstrap檔案上傳元件：bootstrap fileinput

前言：之前的三篇介紹了下bootstrap table的一些常見用法，發現博主對這種扁平化的風格有點著迷了。前兩天做一個excel匯入的功能，前端使用原始的input type='file'這種標籤，效果不忍直視，於是博主下定決心要找一個好看的上傳元件換掉它。既然bootstrap開源，那麼社群肯定有很多關於

JS元件系列——Form表單驗證神器： BootstrapValidator

前言：做Web開發的我們，表單驗證是再常見不過的需求了。友好的錯誤提示能增加使用者體驗。博主搜尋bootstrap表單驗證，搜到的結果大部分都是文中的主題：bootstrapvalidator。今天就來看看它如何使用吧。一、原始碼及API地址介紹它之前，還是給出它的原始碼以及API的地址吧。

JS元件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

前言：前天剛寫了篇JS元件系列——Bootstrap Table 表格行拖拽，今天接到新的需要，需要在之前表格行拖拽的基礎上能夠同時拖拽選中的多行。博主用了半天時間研究了下，效果是出來了，但是感覺不盡如人意。先把它分享出來，以後想到更好的辦法再優化吧。一、效果展示 1、拖動前 2、拖動中

JS元件系列——開源免費圖表元件：Chart.js

前言：最近被開源免費得有點上火了，各種元件首先想到的就是是開源否、是否免費、是否和bootstrap風格一致。想著以後做報表肯定要用到圖表元件的，於是在Bootstrap中文網上面找到了Chart.js，總的來說，這個元件不能說最好，但是對於一般不太複雜的報表是夠用了。今天就來看看它如何使用吧。一、元件比

JS元件系列——使用HTML標籤的data屬性初始化JS元件

前言：最近使用bootstrap元件的時候發現一個易用性問題，很多簡單的元件初始化都需要在JS裡面寫很多的初始化程式碼，比如一個簡單的select標籤，因為僅僅只是需要從後臺獲取資料填充到option裡面，可是從後臺取資料就需要js的初始化，所以導致頁面初始化的時候js的初始化程式碼裡面出現很多重複

JS元件系列——圖片切換特效：簡易抽獎系統

相關推薦