JS組件開發---調色按鈕

mist14 發布于2019-08-30 13:20 / 1457人閱讀

摘要：下面是我用寫調色按鈕的整個過程首先我需要做的是一個調色按鈕四個按鈕依次代表顏色中的四個參數。代碼有很大一部分可以復用的，也沒有做優化。暫時先這樣，有時間再修改

在學習到實踐的過程中，我想應該需要有以下的步驟：
首先要有一個明確的目標，要分析實施的過程中以自身已有的知識水平有可能出現的問題，然后列出依次要解決的問題，再依照問題找答案，把問題都解決就可以出個測試版咯，當然，最后有能力可以做代碼上的優化甚至性能優化方面的工作。
下面是我用javaScript寫調色按鈕的整個過程：

首先我需要做的是一個調色按鈕：四個按鈕依次代表顏色rgba中的四個參數。
需要思考的問題是：1、鼠標事件拖放dom元素 2、怎么控制拖動的dom元素只能水平拖動 3、怎么把元素的拖動轉換成顏色值和透明度的改變

問題最終解決：
1、鼠標拖放dom元素需要用到onmousedown、onmousemove、onmouseup的鼠標事件（順便提一下：onmousedown和mousedown的區別是onmousedown是js原生，而mousedown是封裝了onmousedown方法的jQuery方法）
2、讓子元素固定在父元素內移動即可控制子元素只在水平移動
3、通過拖動的占整個進度條的權重可以轉換成對應的顏色值以及透明度值（詳細情況看代碼注釋）

手敲一小時出來的代碼和效果圖
代碼：





無標題文檔





           
       
       R:0
    
    
    
       
       G:0
    
    
    
       
       B:0
    
    
    
       
       opacity:1(default)

下面是效果圖：
R/G/B/A分別代表rgba的四個參數，其中透明度的默認值時1

主要完成了功能

最下面的是效果顯示的div

本來想詳細步驟完整地寫出來，不過我想這個也不難，又耗費時間，所以草草收場。js代碼有很大一部分可以復用的，也沒有做優化。暫時先這樣，有時間再修改

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115486.html

JS組件開發---調色按鈕

摘要：下面是我用寫調色按鈕的整個過程首先我需要做的是一個調色按鈕四個按鈕依次代表顏色中的四個參數。代碼有很大一部分可以復用的，也沒有做優化。暫時先這樣，有時間再修改在學習到實踐的過程中，我想應該需要有以下的步驟：首先要有一個明確的目標，要分析實施的過程中以自身已有的知識水平有可能出現的問題，然后列出依次要解決的問題，再依照問題找答案，把問題都解決就可以出個測試版咯，當然，最后有能力可以...

Cc_2011 2019-08-20 13:36 評論0 收藏0
JS組件開發---調色按鈕

摘要：下面是我用寫調色按鈕的整個過程首先我需要做的是一個調色按鈕四個按鈕依次代表顏色中的四個參數。代碼有很大一部分可以復用的，也沒有做優化。暫時先這樣，有時間再修改在學習到實踐的過程中，我想應該需要有以下的步驟：首先要有一個明確的目標，要分析實施的過程中以自身已有的知識水平有可能出現的問題，然后列出依次要解決的問題，再依照問題找答案，把問題都解決就可以出個測試版咯，當然，最后有能力可以...

ACb0y 2019-08-01 16:11 評論0 收藏0
創建可維護的設計規范（Living Style Guide）

摘要：創建可維護的設計規范為什么需要相信團隊工作中，不管是前端還是設計師都有被視覺統一問題折磨過的美好經歷。所以在這，我先略過視覺稿，直接來說如何創建一分靈活可維護的設計規范。創建可維護的設計規范（Living Style Guide）為什么需要 Style Guide 相信團隊工作中，不管是前端還是設計師都有被視覺統一問題折磨過的美 (dan) 好 (teng) 經歷。特別是在中大...

sutaking 2019-08-30 13:12 評論0 收藏0
【理解chrome開發者工具】 part1 編輯與調試

摘要：類似一個文本編輯器。顯示請求瀑布流。基于平均水平的網絡速度和設備性能作出的評估。方便開發者少用鼠標。而在面板中是打開具體文件。顧名思義，觀察這個斷點發生之前，被調用過的函數。在開發者工具的中，我們可以設置永久名單。簡單復習各個面板 Elements 瀏覽DOM樹，瀏覽樣式。 Console 一個REPL。小技巧：在任何非Console面板中，按ESC可以調出一個小的Console...

Shisui 2019-08-23 18:01 評論0 收藏0