當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

云南农职《JavaScript交互式网页设计》综合机试试卷①——实现购物车的结算

發布時間：2024/3/24 javascript 58 豆豆

生活随笔收集整理的這篇文章主要介紹了云南农职《JavaScript交互式网页设计》综合机试试卷①——实现购物车的结算小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、語言和環境

實現語言：javascript、html、css。

開發環境：HBuilder。

二、題目2（100分）

1、功能需求：

馬上過節了，電商網站要進行促銷活動，需要實現該商城購物車的商品數量的增加和刪除效果，要求單項價格和小計以及總金額隨商品數量的變化而變化，具體規則如下：

（1）購買總金額達到或超過1000，按8折優惠；

（2）購買總金額達到或超過700，但未達到1000，按8.5折優惠；

（3）購買總金額達到或超過300，但未達到700，按9折優惠；

（4）購買總金額小于300，按9.8折優惠；

?編寫代碼程序，實現商品總金額和實際支付金以及單項小計額隨商品數量的變化而變化；效果如圖1所示：

圖1 ??運行效果截圖

2、推薦實現步驟

在HBuilder上實現web項目的新建，命名為shoppingCar。

根據效果圖實現頁面的編寫。

使用js或jQuery實現商品數量的增加和減少（最少為1）根據單價計算小計。

使用js或jQuery根據商品數量的改變實現商品總金額的改變和單項小計的改變。

根據優惠活動規則，使用多重if結構實現各種分支的計算，作為實際支付金額。

三、評分標準:

題目：購物車結算管理
該程序評分標準如下：
20	項目搭建和代碼結構是否正確
?	5		項目正確搭建
?	5		正確按要求定義變量（變量的命名）
?	10		合理的項目名稱及相關頁面和css、js的命名及代碼規范
20	根據總金額計算實際支付結果
?	10		正確使用多重if判斷并計算相應結果
?	10		顯示結果
20	實現對應的靜態頁面
?	10		代碼結構合理
?	10		實現頁面80%的相似性
40	總體編程技術
?	5	程序邏輯分明，有一定注釋
?	5	變量命名符合規范，可讀性好，編碼書寫有縮進
?	30	按照要求使用js或jQuery完成要求的效果
總分			100分

四、實現代碼

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">table{border: 1px solid #dedede;border-collapse: collapse;width: 100%;}table tr{height: 50px;border-bottom: 1px dashed #DEDEDE;}table td,th{text-align: center;vertical-align: middle;}table td.item{width: 400px;height: 60px;text-align: left;}table td.item img{margin-right: 10px;vertical-align: middle;}table tr td.cal{text-align: right;}table tr td.cal span{font: bold 25px geneva,verdana,sans-serif;color: orange;}table .btn{border: 1px solid #dedede;background-color: white;width: 16px;height: 16px;}table .txt{width: 60px;height: 30px;border: 1px solid #dedede;text-align: center;font: bold 15px/30px geneva,verdana,sans-serif;}table .txt:hover{border: 1px solid red;}</style><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//在增加數量的按鈕上綁定單擊事件$(".btnAdd").click(function(){var txtObj = $(this).siblings("input[type='text']");//獲取輸入框// console.log(txtObj);var number = parseInt(txtObj.val());txtObj.val(number+1);//計算單個商品價格calPrice($(this),number+1);//計算商品總價calTotalPrice();});//在減少的數量的按鈕上綁定單擊事件$(".btnMinus").click(function(){var txtObj = $(this).siblings("input[type='text']");//獲取輸入框var number = parseInt(txtObj.val());if(number>1){txtObj.val(number-1);//計算單個商品價格calPrice($(this),number-1);//計算商品總價calTotalPrice();};})//參數$btnObj代表增減數量的按鈕，number是商品的數量function calPrice($btnObj,number){var $tdObj = $btnObj.parent().next(); //獲取顯示商品單價的td單元格var price = parseFloat($tdObj.text().substr(1));//從￥截取，獲取單價var $tdTotal = $tdObj.next();//獲取緊鄰的同胞元素，即顯示商品小計的單元格var total = price*number;//計算單個商品價格$($tdTotal).html("¥"+total.toFixed(2));//商品小計保留小數點后兩位}//計算商品列表中所有商品的總價function calTotalPrice(){//保存總價var sum = 0;//遍歷表格中title='price'屬性的單元格$("td[title='price']").each(function(index,element){sum += parseFloat($(this).text().substr(1));//價格累加});$("#spanTotal").html("¥" + sum.toFixed(2));if (sum.toFixed(2)>=1000) {total=sum.toFixed(2)*0.8} else if(sum.toFixed(2)>=700 && 1000>sum.toFixed(2)) {total=sum.toFixed(2)*0.85}else if(sum.toFixed(2)>=300 && 700>sum.toFixed(2)) {total=sum.toFixed(2)*0.9}else if(300>sum.toFixed(2)) {total=sum.toFixed(2)*0.95}//顯示總價$("#spanTotal2").html("¥" + total)$("#spanTotal2").html("¥" + total.toFixed(2));}});</script></head><body><table id="tabOrder"><th>項目</th><th>狀態</th><th>類型、數量</th><th>單價</th><th>小計</th><tr><td class="item"><a href="#"><img src="img/img_1.jpg" align="left" width="100px"/>歡樂空間量版式KTV：歡唱套餐2選1，國家法定節假日需到店另付20元，可升級</a></td><td>可購買</td><td><input type="button" value="-" class="btnMinus"/><input type="text" class="text1" value="1" disabled="disabled"/><input type="button" value="+" class="btnAdd"/></td><td>¥39.9</td><td title="price">¥39.9</td></tr><tr><td class="item"><a href="#"><img src="img/img_2.jpg" align="left" width="100px"/>途樂時尚主題量版式KTV，任選1小時歡唱可升級，提供免費WiFi</a></td><td>可購買</td><td><input type="button" value="-" class="btnMinus"/><input type="text" class="text2" value="1" disabled="disabled"/><input type="button" value="+" class="btnAdd"/></td><td>¥59.9</td><td title="price">¥59.9</td></tr><tr ><td colspan="5" class="cal">應付金額：<span id="spanTotal">¥99.8</span></span> 商品實際支付金額：<span id="spanTotal2"><b>¥</b></span></td></tr></table></body> </html>

總結

以上是生活随笔為你收集整理的云南农职《JavaScript交互式网页设计》综合机试试卷①——实现购物车的结算的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。