提交訂單頁面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>提交訂單</title> <style> * { margin: 0; padding: 0; } #box { margin: 0 auto; text-align: center; } #ip { width: 100px; height: 40px; outline: none; border: none; background-color: #ff1a1a; color: #fff; font-size: 16px; font-family: Arial; margin-top: 15px; } .money { color: #ff1919; } strong { color: #ff1919; } #number { width: 50px; outline: none; } </style> <script> window.onload = function () { // 獲取第一個span var span = document.getElementsByTagName("span")[0]; // 獲取第一個strong var strong = document.getElementsByTagName("strong")[0]; // 獲取input var number = document.getElementById("number"); // 獲取提交按鈕 var btnSubmit = document.getElementById("ip"); // 點擊事件 btnSubmit.onclick = function () { // 創建字面量對象 var obj = { // {key:value} goodsName: span.innerHTML, goodsPrice: strong.innerHTML, goodsNumber: number.value }; // 將JSON對象轉成JSON字符串 var objStr = JSON.stringify(obj); // JSON字符串賦值給cookie document.cookie = objStr; } } </script> </head> <body> <div id="box"> <form action="購物車.html" method="get"> 商品信息： <br> <img src="https://img-blog.csdn.net/20170112193814201?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXlkcmVhbWhvcGU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="堅果大禮包圖片" title="堅果大禮包"><br> 商品名稱：<span>堅果大禮包</span> <br> <span class="money">￥</span><strong>5000</strong> <br> 選擇商品數量：<input id="number" type="number" min="1" max="100"> <br> <input id="ip" type="submit" value="加入購物車"> </form> </div> </body> </html>
購物車頁面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>購物車信息</title> <style> span { color: #ff1919; } </style> <script> window.onload = function () { // 商品名稱 var goodsName = document.getElementsByTagName("span")[0]; // 商品單價 var goodsPrice = document.getElementsByTagName("span")[1]; // 商品數量 var goodsNumber = document.getElementsByTagName("span")[2]; // 商品總價 var goodsTotalPrice = document.getElementsByTagName("span")[3]; // 創建cookie var cookie = document.cookie; // 將JSON字符串轉成JSON對象 var obj = JSON.parse(cookie); // 商品名稱 goodsName.innerHTML = obj.goodsName; // 商品單價 goodsPrice.innerHTML = obj.goodsPrice; // 商品數量 goodsNumber.innerHTML = obj.goodsNumber; // 商品總價 goodsTotalPrice.innerHTML = obj.goodsPrice * obj.goodsNumber; if (obj.goodsNumber==""){ goodsNumber.innerHTML="0"; goodsTotalPrice.innerHTML="0"; } } </script> </head> <body> <h5>你的購物車信息：</h5> 商品圖片：<br><img src="https://img-blog.csdn.net/20170112193814201?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXlkcmVhbWhvcGU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="堅果大禮包圖片" title="堅果大禮包"><br> 商品名稱：<span></span><br> 商品單價：<span></span><br> 商品數量：<span></span><br> 商品總價：<span></span><br> </body> </html>