前端抽獎設置

① 前端怎麼設置第20個div後同級div的樣式

前端設置第20個div後同級div的樣式div樣式：
DIV 上游標的 樣式 .clip: 設置 剪輯矩形.例:< div style="font:16px 宋體;width:600px;height:200px; cursor:help; clip:rect(0px 100px 20px 0px); line-height:20px。

② 前端怎麼將一個div設置成透明的呢

為div設置樣式，opacity是設置透明度的，取值為0-1。想要透明，就是將opacity設置為0即可

③ 誰有 九宮格抽獎的源碼 注意:是可以設置抽獎概率的

• 你是什麼用途？

  
  

• a.如果抽獎內容價值比較大，得考慮到演算法的安全性，保證絕對的概率，也就是能彩票一樣，如果是100W的大獎，不能重復出現好幾次。計算機的隨機概率是不穩定的，所以需要一套完整的演算法來保持概率，進行矯正和干預。上面說道的是隨機概率。

• b.如果是獎池形的，就需要用維護獎池的演算法來實現，比如1等獎10個二等獎100個三等獎1000個，10W的不中獎，這就形成了你的獎池，你每次抽獎是從這個池中取到一個號碼，為了維護中獎率，你需要再拿走一個號碼以後再給獎池補充一個新的號碼。

• c.總之這是一個非常復雜的過程，建議你使用國家的開獎中心的數據來維護你自己的抽獎內容，抽獎中心給的內容演算法是完整的，你取到她們算出的結果當作你們計算的依據。

  
  

• 如果是簡單實現，不考慮後果的話，你可以去前端源碼下載站就能輕松找到源碼

  
  

• 以上是我個人觀點，如果錯誤，敬請原諒。

  
  

• 這個拍版好難用

④ 前端頁面的插件有哪些

工具類

方便操作對象，數組等的工具庫

• underscore.js

• lo-dash與underscore.js的api基本一致。與underscore比其優勢是，效率高；可自定義構建

• Sugar在原生對象上增加一些工具方法

• functional.js提夠了一些Curry的支持

• Watch.js監視對象或屬性的變化

• bacon.js函數式編程，cool

• streamjs用流的方式來對數組，對象進行系列操作

非同步流程式控制制

• eventproxy朴靈出品

• Arbiter.js詳細

• 發布訂閱

• qPromise風格的

• Async.js

mock

• Mock.js生成隨機數據和mock Ajax 請求

• jquery-mockjaxmockajax請求

時間庫

• moment

• datejs

瀏覽器探測

• Bowser探測具體瀏覽器和版本

• ua-parser-js探測具體瀏覽器和版本，操作系統，設備類型等

調試

• console-polyfill能放心的使用 console.log()之類的console方法

• log讓控制台輸出的log有樣式

• Konsole.js在頁面的一個元素里輸出log信息詳細

• uri.jsuri操作

• cookie增刪改cookie的工具庫

• director前端路由庫詳細

• BigDecimal.js提高精度的數字操作

• JSDoc根據javascript文件中注釋的信息，生成API文檔詳細

• hotkeys鍵盤事件的封裝

• MD5用 MD5 的方式加密文件的庫

瀏覽器增強類

讓一些舊瀏覽器變牛逼的庫

• Selectivizr讓IE 6-8一些的css3選擇器

• ieBetter讓ie6-8有高級瀏覽器的特性

• ExplorerCanvas讓IE8-的瀏覽器支持canvas

• CSS3 Pie讓IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js時，box-radious的元素有背景色時，不顯示背景色。。。

• formFive讓舊的瀏覽器支持HTML5表單的一些特性，如 placeholder,autofocus

• https://github.com/anselmh/object-fit讓瀏覽器支持object-fit這css規則

• HTML5 Cross Browser Polyfills一堆Polyfills

• flexibility讓舊的 IE 也支持 Flexbox

選擇器增強

• Lining.js讓瀏覽器實現類似::nth-line(), ::nth-last-line()的效果

未歸類

• prefixfree用了它，寫css時，就不需要加瀏覽器的前綴了

表單類

• jquery-file-upload上傳文件組件詳細

• zTree文件樹形視圖控制項

• Treed樹編輯器。感覺展示的感覺很像思維導圖

• FileAPI對文件選擇框內的文件的一些處理

表單驗證

• .Validate詳細

• jQuery-Validation-Engine

表單元素美化

• uniform提供對下拉框，單，復選框，按鈕等表單元素的美化

• select2多選下拉框

• selectivity和unfirom比較類似

• DropKick下拉框，單，多選。外觀比uniform好

• switcheryios7風格的開關組件

• nouislider用滾動條來設置/控制（音量等）

• range.css美化input[type=range]元素的外觀

圖片類

• holderjs生成占點陣圖片

• lazyload

• imagesLoaded選取的圖片都載入好後執行調回

• CSSgram用CSS3的Filter實現Instagram濾鏡的庫

圖標類

• Icon Font匯總

• SVG做的圖標

• svgicons

• iconic

• HYBICON帶交互效果。如 hover, click

• HTML字元實體圖標

• http://www.amp-what.com/

• transformicons圖標點擊時，會有一些變換效果。如，加號變成叉號

• css3patternscss3 做的可平鋪紋理。瀏覽器兼容性不好。

瀏覽圖片

• fancybox彈出查看圖片，視屏等等demo

• yoxview彈出查看圖片，圖片尺寸縮放很自然

圖片牆

• wookmark

UI 框架

• WeUI由微信官方設計團隊為微信 Web 開發量身設計。

• Framework7

UI 組件類

拖拽

• dragula支持Draggable，Dropable和Sortable。感覺比jqueryUI的輕量級，好用的樣子

• angular-draguladragular 官方的 angular 版本

數據可視化(圖表)

• Echarts網路出品

• highcharts功能強大。是收費的。

• Plottable.JS基於D3的一個圖表庫

• flot文檔不給力

• chartJs中文文檔demo很漂亮，很清晰。比較輕量級。

• ichartJs中國的一個傢伙搞的，感覺還不錯。

時間選取組件

• foundation-datepicker

• DatePicker一個簡單的日歷詳細

• full calendar支持脫放的方式來改變待辦事宜的時間

• Simple Events Calendar外觀很喜歡。收費 5$

• jQuery ui datepicker經典，不是很好看

• pickadate輕量級，手機友好的，漂亮。但貌似只能在彈出層中顯示，而沒有下拉這種方式顯示。

• zebra-datepicker可配置性很強。但貌似只能在彈出在右上方。。。

• bootstrap-datepickerbootstrap風格。

• dateRangePicker選取時間段。bootstrap風格。該組件依賴Twitter Bootstrap, Moment.js和jQuery.

自定義滾動條

• perfect scrollbar輕量級的滾動條。外觀與mac上chrome的滾動條一樣。

• iscroll在移動設備上用不錯

載入(Loding)效果

• CSS SpinnersCSS做的

• Loaders.cssCSS做的

表格組件

• jsGridData Grid。詳細

• backgrid基於Backbone.js的DataGrid

• excellentexport把表格的內容生成excel。兼容 Firefox, Chrome, IE6+

• datatables表格可交互（對內容進行排序，刪除等）

• handsontable生成Excel外觀的數據

• JSpreadsheets表格數據的組件庫

選取顏色

• Spectrum

分享到SNS

• JiaThis生成分享代碼。

編輯器

• ace代碼編輯器，可以用來做demo演示

• ckeditor

• ueditor網路做的

• tinymce對html內容進行實時的編輯

• summernote在移動設備上用不錯

通知組件

• notie.js

HTML5播放器

• jwplayer被大量網站使用

• html5media簡單的h5player，輕量級

• jplayer功能強太，可換膚

展示

• Impress.js各種旋轉，和奇特的體驗

• fullPage全屏顯示。用滾輪來翻頁詳細

• zepto.fullpage專注於移動端的fullPage.js，依賴Zepto

• pagePiling和fullPage類似

• turn.js做一本書，帶漂亮的翻頁的效果

幻燈

• slidesjs挺好用的，只是那幻燈導航的CSS都要自己寫，呵呵詳細

• iSlider無任何插件依賴的手機平台javascript滑動組件詳細

• bgstretcher全屏幻燈，會隨著頁面大小的變化而變化。

• Swiper開源、免費、強大的移動端觸摸滑動插件Swiper中文網

• coin-slider兼容IE6。蠻好的~。不過其切換方式是一塊塊的。不能配置切換方式。。。

• wowslider幻燈切換時各種很炫的效果。收費。

• cycle2普通的幻燈，竟然不支持垂直滾動。。。

• jcarousel普通的幻燈，不兼容IE6

• reveal3d滾動。做ppt相當不錯

• nodePPT國人做的，做ppt也相當不錯。有些方面比 reveal做的還好。但生成導出的html有些問題

• roundabout3d切換，看的後面圖片的邊

彈出框

• Magnific-Popup兼容PC，Mobile。還不錯，有5k+的star

• layer國人開發的，兼容ie6+。不喜歡其調用方式。

動畫效果

• mixitup用漂亮的動畫效果來完成排序和篩選

• jQuery.Marquee跑馬燈效果

• quickflip卡片翻轉效果

• 卡片翻轉效果2兼容性可以。寫的比較簡單：1，只支持x方向翻轉 2,類名都是規定好的 3，只能被調用一次。 需要改寫一下。我的改進版見這里

• TheaterJS模擬兩個人在屏幕上對話

• midnight.js文字顏色隨著背景變，屌炸了

• color-animationjquery的顏色漸變動畫插件。jquery的動畫不支持顏色值的變化。改庫提供了這個支持。

• transit對元素進行css的變換

• tagcanvas3D標簽雲效果詳細

• iconate圖片切換動畫

• Snap.js左/右側導航的出現效果

• CSS shake抖動動畫

• ClickSpark.js點擊後的一些酷炫的效果

視覺差插件

• scrollorama比較簡單

• superscrollorama能做的效果更多，但要用第三方Tween的庫，使用起來比較復雜。

• scrolldeck

flash

• swfobj能夠自動檢測PC、Mac機器上各種主流瀏覽器對Flash插件的支持情況。它使得插入Flash媒體資源盡量簡捷、安全。而且它是非常符合搜索引擎優化的原則的。此外，它能夠避免您的HTML、XHTML中出現object、embed等非標准標簽，從而符合更加標准。詳細

抽獎

• wScratchPad刮刮卡刮獎效果

• jqueryrotate旋轉插件。可以用來做轉盤抽獎效果

用戶體驗增強類

• Intro.js用來介紹網站的功能很不錯。也可以做新手引導。

• blockUILolding組件。

• simple-hint提示信息。用css做的。兼容性IE 9+。

• dotdotdot文字溢出時，添加在文字末尾加省略號

• jQuery-menu-aim二級菜單的切換如Amazon主頁上一樣迅速

• AnythingZoomer放大鏡功能

• 美化/高亮語法代碼

• google-code-prettify

• DlHighlight僅支持JavaScript、CSS、XML、HTML 這4語法高亮

• please按要求隨機舒服的顏色

• Awesomplete輸入的智能提示，自動補全

• proTip提示。感覺比 Bootstrap 的 tip 好

• Hammerjs手勢庫。封裝了 Swipe, Tap, Pinch, Pan等手勢

動畫

• velocity提高Jquery動畫的性能。以及顏色動畫之類的新特性。

SVG

• Snap.svg操作 SVG 的 JS 庫。號稱 SVG 的 jQuery。demo

• walkway以動畫的方式，漸漸地畫出 SVG 的路徑。

測試

• Mocha

• Chai

• Should

• Snoion

• DeviceMock.jsmock 設備。

其他類

• ZeroClipboard將內容復制到剪切板兼容主流瀏覽器的解決方案詳細

• html2canvashtml轉化成canvas，可以用來做截圖。詳細

• Ink響應式html郵件框架

• 性能測試

• 抓取，解析RSS內容（不能跨域，所以後台要做代理，所謂的解析Rss其實就是解析xml）

• jFeed

• jRss簡單版的jFeed

• scriptcam與攝像頭交互

• cylon.js機器人框架，支持35個平台

• Masonry一個瀑布流框架

• devices.css移動設備邊框的外觀。做原型的時候用不錯。

Bootstrap相關類

• Bootbox.js對bootstrap的彈出框做的一些封裝

• 免費皮膚

• AdminLTE

JS Plugins倉庫

• jQuery Cards高質量的 jQuery 插件網站

• jster

• node moles

• npmrankSort npm packages by page rank

• YOU MIGHT NOT NEED JQUERY PLUGINS不依賴 jQuery 的 js 插件。

• awesome-nodejs

• Libraries.io各種語言的庫

• OniUI去哪兒網做的一套基於Avalon的框架

常用的移動端框架

zepto.js

語法與jquery幾乎一樣，會jquery基本會zepto~

最新版本已經更新到1.16

iscroll.js

解決頁面不支持彈性滾動，不支持fixed引起的問題~

實現下拉刷新，滑屏，縮放等功能~

最新版本已經更新到5.0

underscore.js

筆者沒用過，不過聽說好用，推薦給大家~

該庫提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象。

最新版本已經更新到1.8.2

滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁面的效果

slip.js

iSlider.js

fullpage.js

swiper.js

flex布局

flex布局目前可使用在移動中，並非所有的語法都全兼容，效果良好~

⑤ 前端pc端如何在根目錄設置字體大小

選中目錄內容，打開電腦的文檔，選中目錄內容。點擊字體，滑鼠右擊，點擊字體選項。選擇字型大小，選擇上面的字型大小即可。
打開需要修改目錄字體大小的文檔，在文檔裡面點擊引用，目錄。進入到目錄頁面角後點擊導航欄中的目錄選項。切換到目錄界面之後，點擊下面的修改選項。然後在樣式裡面選中需要修改的目錄，點擊下面的修改選項。進入到修改樣式頁面之後，在格式裡面選中需要的字體，並選擇字型大小大小，然後設置字體顏色，點擊確定即可。
前端字體設置大小控制來源，決定著顯示在頁面上字體大小，為了方便後期處理起來方便最好先設定一個字體大小。

⑥ 班班通抽獎怎麼弄

抽獎步驟：
這就要看你有沒有編程基礎了，小程序趨於前端多一些。如果你有基礎可能會快一點。
如果沒有，那估計得一年左右能上手吧，而且要你耐心好。如果你要自學的話，手機上肯定是不行的。
你得去官網去下開發平台，和一些資料。去各個網站學習。
這些上邊都會有一些專業人士分享心得供你學習，現在有專門做小程序的團隊。
很多小程序不是出自於自己的手，而是你提供需求別人給你做。所以看你的選擇了，一定要有耐心。

⑦ java 逢幾中獎(見詳細說明)

首先我們假設有個輸入框給我們輸入中獎的數字，這個數字可以保存在後台也可以保存在前端，這可以取決於你用的是什麼樣前端開發，我們假設存放在後台，那麼抽獎到的人是否中獎我們就會在後台進行處理，這個時候我們就需要在後台同樣有一個參數對抽獎人進行了抽獎的次數作保存，抽獎人每抽一次那個參數就加一，然後去和前面的那個數字做比較，相等就中獎了。如果前端是用jsp做的話就更簡單了，所有的事情都可以直接在前端就完成了。

⑧ js寫抽獎轉盤怎麼設置中獎幾率

js用向後端發送請求，然後後端通過一些演算法計算出要中的獎項或者旋轉的角度，返回到前端，js根據返回的獎項或者旋轉的角度，來決定最終停止的位置。

中獎幾率基本不寫在js里，因為js可以被破解和修改，都是寫在後端的。

⑨ 公司年會要抽獎，那些抽獎的小程序是在那裡獲取的呀

年底已到，大大小小的公司都已經開始舉辦年會了，年會年年開，但是一般公司年會都是除了吃飯就是看節目，連最吸引人的抽獎環節也毫無新意。那麼，怎樣讓年會活動變得有新意呢？用箱子抽獎，全看台上的人表演了，太沒意思。那也可以來個好玩的，弄個轉盤進行抽獎活動。發一下自己寫的公司抽獎程序。需求：公司年會要一個抽獎程序，轉盤上的每一個人名是隨機中獎的，中獎後的人不可以再次中獎，按住抽獎，就會一直在轉，放開後，要再轉一兩圈才停。呵，剛好自己在學python cocos2d, 就用這個剛學的東東，雖然只學了點皮毛.首先我們看需求：我們想弄一個抽獎系統，在抽獎的時候我們希望針對不同的獎品有可以設置不同的中獎概率，還有就是我們不想一個時間馬上就把所有的獎品就發送出去了，最好能是在每幾名中產生一名。同時要兼顧後面的，不要前面的人把獎品全部抽走了後面就沒有獎品了。前端時間有個需求是客戶端雙端APP內嵌入整個轉盤抽獎的web子系統，具體是要在後台能夠控制大轉盤抽獎的獎項數，和用戶免費抽獎的次數，並且免費抽獎使用完，用戶可以觀看廣告進行抽獎或使用積分抽獎。正好最近有空，出了這篇教程，解析轉盤抽獎的實現過程。

⑩ 關於B端系統的產品設計

過去的一年，負責的業務主要聚焦於平台運營，隨著業務模式的成熟，也負責建設了許多營銷系統。

本文將以此前實際設計的案例與大家分享 關於B端 系統的產品設計。

關於系統，個人認為是將 無序、散亂的業務抽象成中心化、標准化的有序服務。 而中台則在系統之上再上升一層，將 系統的共性抽象成通用服務。

而中心化和標准化的動機又是什麼呢？較高頻的動機有三條：

1）  業務模式足夠成熟

2）  高頻需求重復佔用資源，且不具備復用性。

3）  舊有系統耦合性強，延展性弱。

在企業的早期階段，一些非高頻的共性需求並沒有可依賴的中台系統。為了迅速上線及滿足業務的需求，大多會將其耦合於該系統之中。

但當其他系統有相同需求時無法復用，需要額外開發相同的邏輯。不僅重復消耗資源，後續的迭代難度也會不斷提升。

通過需求分析所確定的產品定位，能夠明確系統要解決的 核心問題 是什麼。而梳理業務流程，則作用在 問題解決的深度。

理解業務流程目的是梳理系統架構，從而劃分系統的邊界。邊界清晰能夠讓系統各司其職，專注於自身的功能，並盡量提供可復用的能力。

以抽獎系統為例，輸出其系統架構：

對於抽獎系統而言，它應該專注於抽獎的規則，如：抽獎次數來源、中獎概率、限中次數等等。

對於抽出的獎品是什麼，獎品怎麼發放，應該由獎品管理、獎品發放系統去消化；而獎品發放所觸發的觸達則應該交由觸達系統。

什麼時候應該將非核心需求抽象成中台系統，什麼時候又應該耦合呢？個人認為應從其需求頻次、強度以及投入產出比考慮。

在梳理了新系統與現有系統的耦合關系後，下一步則是確認中心化的對象，中心化的方式不同，其核心邏輯、功能框架也會不同。

以獎品管理系統為例，其中心化的方案可以有兩種，如下圖所示：

方案1以獎品作為中心，一個獎品將能夠被多個業務方所使用。因其層級較少，產品、技術設計會更為簡單，後續業務方的操作也更為輕便；

而方案2以獎品池作為中心，每個獎池的獎品相互獨立，雖然方案更為復雜，但優勢是其數據相互獨立，更有利於成本核算以及風控。

當中心化的方案確定，系統的的核心邏輯及數據模型也就初見雛形了。

梳理功能框架相信大家都非常熟悉，本小節主要描述最小單元。 最小單元，指無法繼續拆解的功能，其通用性的強弱也決定著系統的延展性 。

以下將以前端配置化系統為例和朋友們分享，以下的示例分別是最基礎設計方式，以及有贊和筆者的設計方式：

1）固定組件、固定配置

第一種做法，是最基礎的做法。它的思路是對固定的組件進行固定的配置。

以抽獎活動為例：

上圖的兩種抽獎玩法對應著兩種前端樣式，左側是九宮格，右側是老虎機。這兩種樣式對應著頭圖、抽獎模塊、我的獎品及活動規則四個組件。

根據它們組件的共性，我們能抽象的最小單元是頁面頭圖、頁面底色、活動規則、抽獎按鈕的顏色、文字等內容。

由於共性不足，它們的最小單元已經無法延伸。當後續增加新的模板「大轉盤」時，我們就需要再次抽象並迭代，這種設計方案是非常不靈活的，而且最小單元很可能會再次減少。

最小單元共性越少，延展性越差，後續開發的工作量越多。

從九宮格的「我的獎品」、老虎機的「活動規則」來看，它們屬於各自的私有屬性，原則上而言我們也能夠設計成配置項，但從投入產出比、延展性來看顯得不太劃算。

2）有贊：多種組件、獨立配置

有贊的設計思路也是比較常見的設計思路，它的每個組件擁有獨立的配置項。

上圖分別是有贊中拼團、砍價組件對應的配置項，在圖片的紅框部分是商品模塊的配置，同樣是自動獲取商品類型，拼團組件的配置項比砍價多了一個排序規則。

這種設計方式的優點是該組件能夠很輕易的適配業務方的需求，靈活性能夠達到最高。缺點則是組件的特性沒有辦法復用，某個商品模塊或按鈕的特性是無法復用到其他組件的商品模塊或組件之中。

結合了上述的兩種設計思路，根據實際業務方的訴求，筆者設計的思路為：多種組件、共用配置。

3）多種組件、共用配置

這種方式的設計思路是： 組件由模板與元素組成，模板決定元素的位置，元素負責視覺及交互的配置。

元素指的是： 文字、圖片、線條 ，它們是本系統的最小單元。

其拆解示例如下圖：

商品組件由圖片、文字元素及按鈕組件組成，而按鈕組件由線條元素及文字元素組成。

關於元素的拆解思路如下圖：

通過這樣的解構，元素的交叉組合能夠形成不同樣式的組件。

當業務方有新的特性需求，只需要迭代元素的屬性， 一次迭代所有的組件都能夠使用這個特性， 即避免重復開發也保證了其復用性。產品、研發及測試的工作量的也大大減少。

除了視覺配置，另一部分則是交互的配置，其拆解如下： 

最小單元在實際的設計過程中，還應權衡投入產出比， 不應為了解構而解構。

數據統計，有兩點建議：定義清晰、數據獨立。後者與系統架構有關，由於系統之間的相互依賴，會有關聯的數據需要查詢。

個人的經驗是讓系統盡量只消化系統本身的數據，對於關聯的數據可以查詢數據源讓核心系統做整合，最粗糙的設計方式則是直接跳轉至關聯的系統查詢。

1）角色與許可權設計

根據組織架構以及權責范圍，系統的使用角色所對應的許可權也不同，常見的許可權有增、刪、改、查以及審批流。

2）版本計劃

版本的計劃。可以是對完整系統的分版本上線，也可以是對業務的預估推測系統後續需要延展的功能，這會非常影響系統的技術設計方案。

3）交互設計及文檔撰寫

隨著業務認知的提升、技能的熟練，產品設計的能力可能會達到瓶頸 。 近期的想法是，面向價值設置需求優先順序，不僅是企業、業務，還有支撐部門和自己。

以前喜歡做有難度的需求，但難度卻不代表價值，我想好的產品設計一定能 幫助業務方帶來可視、可觀的數據成果。

給多方創造價值，才能夠自上而下的推動跨部門協作，持續獲得資源以及成長。