當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時(shí)間：2024/3/24 javascript 43 豆豆

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

一、語言和環(huán)境

實(shí)現(xiàn)語言：javascript、html、css。

開發(fā)環(huán)境：HBuilder。

二、題目2（100分）

1、功能需求：

馬上過節(jié)了，電商網(wǎng)站要進(jìn)行促銷活動(dòng)，需要實(shí)現(xiàn)該商城購物車的商品數(shù)量的增加和刪除效果，要求單項(xiàng)價(jià)格和小計(jì)以及總金額隨商品數(shù)量的變化而變化，具體規(guī)則如下：

（1）購買總金額達(dá)到或超過1000，按8折優(yōu)惠；

（2）購買總金額達(dá)到或超過700，但未達(dá)到1000，按8.5折優(yōu)惠；

（3）購買總金額達(dá)到或超過300，但未達(dá)到700，按9折優(yōu)惠；

（4）購買總金額小于300，按9.8折優(yōu)惠；

?編寫代碼程序，實(shí)現(xiàn)商品總金額和實(shí)際支付金以及單項(xiàng)小計(jì)額隨商品數(shù)量的變化而變化；效果如圖1所示：

圖1 ??運(yùn)行效果截圖

2、推薦實(shí)現(xiàn)步驟

在HBuilder上實(shí)現(xiàn)web項(xiàng)目的新建，命名為shoppingCar。

根據(jù)效果圖實(shí)現(xiàn)頁面的編寫。

使用js或jQuery實(shí)現(xiàn)商品數(shù)量的增加和減少（最少為1）根據(jù)單價(jià)計(jì)算小計(jì)。

使用js或jQuery根據(jù)商品數(shù)量的改變實(shí)現(xiàn)商品總金額的改變和單項(xiàng)小計(jì)的改變。

根據(jù)優(yōu)惠活動(dòng)規(guī)則，使用多重if結(jié)構(gòu)實(shí)現(xiàn)各種分支的計(jì)算，作為實(shí)際支付金額。

三、評分標(biāo)準(zhǔn):

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

四、實(shí)現(xiàn)代碼

<!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(){//在增加數(shù)量的按鈕上綁定單擊事件$(".btnAdd").click(function(){var txtObj = $(this).siblings("input[type='text']");//獲取輸入框// console.log(txtObj);var number = parseInt(txtObj.val());txtObj.val(number+1);//計(jì)算單個(gè)商品價(jià)格calPrice($(this),number+1);//計(jì)算商品總價(jià)calTotalPrice();});//在減少的數(shù)量的按鈕上綁定單擊事件$(".btnMinus").click(function(){var txtObj = $(this).siblings("input[type='text']");//獲取輸入框var number = parseInt(txtObj.val());if(number>1){txtObj.val(number-1);//計(jì)算單個(gè)商品價(jià)格calPrice($(this),number-1);//計(jì)算商品總價(jià)calTotalPrice();};})//參數(shù)$btnObj代表增減數(shù)量的按鈕，number是商品的數(shù)量function calPrice($btnObj,number){var $tdObj = $btnObj.parent().next(); //獲取顯示商品單價(jià)的td單元格var price = parseFloat($tdObj.text().substr(1));//從￥截取，獲取單價(jià)var $tdTotal = $tdObj.next();//獲取緊鄰的同胞元素，即顯示商品小計(jì)的單元格var total = price*number;//計(jì)算單個(gè)商品價(jià)格$($tdTotal).html("¥"+total.toFixed(2));//商品小計(jì)保留小數(shù)點(diǎn)后兩位}//計(jì)算商品列表中所有商品的總價(jià)function calTotalPrice(){//保存總價(jià)var sum = 0;//遍歷表格中title='price'屬性的單元格$("td[title='price']").each(function(index,element){sum += parseFloat($(this).text().substr(1));//價(jià)格累加});$("#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}//顯示總價(jià)$("#spanTotal2").html("¥" + total)$("#spanTotal2").html("¥" + total.toFixed(2));}});</script></head><body><table id="tabOrder"><th>項(xiàng)目</th><th>狀態(tài)</th><th>類型、數(shù)量</th><th>單價(jià)</th><th>小計(jì)</th><tr><td class="item"><a href="#"><img src="img/img_1.jpg" align="left" width="100px"/>歡樂空間量版式KTV：歡唱套餐2選1，國家法定節(jié)假日需到店另付20元，可升級(jí)</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"/>途樂時(shí)尚主題量版式KTV，任選1小時(shí)歡唱可升級(jí)，提供免費(fèi)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">應(yīng)付金額：<span id="spanTotal">¥99.8</span></span> 商品實(shí)際支付金額：<span id="spanTotal2"><b>¥</b></span></td></tr></table></body> </html>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。