目錄

1、界面效果

2、界面分析

2.1、整體結(jié)構(gòu)

2.2、標題

2.3、表單

2.4、按鈕

3、代碼實現(xiàn)

3.1、標題區(qū)域布局

3.2、表單區(qū)域

3.2.1、祝福語

3.2.2、紅包數(shù)量

3.2.3、紅包總金額

3.2.4、余額支付

3.3、確認按鈕區(qū)域

4、完整代碼

5、基礎知識點

---

1、界面效果

• 完成效果

• C站發(fā)紅包界面 

2、界面分析

2.1、整體結(jié)構(gòu)

上部分為標題、中間為表單、底部為確定按鈕

2.2、標題

底部背景、標題文本、右上角關(guān)閉按鈕

2.3、表單

祝福語文本、紅包數(shù)量文本、紅包總金額、當前余額文本顯示、以及前往充值按鈕

2.4、按鈕

左邊為需支付金額顯示，右邊為取消和確定按鈕

3、代碼實現(xiàn)

3.1、標題區(qū)域布局

1）背景圖片

圖片寬度380px像素，高度56px像素

2）背景圖片自動填充

布局一個div，寬度為400px像素，高度為56px像素，然后再設置背景圖片樣式，由于圖片本身寬度小于div寬度，div會多出20px像素，圖片會自動填充，默認效果如下

    


        


            


            

        

        


            

                <div style="width:400px;height:56px;background:url(/1674461966454.jpg);background-size: 100%;">
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

 

 3）圖片百分比顯示

再給div設置背景百分比縮放顯示，效果如下

background-size: 100%;

 4）文本

布局一個span標簽，顯示"添加紅包"文本，白色黑體，18號字體，加粗，左對齊，且左邊距20px像素。并設置div標簽56px像素垂直居中樣式，效果如下

5）關(guān)閉按鈕

在右上角添加一個關(guān)閉按鈕，一般可以設置一個svg標簽圖標，設置高28px，寬36px

• base64編碼圖標

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAA4CAYAAABez76GAAAAAXNSR0IArs4c6QAAAtVJREFUeF7tm2FO3DAQhR+0BVZt2QIFujfrQXqMHqQ3W4kflRYJrZBArV6EUTa7jj0ee0yILUUIZcb2fJnMsx3tEYAfAI4x3/YPwDOARwAPAJ76KI4AfAdwMl8+e5ET0j0AggMBXQBYNEA7BJhNfwmJgL6+XI3RLgFm0oaAmD3Motb2CdwREOsP61Br+wQeCIgKRiVrbZ/AEwGxzV3qfcnRFWm2JvUeRA5Qk/oAoCb1AUBN6gOAmtQHADWpDwBqUh8BqEn9AUhO5nmrSX0AkLnULxaL7gFtt9vu7EXatP4x4/UzyFTqGdx6vf7NSa5Wq19SSFr/GDi06QMyk3oX3HK5/MlJbDabPxJIWv9YOENAZlI/DFACSeMrAeNs+xlkKvUpgab4pEDp+wwBmUq9JGCJrRbKGCBzqY8JPMYmJ5QxQOZSz8mMAeB9qp0r6JJ6lQPa8BUzlfp+AD5ItKkFZ6hi/N9M6g893UOQ+nbS5UCJDDKTet/kfZBqwDmUQaZSL8mitwToCsBpjvSU9jGFV4wxnQP4Ig1Oaz+VIt2prvWn6CnJPAGZFuqYRWCMjTaDff7DdZCzM9lySAKX2OaE5QPEGsRaVKylBJziow3AB4iv2e3gvEg71qu/JlCNb0oAPkDdCh/A55ROQz7aAy+tf2h+/ftjgD4CuJF0JrHVHplq/WPnOgaIfVwCOIvtTGqnPXTX+sfMNwSo6uY1JoDSNiFARWtR6eBy9B8DiDbXAFiTZtdiABHKbF+1WECEVGUTWztlJYBoS1WrchRSC5QEEOdIe54Xzea3HVJAs4OUAoiQuFdjJn2qlfpW46YCcpC+lVxpW0EYG0cDyPXLDS0VLkdfb4HJzhxyBcVFJBXu3S0mcwFyxZufrplROfutmlUlAmEBJyRek/8tbAlA7om/C1AlATlQHIMLS35O4tnSpLLKAtCwhrCQExj/8vrwAo3gasxntMb9B9PXrmqWhf+yAAAAAElFTkSuQmCC

• 錯位布局

設置相對定位position樣式，位于右上角。它所在的父級就要設置絕對定位relative。這樣關(guān)閉按鈕圖標就會以它所在的父級定位，否則可能會布局錯位，比如下面錯位效果

•  正確布局

• 樣式代碼

    


        


            


            

        

        


            

                <style type="text/css">
            

        

    

    


        


            


            

        

        


            

                 .title { width: 400px; height: 56px; background: url(/1674461966454.jpg); background-size: 100%; line-height: 56px;position:relative; }
            

        

    

    


        


            


            

        

        


            

                 .title-text { font-size: 18px; font-weight: bold; color: #fff; font-family: 黑體; margin-left: 20px; }
            

        

    

    


        


            


            

        

        


            

                 .close { position: absolute; top: 0px; right: 0px; width: 36px; height: 28px; }
            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <div class="title">
            

        

    

    


        


            


            

        

        


            

                 <span class="title-text">添加紅包</span>
            

        

    

    


        


            


            

        

        


            

                 <img class="close" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAA4CAYAAABez76GAAAAAXNSR0IArs4c6QAAAtVJREFUeF7tm2FO3DAQhR+0BVZt2QIFujfrQXqMHqQ3W4kflRYJrZBArV6EUTa7jj0ee0yILUUIZcb2fJnMsx3tEYAfAI4x3/YPwDOARwAPAJ76KI4AfAdwMl8+e5ET0j0AggMBXQBYNEA7BJhNfwmJgL6+XI3RLgFm0oaAmD3Motb2CdwREOsP61Br+wQeCIgKRiVrbZ/AEwGxzV3qfcnRFWm2JvUeRA5Qk/oAoCb1AUBN6gOAmtQHADWpDwBqUh8BqEn9AUhO5nmrSX0AkLnULxaL7gFtt9vu7EXatP4x4/UzyFTqGdx6vf7NSa5Wq19SSFr/GDi06QMyk3oX3HK5/MlJbDabPxJIWv9YOENAZlI/DFACSeMrAeNs+xlkKvUpgab4pEDp+wwBmUq9JGCJrRbKGCBzqY8JPMYmJ5QxQOZSz8mMAeB9qp0r6JJ6lQPa8BUzlfp+AD5ItKkFZ6hi/N9M6g893UOQ+nbS5UCJDDKTet/kfZBqwDmUQaZSL8mitwToCsBpjvSU9jGFV4wxnQP4Ig1Oaz+VIt2prvWn6CnJPAGZFuqYRWCMjTaDff7DdZCzM9lySAKX2OaE5QPEGsRaVKylBJziow3AB4iv2e3gvEg71qu/JlCNb0oAPkDdCh/A55ROQz7aAy+tf2h+/ftjgD4CuJF0JrHVHplq/WPnOgaIfVwCOIvtTGqnPXTX+sfMNwSo6uY1JoDSNiFARWtR6eBy9B8DiDbXAFiTZtdiABHKbF+1WECEVGUTWztlJYBoS1WrchRSC5QEEOdIe54Xzea3HVJAs4OUAoiQuFdjJn2qlfpW46YCcpC+lVxpW0EYG0cDyPXLDS0VLkdfb4HJzhxyBcVFJBXu3S0mcwFyxZufrplROfutmlUlAmEBJyRek/8tbAlA7om/C1AlATlQHIMLS35O4tnSpLLKAtCwhrCQExj/8vrwAo3gasxntMb9B9PXrmqWhf+yAAAAAElFTkSuQmCC" alt="">
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

3.2、表單區(qū)域

3.2.1、祝福語

1）組成元素

紅色星號、文本、輸入文本框、刷新文本按鈕

2）calc函數(shù)

它屬于css3的功能，calc() 函數(shù)用于動態(tài)計算長度值。對于布局非常有作用。

需要特別注意，函數(shù)內(nèi)的參數(shù)值前后都需要保留一個空格，例如：width: calc(100% - 40px)；

3）刷新小圖標

樣式設置16x16高寬度

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA3NJREFUSEu1lX+IVFUUx7/nPpV1N1zbzNQsXFkUoZBCqH+KNhJikKid14QpsjLv3Uc/yCQpCcISot+yJZHz3qxj2xIxzozJYCCuWiREfxQZJIT9IgjKoq0l3WZ33v3GvN3ZdczdmWXr/vfePef7uefce84R/M9LGtVPFYvN+Lm0H8SVIhwi5BcFc7i1FScSiUQ4lU7DgN7e3MpyyLMAVK2YnBOoXVp37bscJAKk3i0uwvnRByFsmjQKv/KcxJGLnVJvZ69XI1hNkasAWUXCAXldxUYgAy0tTYlNmzYMXuwzBgjyu0HzzCUnMPObrKVbtnSdmyr8bDZrDQ7hAaHsJdEmIh8vv7Z5fSwWK1V9IkAQ5JeTdAEsJrAZ4BWRwbw5HV73fd/Wu6dM5tCKkdHwJMAVEHnTc+1HawCVj76+oy3DpaHPQKwG5ALA5kYBFf90unBDaMLPRaAEcrPr2l+OpW58pYL8E6B5FcAZAPMBtM8EUJHx/dwegtsF6j2t4xsnAJnMyaaR8m/fg1giFmI0shPELVhorvESiT/rpai6H6Ua5gdSypYyyxwn8XsUgd+bu4shjwH4Ubt2+4ED7y8wJmxLJu3vGhWv2vnBweMk7lSCe133/sNjAL/wFBG+CJE3PNfeNlPRmqcc5J8HzdMQ9Zznxp+tPtMANI4oeVw79uuzAfjp3DYa9kBUj+fGt49HMHE5j2kd3zsbQCqdfxLGvARRr3lufEdNikRkn3bth2YFCPL7QbMVIg97rv3WeKEV1hiGZ0Tw68JWLp2ueU0HJ6n8dO6nymtUImsrtTBZB37uC4BrxZL1OmkPNBpFJpNdMlpWAxTpEeEgQ+YAOetpe9UlhZbbCfIFERxzHftuETGNQHz/4AYCRVHqCMiVJNcILK11V1AD6OsrLB4uhaejYlOySzv27hkBRL4h2QHB17ip/UZv3brRGsBYP8nfHhoeB6hEsVs7iXfqQSYiEERDh2KSmDPvVLVJ/mvg+OnCDprwlYgucpRzrUem66hBkIsZsmZuVHwtJfc4jl287EQLgkObifIeElcDUoLgFCAfKZgPOzoWfdLZ2VmuRtbf/8GC88MX+gVcVv1HyB+Ya3mVg005MtPpbJuhehlgNwlrMlXyqaftW+ulrrpfdyZHJ/z7r9tAq1Ng7gDltNZ28j8DNCo0ld0/bOx/KATgarIAAAAASUVORK5CYII=

4）文本框默認高亮

input輸入文本框默認點擊選中會有一個高亮的效果，可以設置樣式去掉

outline:none;

5）隨機文本

設置隨機祝福語文本值，可設置js全局數(shù)組參數(shù)變量保存。

并且給右邊的刷新按鈕綁定點擊事件，然后在事件內(nèi)使用隨機函數(shù)進行隨機顯示

• 交互代碼

    


        


            


            

        

        


            

                <script type="text/javascript">
            

        

    

    


        


            


            

        

        


            

                 $(function () {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                  // 祝福語
            

        

    

    


        


            


            

        

        


            

                  var labelText = ['成就一億技術(shù)人!', '節(jié)日快樂', 'Hello World', '新春大吉!', '大吉大利', 'Bug Free'];
            

        

    

    


        


            


            

        

        


            

                  $('.cl-input img').click(function () {
            

        

    

    


        


            


            

        

        


            

                  // Math.random() - 隨機函數(shù)會產(chǎn)生0~1之間的值
            

        

    

    


        


            


            

        

        


            

                  var index = parseInt(Math.random() * labelText.length);
            

        

    

    


        


            


            

        

        


            

                  var text = labelText[index];
            

        

    

    


        


            


            

        

        


            

                  $('.cl-input input').val(text);
            

        

    

    


        


            


            

        

        


            

                  });
            

        

    

    


        


            


            

        

        


            

                 });
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

• 效果如下

• 布局代碼

    


        


            


            

        

        


            

                <div class="content-label">
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-text">
            

        

    

    


        


            


            

        

        


            

                  <span style="color:#f00;">*</span>
            

        

    

    


        


            


            

        

        


            

                  <span>祝福語</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-input">
            

        

    

    


        


            


            

        

        


            

                  <input placeholder="請?zhí)顚懠t包祝福語或標題" value="成就一億技術(shù)人!" />
            

        

    

    


        


            


            

        

        


            

                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA3NJREFUSEu1lX+IVFUUx7/nPpV1N1zbzNQsXFkUoZBCqH+KNhJikKid14QpsjLv3Uc/yCQpCcISot+yJZHz3qxj2xIxzozJYCCuWiREfxQZJIT9IgjKoq0l3WZ33v3GvN3ZdczdmWXr/vfePef7uefce84R/M9LGtVPFYvN+Lm0H8SVIhwi5BcFc7i1FScSiUQ4lU7DgN7e3MpyyLMAVK2YnBOoXVp37bscJAKk3i0uwvnRByFsmjQKv/KcxJGLnVJvZ69XI1hNkasAWUXCAXldxUYgAy0tTYlNmzYMXuwzBgjyu0HzzCUnMPObrKVbtnSdmyr8bDZrDQ7hAaHsJdEmIh8vv7Z5fSwWK1V9IkAQ5JeTdAEsJrAZ4BWRwbw5HV73fd/Wu6dM5tCKkdHwJMAVEHnTc+1HawCVj76+oy3DpaHPQKwG5ALA5kYBFf90unBDaMLPRaAEcrPr2l+OpW58pYL8E6B5FcAZAPMBtM8EUJHx/dwegtsF6j2t4xsnAJnMyaaR8m/fg1giFmI0shPELVhorvESiT/rpai6H6Ua5gdSypYyyxwn8XsUgd+bu4shjwH4Ubt2+4ED7y8wJmxLJu3vGhWv2vnBweMk7lSCe133/sNjAL/wFBG+CJE3PNfeNlPRmqcc5J8HzdMQ9Zznxp+tPtMANI4oeVw79uuzAfjp3DYa9kBUj+fGt49HMHE5j2kd3zsbQCqdfxLGvARRr3lufEdNikRkn3bth2YFCPL7QbMVIg97rv3WeKEV1hiGZ0Tw68JWLp2ueU0HJ6n8dO6nymtUImsrtTBZB37uC4BrxZL1OmkPNBpFJpNdMlpWAxTpEeEgQ+YAOetpe9UlhZbbCfIFERxzHftuETGNQHz/4AYCRVHqCMiVJNcILK11V1AD6OsrLB4uhaejYlOySzv27hkBRL4h2QHB17ip/UZv3brRGsBYP8nfHhoeB6hEsVs7iXfqQSYiEERDh2KSmDPvVLVJ/mvg+OnCDprwlYgucpRzrUem66hBkIsZsmZuVHwtJfc4jl287EQLgkObifIeElcDUoLgFCAfKZgPOzoWfdLZ2VmuRtbf/8GC88MX+gVcVv1HyB+Ya3mVg005MtPpbJuhehlgNwlrMlXyqaftW+ulrrpfdyZHJ/z7r9tAq1Ng7gDltNZ28j8DNCo0ld0/bOx/KATgarIAAAAASUVORK5CYII=" alt="">
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

3.2.2、紅包數(shù)量

布局和祝福語一樣，刷新按鈕換成了單位文本。

這里文本框有個離開焦點事件，如果判斷沒有輸入值，那么提示”請輸入數(shù)量"，并且紅包數(shù)量只能是正整數(shù)，文本框也變?yōu)榧t色邊框，默認則為藍色邊框

• 布局效果

• 布局代碼

    


        


            


            

        

        


            

                <div class="content-label">
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-text">
            

        

    

    


        


            


            

        

        


            

                  <span style="color:#f00;">*</span>
            

        

    

    


        


            


            

        

        


            

                  <span>紅包數(shù)量</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-input">
            

        

    

    


        


            


            

        

        


            

                  <input placeholder="請?zhí)顚懠t包數(shù)量" value="" />
            

        

    

    


        


            


            

        

        


            

                  <span>個</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

•  交互效果

• 交互代碼 

    


        


            


            

        

        


            

                $("#txtCount").blur(function () {
            

        

    

    


        


            


            

        

        


            

                 txtCount = $(this).val();
            

        

    

    


        


            


            

        

        


            

                 if (txtCount == undefined || txtCount == null || txtCount == '' || txtCount.trim() == '') {
            

        

    

    


        


            


            

        

        


            

                  $("i", $(this).parent()).show().html('請輸入數(shù)字！');
            

        

    

    


        


            


            

        

        


            

                  $(this).parent().addClass('red-border');
            

        

    

    


        


            


            

        

        


            

                 }
            

        

    

    


        


            


            

        

        


            

                 else {
            

        

    

    


        


            


            

        

        


            

                  if (txtCount <= 0) {
            

        

    

    


        


            


            

        

        


            

                  $("i", $(this).parent()).show().html('請輸入有效數(shù)字格式！');
            

        

    

    


        


            


            

        

        


            

                  $(this).parent().addClass('red-border');
            

        

    

    


        


            


            

        

        


            

                  }
            

        

    

    


        


            


            

        

        


            

                  else if (!isNaN(txtCount)) {
            

        

    

    


        


            


            

        

        


            

                  $("i", $(this).parent()).hide();
            

        

    

    


        


            


            

        

        


            

                  $(this).parent().removeClass('red-border');
            

        

    

    


        


            


            

        

        


            

                  }
            

        

    

    


        


            


            

        

        


            

                  else {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                  }
            

        

    

    


        


            


            

        

        


            

                 }
            

        

    

    


        


            


            

        

        


            

                });
            

        

    




    

3.2.3、紅包總金額

布局和前面一樣，這就是前端布局的魅力，有很多可以重用的東西

• 布局效果

• 布局代碼 

    


        


            


            

        

        


            

                <div class="content-label">
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-text">
            

        

    

    


        


            


            

        

        


            

                  <span style="color:#f00;">*</span>
            

        

    

    


        


            


            

        

        


            

                  <span>紅包總金額</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-input">
            

        

    

    


        


            


            

        

        


            

                  <input placeholder="請?zhí)顚懠t包總金額" value="" />
            

        

    

    


        


            


            

        

        


            

                  <span>元</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

3.2.4、余額支付

這里的布局和前面稍微多點東西，布局差不多。

這里只做讀取展示用，也可以用input輸入文本框，設置默認只讀即可

• 布局效果

• 布局代碼 

    


        


            


            

        

        


            

                <div class="content-label">
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-text">
            

        

    

    


        


            


            

        

        


            

                  <span style="color:#f00;">*</span>
            

        

    

    


        


            


            

        

        


            

                  <span>余額支付</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <div class="cl-input">
            

        

    

    


        


            


            

        

        


            

                  <label>當前余額：<b>51.25</b> 元</label>
            

        

    

    


        


            


            

        

        


            

                  <span class="span">前往充值 > </span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

3.2.5、文本邊框交互邏輯

當點擊文本框時，先判斷是否已經(jīng)提示無效信息，也就是已經(jīng)有紅色邊框，有則不顯示藍色邊框，沒有則顯示藍色邊框。當離開文本框焦點，那么則移除藍色邊框

• 交互效果

• 交互代碼

    


        


            


            

        

        


            

                // 文本框點擊事件
            

        

    

    


        


            


            

        

        


            

                $('.cl-input input').click(function () {
            

        

    

    


        


            


            

        

        


            

                var className = $(this).parent().attr('class');
            

        

    

    


        


            


            

        

        


            

                if (className.indexOf('red-border') < 0) {
            

        

    

    


        


            


            

        

        


            

                $(this).parent().addClass('blue-border');
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }).blur(function () {
            

        

    

    


        


            


            

        

        


            

                $(this).parent().removeClass('blue-border');
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

3.3、確認按鈕區(qū)域

1）支付額文本

這里布局左定位，金額數(shù)字加紅色字體

2）取消和確認按鈕

取消按鈕鼠標移動上去邊框變深，直接使用css的hover屬性即可完成。

確認按鈕的效果使用同樣的方式

3）布局效果

 

 4）布局代碼

    


        


            


            

        

        


            

                <!--按鈕-->
            

        

    

    


        


            


            

        

        


            

                <div class="button">
            

        

    

    


        


            


            

        

        


            

                 <div class="price">
            

        

    

    


        


            


            

        

        


            

                  <span>需支付：</span>
            

        

    

    


        


            


            

        

        


            

                  <span id="priceSpan" style="font-size:20px;color:#f00;">0.00</span>
            

        

    

    


        


            


            

        

        


            

                  <span>元</span>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                 <div class="btn">
            

        

    

    


        


            


            

        

        


            

                  <div class="btnCancel">
            

        

    

    


        


            


            

        

        


            

                  <span>取消</span>
            

        

    

    


        


            


            

        

        


            

                  </div>
            

        

    

    


        


            


            

        

        


            

                  <div class="btnOk not-allowed">
            

        

    

    


        


            


            

        

        


            

                  <span>確定</span>
            

        

    

    


        


            


            

        

        


            

                  </div>
            

        

    

    


        


            


            

        

        


            

                 </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    




    

5）交互代碼

    


        


            


            

        

        


            

                // 紅包個數(shù)
            

        

    

    


        


            


            

        

        


            

                var txtCount = 0;
            

        

    

    


        


            


            

        

        


            

                var txtPrice = 0;
            

        

    

    


        


            


            

        

        


            

                $("#txtCount").keyup(function () {
            

        

    

    


        


            


            

        

        


            

                 txtCount = $(this).val();
            

        

    

    


        


            


            

        

        


            

                 $("#priceSpan").html(txtCount * txtPrice);
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 紅包總金額
            

        

    

    


        


            


            

        

        


            

                $("#txtPrice").keyup(function () {
            

        

    

    


        


            


            

        

        


            

                 txtPrice = $(this).val();
            

        

    

    


        


            


            

        

        


            

                 $("#priceSpan").html(txtPrice);
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

4、完整代碼

紅包數(shù)量和紅包金額那里還有幾個交互和邏輯判斷，有興趣的小伙伴可以自己實現(xiàn)下，有疑問的可咨詢了解

完整代碼可以查看gitCode：小5聊 / Csdn Red Bag Html · GitCode

 

5、基礎知識點

總結(jié)：前端布局，要玩出花樣和效果，還是需要點藝術(shù)天賦?？傊τ腥さ?，剛?cè)腴T可能會覺得比較難，當你熟練之后，還是挺有趣的！

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司