2. 程式人生 > 其它 >前端學習-第二階段-day05

前端學習-第二階段-day05

阿新 • • 發佈：2020-12-21

技術標籤：前端學習日記

練習目標，寫個商品清單，自動計算分類總價，和所有分類總價之和

在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <
 
style>
        .all_price {
            margin-top: 10px;
            border-top: 1px solid #ccc;
            width: 280px;
            text-align: right;
        }
    </style>
</head>

<body>

    <li>
        <button>-</button>
        <span>0</span>
        <
 
button>+</button>
        <span>單價：</span><span>12.5</span><span></span>元 小計：</span>
        <em>0</em>
        <span>元</span>
    </li>
    <li>
        <button>-</button>
        <span>0</span>
        <
 
button>+</button>
        <span>單價：</span><span>8.5</span><span>元 小計：</span>
        <em>0</em>
        <span>元</span>
    </li>
    <li>
        <button>-</button>
        <span>0</span>
        <button>+</button>
        <span>單價：</span><span>20</span><span>元 小計：</span>
        <em>0</em>
        <span>元</span>
    </li>
    <li>
        <button>-</button>
        <span>0</span>
        <button>+</button>
        <span>單價：</span><span>100</span><span>元 小計：</span>
        <em>0</em>
        <span>元</span>
    </li>
    <li>
        <button>-</button>
        <span>0</span>
        <button>+</button>
        <span>單價：</span><span>518</span><span>元 小計：</span>
        <em>0</em>
        <span>元</span>
    </li>
    <li>
        <button>-</button>
        <span>0</span>
        <button>+</button>
        <span>單價：</span><span>888</span><span>元 小計：</span>
        <em>0</em>
        <span>元</span>
    </li>
    <div class="all_price">總計：0元</div>
    <script>
        var oLi = document.getElementsByTagName("li");
        for (i = 0; i < oLi.length; i++) {
            price(oLi[i]);
        }

        function price(n) {
            var all_price = document.getElementsByTagName("div")[0];
            var oBtn1 = n.getElementsByTagName("button")[0];
            var oBtn2 = n.getElementsByTagName("button")[1];
            var oSpan1 = n.getElementsByTagName("span")[0];
            var oSpan2 = n.getElementsByTagName("span")[2];
            var em = n.getElementsByTagName("em")[0];
            var inner = Number(oSpan1.innerHTML);
            var unitPrice = Number(oSpan2.innerHTML);

            oBtn1.onclick = function () {
                inner -= 1;
                if (inner < 1) {
                    inner = 0;
                }
                oSpan1.innerHTML = inner;
                em.innerHTML = inner * unitPrice;
                var c = 0;
                for (i = 0; i < oLi.length; i++) {
                    var h = document.getElementsByTagName("li")[i].getElementsByTagName("em")[0].innerHTML;
                    c += -(-h);
                }
                all_price.innerHTML = "總計：" + c + "元";
            }

            oBtn2.onclick = function () {
                inner += 1;
                oSpan1.innerHTML = inner;
                em.innerHTML = inner * unitPrice;
                var c = 0;
                for (i = 0; i < oLi.length; i++) {
                    var h = oLi[i].getElementsByTagName("em")[0].innerHTML;
                    c += -(-h);
                }
                all_price.innerHTML = "總計：" + c + "元";
            }
        }
    </script>
</body>


</html>

相關推薦

前端學習-第二階段-day05

技術標籤：前端學習日記 練習目標，寫個商品清單，自動計算分類總價，和所有分類總價之和

前端學習-第二階段-day07

技術標籤：前端學習日記 練習目標 1.點選按鈕生成五位驗證碼 <!DOCTYPE html>

前端學習-第二階段-day06

技術標籤：前端學習日記 練習目標 輪播圖,滑鼠移入輪播停止，移出繼續輪播，點選小圓點自動跳轉相應圖片

前端學習第二天

1、表格標籤 表格是實際開發中非常常用的標籤 1）表格的主要作用 　　表格主要用於顯示、展示資料，因為它可以讓資料顯示的非常的規整，可讀性非常好，特別是後臺展示資料的時候，能夠熟練運用表格就顯得很重要。一個

前端基礎第二階段js基礎

第七天 //01Math物件隨機數 <script>       // 1.Math物件隨機數方法   random() 返回一個隨機的小數  0 =< x < 1

前端HTML第二天學習筆記

#HTML學習第二天筆記： 表格常用標籤及屬性： 表格的基本語法：1>三個基本的表格標籤如下：2>表頭單元格標籤: 在大多數表格中，第一行通常用來顯示標題而不是實際的資料，這樣可以方便使用者閱讀 和理

HTML5：第二階段學習JS——01

技術標籤：HTM5javascriptchromewebkit JS大綱（前4周） 一、JS的基本語法 htmlcss 計算機如何識別程式

SMZX十日遊（第二階段RMQ）RMQ學習筆記

創作背景 今天是在SMZX的第四天，終於學習新知識了，感動。所以，當然要寫部落格好好總結一番

SMZX十日遊（第二階段並查集）並查集學習筆記

創作背景 今天是在SMZX的第四天，終於學習新知識了，感動。所以，當然要寫部落格好好總結一番

前端學習-學成線上網站開發筆記第二天

其次網站組成中的輪播圖一般定義類名為banner，給這個盒子設定新的樣式，佔據整個瀏覽器的區域。在banner中首先定義盒子模型使用類名wrapper，版心居中，在wrapper中定義左右盒子模型，分別設定左浮動和右浮動，然後

學習Java的Day05

知識點 關鍵字，常用類（super，static，final）： super 子類對父類的引用,只能在非靜態方法中使用

java學習第二天 20207/7

一. 1.對傳參進行了瞭解 2. 2.java的變數命名與c/c++有些不同在java中有￥，字母，下劃線和數字，同樣不可以是數字開頭。

前端學習筆記一：HTML 特點 基本結構 doctype文件型別宣告 網頁編碼設定 html標籤屬性 文字和段落標籤 特殊符號

<!DOCTYPE html> <html lang=\"en\"> <head> <!--網頁頭部內容--> <meta charset=\"UTF-8\"><!--如果內容有中文編碼要是utf-8orgb1315-->

Docker的學習第二天

Docker架構圖 映象：image，類似於模板的意思，通過這個模板建立容器服務，如tomcat 映象，---》run--->tomcat1容器，提供給伺服器

深度學習（機器學習）tensorflow學習第二課——建立tensor

建立Tensor: 1、From numpy,list CREATE tensor: import os os.environ os.environ[\'TF_CPP_MIN_LOG_LEVEL\'] = \"2\"

前端學習Docker

文章參考知乎，花生部落格。記錄下docker的一些知識 Docker 沒有使用docker前，我們經常遇到如下問題：

Go學習第二章內建容器

2.1.陣列 陣列是具有相同唯一型別的一組已編號且長度固定的資料項序列，陣列元素可以通過索引來讀取(或修改)，定義方法：

第二階段考試

一 、判斷題10道、一題3分。 1、DNS預設埠號是多少？（D ） A、443 B、80 C、25 D、53

馬哥教育第二階段考試

一 、選擇題10道、一題3分。 1、DNS預設埠號是多少?( D ) A、443 B、80 C、25 D、53 2、docker中以下那個命令不正確 ?( B )A、docker run B、docker file C、docker exec D、docker images

前端學習筆記JavaScript - 移入顯示內容

效果圖 html程式碼 <div class="main"> <ul> <li>Q</li> <li class="weixin">W</li>