JS34. 购物面板
描述
请补全JavaScript代码，要求如下：HTML/CSS/JavaScript 解法, 执行用时: 1756ms, 内存消耗: 77824KB, 提交时间: 2021-12-27
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n </head>\n <body>\n \t<table>\n <thead>\n <caption>\n 商品\n </caption>\n </thead>\n <tbody>\n <tr>\n <td>炸鸡</td>\n <td>28元</td>\n <td><button id=\"zjtaiduola\">-</button></td>\n <td><span id=\"zjsl\">0</span></td>\n <td><button id=\"zjtaishaola\">+</button></td>\n </tr>\n <tr>\n <td>可乐</td>\n <td>5元</td>\n <td><button id=\"kltaiduola\">-</button></td>\n <td><span id=\"klsl\">0</span></td>\n <td><button id=\"kltaishaola\">+</button></td>\n </tr>\n <tr>\n <td>总价：</td>\n <td><span id=\"total\">0</span></td>\n </tr>\n </tbody>\n </table>\n \n <script type=\"text/javascript\">\n // 补全代码\n zjplus = document.getElementById('zjtaishaola')\n zjsl = document.getElementById('zjsl')\n zjsub = document.getElementById('zjtaiduola')\n \n klplus = document.getElementById('kltaishaola')\n klsl = document.getElementById('klsl')\n klsub = document.getElementById('kltaiduola')\n \n allsum=document.getElementById('total')\n klsub.onclick =function(){\n let num=Number(klsl.innerHTML);\n let next=0\n if(num!=0) {next=num-1;\n klsl.innerHTML=next+\"\";\n allsum.innerHTML=Number(allsum.innerHTML)-5\n }\n }\n klplus.onclick=function(){\n let num=Number(klsl.innerHTML);\n let next=num+1;\n klsl.innerHTML=next+\"\";\n allsum.innerHTML=Number(allsum.innerHTML)+5\n }\n zjsub.onclick =function(){\n let num=Number(zjsl.innerHTML);\n let next=0\n if(num!=0){ next=num-1;\n zjsl.innerHTML=next+\"\";\n allsum.innerHTML=Number(allsum.innerHTML)-28}\n }\n zjplus.onclick=function(){\n let num=Number(zjsl.innerHTML);\n let next=num+1;\n zjsl.innerHTML=next+\"\";\n allsum.innerHTML=Number(allsum.innerHTML)+28\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1764ms, 内存消耗: 77900KB, 提交时间: 2022-01-22
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n </head>\n <body>\n \t<table>\n <thead>\n <caption>\n 商品\n </caption>\n </thead>\n <tbody>\n <tr>\n <td>炸鸡</td>\n <td>28元</td>\n <td><button id=\"zjtaiduola\">-</button></td>\n <td><span id=\"zjsl\">0</span></td>\n <td><button id=\"zjtaishaola\">+</button></td>\n </tr>\n <tr>\n <td>可乐</td>\n <td>5元</td>\n <td><button id=\"kltaiduola\">-</button></td>\n <td><span id=\"klsl\">0</span></td>\n <td><button id=\"kltaishaola\">+</button></td>\n </tr>\n <tr>\n <td>总价：</td>\n <td><span id=\"total\">0</span></td>\n </tr>\n </tbody>\n </table>\n \n <script type=\"text/javascript\">\n // 补全代码\n var zjnum = 0;\n var klnum = 0;\n var total = document.getElementById('total');\n function count() {\n total.innerText = 28 * zjnum + 5 * klnum;\n }\n document.getElementById('zjtaiduola').onclick = function() {\n if (zjnum != 0) {\n document.getElementById('zjsl').innerText = --zjnum;\n count();\n }\n }\n document.getElementById('zjtaishaola').onclick = function() {\n document.getElementById('zjsl').innerText = ++zjnum;\n count();\n }\n document.getElementById('kltaiduola').onclick = function() {\n if(klnum != 0) {\n document.getElementById('klsl').innerText = --klnum;\n count();\n }\n }\n document.getElementById('kltaishaola').onclick = function() {\n document.getElementById('klsl').innerText = ++klnum;\n count();\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1765ms, 内存消耗: 77844KB, 提交时间: 2021-12-05
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n </head>\n <body>\n \t<table>\n <thead>\n <caption>\n 商品\n </caption>\n </thead>\n <tbody>\n <tr>\n <td>炸鸡</td>\n <td>28元</td>\n <td><button id=\"zjtaiduola\" onclick=\"clickBtn(event,'zjsl',28)\">-</button></td>\n <td><span id=\"zjsl\">0</span></td>\n <td><button id=\"zjtaishaola\" onclick=\"clickBtn(event,'zjsl',28)\">+</button></td>\n </tr>\n <tr>\n <td>可乐</td>\n <td>5元</td>\n <td><button id=\"kltaiduola\" onclick=\"clickBtn(event,'klsl',5)\">-</button></td>\n <td><span id=\"klsl\">0</span></td>\n <td><button id=\"kltaishaola\" onclick=\"clickBtn(event,'klsl',5)\">+</button></td>\n </tr>\n <tr>\n <td>总价：</td>\n <td><span id=\"total\">0</span></td>\n </tr>\n </tbody>\n </table>\n \n <script type=\"text/javascript\">\n // 补全代码\n function clickBtn(e, typeId, price) {\n let totalPrice = document.querySelector('#total')\n let typeNode = document.querySelector('#' + typeId)\n let action = e.target.innerText\n if (action == '+') {\n typeNode.innerText = +typeNode.innerText + 1\n totalPrice.innerText =\n +totalPrice.innerText + typeNode.innerText * price\n } else if (typeNode.innerText != '0') {\n totalPrice.innerText =\n +totalPrice.innerText - typeNode.innerText * price\n typeNode.innerText = typeNode.innerText - 1\n }\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1767ms, 内存消耗: 77904KB, 提交时间: 2022-02-06
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n </head>\n <body>\n \t<table>\n <thead>\n <caption>\n 商品\n </caption>\n </thead>\n <tbody>\n <tr>\n <td>炸鸡</td>\n <td>28元</td>\n <td><button id=\"zjtaiduola\">-</button></td>\n <td><span id=\"zjsl\">0</span></td>\n <td><button id=\"zjtaishaola\">+</button></td>\n </tr>\n <tr>\n <td>可乐</td>\n <td>5元</td>\n <td><button id=\"kltaiduola\">-</button></td>\n <td><span id=\"klsl\">0</span></td>\n <td><button id=\"kltaishaola\">+</button></td>\n </tr>\n <tr>\n <td>总价：</td>\n <td><span id=\"total\">0</span></td>\n </tr>\n </tbody>\n </table>\n \n <script type=\"text/javascript\">\n // 补全代码\n var chickenMinusButton = document.querySelector('#zjtaiduola')\n var chickenPrice = document.querySelector('#zjsl')\n var chickenAddButton = document.querySelector('#zjtaishaola')\n var colaMinusButton = document.querySelector('#kltaiduola')\n var colaPrice = document.querySelector('#klsl')\n var colaAddButton = document.querySelector('#kltaishaola')\n var total = document.querySelector('#total')\n var chickenCount = colaCount = totalPrice = 0\n chickenMinusButton.onclick = function () {\n if (chickenCount) {\n chickenCount--\n totalPrice = chickenCount * 28 + colaCount * 5\n chickenPrice.innerText = chickenCount * 28\n total.innerText = totalPrice\n }\n }\n chickenAddButton.onclick = function () {\n chickenCount++\n totalPrice = chickenCount * 28 + colaCount * 5\n chickenPrice.innerText = chickenCount * 28\n total.innerText = totalPrice\n }\n colaMinusButton.onclick = function () {\n if (colaCount) {\n colaCount--\n totalPrice = chickenCount * 28 + colaCount * 5\n colaPrice.innerText = colaCount * 28\n total.innerText = totalPrice\n }\n }\n colaAddButton.onclick = function () {\n colaCount++\n totalPrice = chickenCount * 28 + colaCount * 5\n colaPrice.innerText = colaCount * 28\n total.innerText = totalPrice\n }\n \n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1769ms, 内存消耗: 77840KB, 提交时间: 2022-02-22
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n </head>\n <body>\n \t<table>\n <thead>\n <caption>\n 商品\n </caption>\n </thead>\n <tbody>\n <tr>\n <td>炸鸡</td>\n <td>28元</td>\n <td><button id=\"zjtaiduola\">-</button></td>\n <td><span id=\"zjsl\">0</span></td>\n <td><button id=\"zjtaishaola\">+</button></td>\n </tr>\n <tr>\n <td>可乐</td>\n <td>5元</td>\n <td><button id=\"kltaiduola\">-</button></td>\n <td><span id=\"klsl\">0</span></td>\n <td><button id=\"kltaishaola\">+</button></td>\n </tr>\n <tr>\n <td>总价：</td>\n <td><span id=\"total\">0</span></td>\n </tr>\n </tbody>\n </table>\n \n <script type=\"text/javascript\">\n // 补全代码\n let zj_dom = document.querySelector('#zjsl');\n let kl_dom = document.querySelector('#klsl');\n let total_dom = document.querySelector('#total');\n \n let zj_num = Number(zj_dom.innerText);\n let kl_num = Number(kl_dom.innerText);\n \n document.querySelector('#zjtaishaola').onclick = function () {\n if (zj_num - 1 === -1) {\n return\n }\n zj_dom.innerText = --zj_num;\n setTotal();\n }\n document.querySelector('#zjtaishaola').onclick = function () {\n zj_dom.innerText = ++zj_num;\n setTotal();\n }\n document.querySelector('#kltaishaola').onclick = function () {\n if (kl_num - 1 === -1) {\n return\n }\n kl_dom.innerText = --kl_num;\n setTotal();\n }\n document.querySelector('#kltaishaola').onclick = function () {\n kl_dom.innerText = ++kl_num;\n setTotal();\n }\n \n function setTotal() {\n total_dom.innerText = 28 * zj_num + 5 * kl_num;\n }\n </script>\n </body>\n</html>","libs":[]}