<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

【前端】參考C站動態發紅包界面，高度還原布局和交互

2023-2-17 前端達人

目錄

1、界面效果

2、界面分析

2.1、整體結構

3、代碼實現

3.1、標題區域布局

3.2、表單區域

3.2.1、祝福語

3.2.2、紅包數量

3.2.3、紅包總金額

3.2.4、余額支付

3.3、確認按鈕區域

4、完整代碼

5、基礎知識點

1、界面效果

完成效果

C站發紅包界面

2、界面分析

2.1、整體結構

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

2.2、標題

底部背景、標題文本、右上角關閉按鈕

2.3、表單

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

2.4、按鈕

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

3、代碼實現

3.1、標題區域布局

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）關閉按鈕

在右上角添加一個關閉按鈕，一般可以設置一個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。這樣關閉按鈕圖標就會以它所在的父級定位，否則可能會布局錯位，比如下面錯位效果

正確布局

樣式代碼




    

        

            

            

        

        

            
                <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、表單區域

3.2.1、祝福語

1）組成元素

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

2）calc函數

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

需要特別注意，函數內的參數值前后都需要保留一個空格，例如：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全局數組參數變量保存。

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

交互代碼




    

        

            

            

        

        

            
                <script type="text/javascript">
            

        

    

    

        

            

            

        

        

            
                 $(function () {
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                  // 祝福語
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                  // Math.random() - 隨機函數會產生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="請填寫紅包祝福語或標題" value="成就一億技術人!" />
            

        

    

    

        

            

            

        

        

            
                  <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、紅包數量

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

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

布局效果

布局代碼




    

        

            

            

        

        

            
                <div class="content-label">
            

        

    

    

        

            

            

        

        

            
                 <div class="cl-text">
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                  <span>紅包數量</span>
            

        

    

    

        

            

            

        

        

            
                 </div>
            

        

    

    

        

            

            

        

        

            
                 <div class="cl-input">
            

        

    

    

        

            

            

        

        

            
                  <input placeholder="請填寫紅包數量" value="" />
            

        

    

    

        

            

            

        

        

            
                  <span>個</span>
            

        

    

    

        

            

            

        

        

            
                 </div>
            

        

    

    

        

            

            

        

        

            
                </div>

交互效果

交互代碼




    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                 txtCount = $(this).val();
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                 }
            

        

    

    

        

            

            

        

        

            
                 else {
            

        

    

    

        

            

            

        

        

            
                  if (txtCount <= 0) {
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                  $(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="請填寫紅包總金額" 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、文本邊框交互邏輯

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

交互效果

交互代碼




    

        

            

            

        

        

            
                // 文本框點擊事件
            

        

    

    

        

            

            

        

        

            
                $('.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、確認按鈕區域

1）支付額文本

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

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）交互代碼




    

        

            

            

        

        

            
                // 紅包個數
            

        

    

    

        

            

            

        

        

            
                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、完整代碼

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

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

5、基礎知識點

calc()函數	可用于高寬度精準布局，更加合理布局
position和relative	相對和絕對定位，同樣有助于合理定位和布局
Math.random()	隨機函數，隨機產生0~1的值
keyup()	鍵盤彈上事件
click()	元素點擊事件
blur()	離開焦點事件

總結：前端布局，要玩出花樣和效果，還是需要點藝術天賦。總之，挺有趣的，剛入門可能會覺得比較難，當你熟練之后，還是挺有趣的！

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

« 信息層級，沒你想象的那么難分析五種消息通知 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合