原生JavaScript實現購物車示例演示

3403771864 發布于2022-10-27 21:21 / 414人閱讀

　　本篇文章主要向大家介紹關于JavaScript實現購物車效果的具體代碼，直接看下面：

　　HTML：

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="utf-8">
　　<title></title>
　　<style type="text/css">
　　table {
　　border: 1px solid #e9e9e9;
　　border-collapse: collapse;
　　border-spacing: 0;
　　}
　　td {
　　padding: 8px 16px;
　　border: 1px solid #e9e9e9;
　　text-align: left;
　　}
　　td img {
　　width: 50px;
　　height: 50px;
　　}
　　th {
　　background-color: #f7f7f7;
　　color: #5c6b77;
　　font-weight: 600;
　　}
　　</style>
　　</head>
　　<body>
　　圖書類型：<select id="xlxx" onchange="tslx()">
　　<option value="全部">全部</option>
　　<option value="科幻">科幻</option>
　　<option value="小說">小說</option>
　　<option value="文學">文學</option>
　　<option value="懸疑">懸疑</option>
　　</select>
　　<table border="0">
　　<tr>
　　<th><button type="button" style="border: 0;background-color: #f7f7f7;" id="qbxz"
　　onclick="quanxuan ()">全選</button></th>
　　<th>序號</th>
　　<th>商品名</th>
　　<th>書籍名</th>
　　<th>分類</th>
　　<th>價格</th>
　　<th>購買數量</th>
　　<th>操作</th>
　　</tr>
　　<tr name="wx">
　　<td><input type="checkbox" name="cb" onchange="zhjs()" id="" value="" class="qx" /></td>
　　<td>1</td>
　　<td><img onmouseover="tpmax(this.src)" onmouseout="tpmin()" src="../img/20180520083915_sMx82.jpeg"></td>
　　<td>活著</td>
　　<td>文學</td>
　　<td><label name="jg">25</label></td>
　　<td>
　　<button onclick="jia('num1')">+</button>
　　<label id="num1" name="num">1</label>
　　<button onclick="jian('num1')">-</button>
　　</td>
　　<td><button onclick="deletet(1)">移除</button></td>
　　</tr>
　　<tr name="kh">
　　<td><input type="checkbox" name="cb" onchange="zhjs()" id="" value="" class="qx" /></td>
　　<td>2</td>
　　<td><img onmouseover="tpmax(this.src)" onmouseout="tpmin()" src="../img/20180520083916_8ntMr.jpeg"></td>
　　<td>活著2</td>
　　<td>科幻</td>
　　<td><label name="jg">30</label></td>
　　<td>
　　<button onclick="jia('num2')">+</button>
　　<label id="num2" name="num">1</label>
　　<button onclick="jian('num2')">-</button>
　　</td>
　　<td><button onclick="deletet(2)">移除</button></td>
　　</tr>
　　<tr name="xs">
　　<td><input type="checkbox" name="cb" onchange="zhjs()" id="" value="" class="qx" /></td>
　　<td>3</td>
　　<td><img onmouseover="tpmax(this.src)" onmouseout="tpmin()" src="../img/20191227173047_zrXxQ.jpeg"></td>
　　<td>活著3</td>
　　<td>小說</td>
　　<td><label name="jg">35</label></td>
　　<td>
　　<button onclick="jia('num3')">+</button>
　　<label id="num3" name="num">1</label>
　　<button onclick="jian('num3')">-</button>
　　</td>
　　<td><button onclick="deletet(3)">移除</button></td>
　　</tr>
　　<tr name="xy">
　　<td><input type="checkbox" name="cb" onchange="zhjs()" id="" value="" class="qx" /></td>
　　<td>4</td>
　　<td><img onmouseover="tpmax(this.src)" onmouseout="tpmin()" src="../img/20191227173048_eGeBA.jpeg"></td>
　　<td>活著4</td>
　　<td>懸疑</td>
　　<td><label name="jg">40</label></td>
　　<td>
　　<button onclick="jia('num4')">+</button>
　　<label id="num4" name="num">1</label>
　　<button onclick="jian('num4')">-</button>
　　</td>
　　<td><button onclick="deletet(4)">移除</button></td>
　　</tr>
　　</table>
　　<h1 id="nr" style="display: none;">購物車為空！</h1>
　　總金額：<label id="zh" style="color: red;">0</label>￥
　　<img src="" style="width: 150px;" id="img">
　　</body>
　　<script type="text/javascript">
　　</script>
　　<script src="../js/gwc.js" type="text/javascript" charset="utf-8"></script>
　　</html>

　　JavaScript：

　　/*
　　1.圖片懸浮時的放大
　　2.全選
　　3.分類
　　4.數值的加減
　　5.總和的實現
　　6.刪除功能
　　*/
　　// 1.圖片懸浮時的放大
　　// 圖片移入放大
　　function tpmax(lj) {
　　//移入 將獲取到的圖片路徑加載到下方顯示圖片路徑實現移入顯示
　　document.getElementById("img").src = lj
　　}
　　// 圖片移出隱藏
　　function tpmin() {
　　//移出 將空的圖片路徑加載到下方顯示圖片路徑實現移出不顯示
　　document.getElementById("img").src = "";
　　}
　　// 2.全選
　　function quanxuan() {
　　var qxaj = document.getElementsByClassName("qx");
　　// 遍歷判斷復選框的狀態
　　for (var i = 0; i < qxaj.length; i++) {
　　if (qxaj[i].checked == true) {
　　for (var i = 0; i < qxaj.length; i++) {
　　qxaj[i].checked = false;
　　}
　　} else {
　　for (var i = 0; i < qxaj.length; i++) {
　　qxaj[i].checked = true;
　　}
　　}
　　}
　　zhjs();
　　}
　　// 3.分類
　　/*
　　1.只顯示分類的:將不屬于的分類隱藏，直顯示匹配的行
　　2.顯示與隱藏兩個方法
　　*/
　　function tslx() {
　　var xlxx = document.getElementById("xlxx").value;
　　var kh = document.getElementsByName("kh");
　　var xs = document.getElementsByName("xs");
　　var wx = document.getElementsByName("wx");
　　var xy = document.getElementsByName("xy");
　　if (xlxx == "全部") {
　　xianshi(kh);
　　xianshi(xs);
　　xianshi(wx);
　　xianshi(xy);
　　}
　　if (xlxx == "科幻") {
　　xianshi(kh);
　　yincang(xs);
　　yincang(wx);
　　yincang(xy);
　　}
　　if (xlxx == "文學") {
　　yincang(kh);
　　yincang(xs);
　　xianshi(wx);
　　yincang(xy);
　　}
　　if (xlxx == "小說") {
　　yincang(kh);
　　xianshi(xs);
　　yincang(wx);
　　yincang(xy);
　　}
　　if (xlxx == "懸疑") {
　　yincang(kh);
　　yincang(xs);
　　yincang(wx);
　　xianshi(xy);
　　}
　　}
　　// 顯示
　　function xianshi(xlxx) {
　　// 遍歷尋找匹配的值
　　for (var i = 0; i < xlxx.length; i++) {
　　xlxx[i].style.visibility = "visible";
　　}
　　}
　　// 隱藏
　　function yincang(xlxx) {
　　for (var i = 0; i < xlxx.length; i++) {
　　xlxx[i].style.visibility = "collapse";
　　}
　　}
　　// 4.數值的加減
　　function jian(numid) {
　　var num = document.getElementById(numid).innerHTML;
　　var ljnum = parseInt(num) - 1;
　　if (ljnum > 0) {
　　document.getElementById(numid).innerHTML = ljnum;
　　}
　　zhjs();
　　}
　　function jia(numid) {
　　// 得到原始值
　　var num = document.getElementById(numid).innerHTML;
　　// 得到累加值
　　var ljnum = parseInt(num) + 1;
　　// 賦值
　　document.getElementById(numid).innerHTML = ljnum;
　　zhjs();
　　}
　　//5.總和計算
　　function zhjs() {
　　var jg = document.getElementsByName("jg");
　　var sl = document.getElementsByName("num");
　　var cb = document.getElementsByName("cb");
　　var sum = 0;
　　for (var i = 0; i < cb.length; i++) {
　　if (cb[i].checked == true) {
　　sum += parseInt(jg[i].innerHTML) * parseInt(sl[i].innerHTML);
　　}
　　}
　　document.getElementById("zh").innerHTML = sum;
　　}
　　// 6.刪除
　　// 遍歷全部tr
　　var s = 0;
　　var qbtr = document.getElementsByTagName("tr");
　　for (var i = 0; i < qbtr.length; i++) {
　　s++;
　　}
　　function deletet(index) {
　　// tr()
　　var c = document.getElementsByName("cb");
　　c[index - 1].checked = false;
　　var h = document.getElementsByTagName("tr");
　　h[index].style.display = "none";
　　s--;
　　if (s == 1) {
　　document.getElementById("nr").style.display = "block";
　　document.getElementById("cartb").style.display = "none";
　　document.getElementById("stype").style.display = "none";
　　}
　　zhjs();
　　}

　　效果：

　　全選:

　　分類：

　　刪除：

　　添加數量

云服務器 GPU云服務器 javascript示例原生javascript javascript原生原生js實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128221.html

「輕算賬」小程序實踐筆記

摘要：資源開發文檔是一套完全免費的微信小程序開發框架，擴展了小程序的能力。推薦有一些不錯的解決方案封裝封裝跨頁面事件通訊監聽數據變化開發如何在微信小程序的頁面間傳遞數據需要時可以快速過一遍。微信小程序回調，，，的使用例子供參考這篇文章主要記錄我做小程序「輕算賬」過程中遇到的一些問題和解決方案，就當是做個總結，也希望其中有能夠幫助到他人的信息。 showImg(https://segment...

BigTomato 2019-08-23 13:45 評論0 收藏0
4月份前端資源分享

摘要：更多資源請文章轉自月份前端資源分享關于的思考一款有趣的動畫效果跨站資源共享之二最流行的編程語言能做什么到底什么是閉包的第三個參數跨域資源共享詳解阮一峰前端要給力之語句在中的值周愛民中國第二屆視頻花絮編碼規范前端工程師手冊奇舞周刊被忽視的更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfron...

jsdt 2019-08-20 15:54 評論0 收藏0