JavaScript實現(xiàn)淘寶購物件數(shù)選擇

更新時間：2022年08月03日 08:26:03 作者：YaJeanZhang_

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)淘寶購物件數(shù)的選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)淘寶購物件數(shù)選擇的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)一個簡易的淘寶購物件數(shù)量的選擇算法，通過鼠標(biāo)點擊“+”、“-”按鈕對數(shù)量增加或減少1，限購9件，最大增加到數(shù)字9，最小減少到0.

代碼如下：

<!DOCTYPE html>
<html>
<head>
?? ?<script LANGUAGE="JavaScript" type="text/javascript">
?? ??? ?function addnum()
?? ??? ?{
?? ??? ??? ?var num = document.getElementById("res").value;
?? ??? ??? ?num = parseInt(num) + 1;
?? ??? ??? ?if (num>9)?
?? ??? ??? ?{
?? ??? ??? ??? ?alert("已經(jīng)是最大夠件數(shù)！");
?? ??? ??? ?}
?? ??? ??? ?else
?? ??? ??? ?{
?? ??? ??? ??? ?document.getElementById("res").value = num;
?? ??? ??? ?}
?? ??? ?}
?? ??? ?function decnum()
?? ??? ?{
?? ??? ??? ?var num = document.getElementById("res").value;
?? ??? ??? ?num = parseInt(num) - 1;
?? ??? ??? ?if (num<0)?
?? ??? ??? ?{
?? ??? ??? ??? ?alert("已經(jīng)是最小夠件數(shù)！");
?? ??? ??? ?}
?? ??? ??? ?else
?? ??? ??? ?{
?? ??? ??? ??? ?document.getElementById("res").value = num;
?? ??? ??? ?}
?? ??? ?}
?? ?</script>
</head>
<body>
?? ?<form id="myform" >
?? ??? ?<p>數(shù)量</p>
?? ??? ?<input type="button" id="dec" value="-" onclick="decnum()">
?? ??? ?<input type="text" value="0" id="res">
?? ??? ?<input type="button" id="add" value="+" onclick="addnum()">
?? ??? ?<p>限購9件</p>
?? ?</form>
</body>
</html>

程序結(jié)果如下：

最大夠件數(shù)：

最小夠件數(shù)：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

代碼詳解JS操作剪貼板
本篇文章給大家介紹了如何用JS操作剪貼板的功能，并把實例代碼做了分享，需要的朋友學(xué)習(xí)下吧。
2018-02-02
JS Array創(chuàng)建及concat()split()slice()的使用方法
下面小編就為大家?guī)硪黄狫S Array創(chuàng)建及concat()split()slice()的使用方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
JavaScript中的this關(guān)鍵字使用方法總結(jié)
這篇文章主要介紹了JavaScript中的this關(guān)鍵字使用方法總結(jié),本文講解了作為對象方法調(diào)用、作為函數(shù)調(diào)用、作為構(gòu)造函數(shù)調(diào)用、使用 apply 或 call 調(diào)用等內(nèi)容,需要的朋友可以參考下
2015-03-03
JS圖片懶加載技術(shù)實現(xiàn)過程解析
這篇文章主要介紹了JS圖片懶加載技術(shù)實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-07-07
JavaScript實現(xiàn)點擊切換功能
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)點擊切換功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-01-01
Js經(jīng)典案例的實例代碼
JS實現(xiàn)鼠標(biāo)懸停切換圖片,顯示天氣預(yù)報，利用焦點實現(xiàn)選擇網(wǎng)站的實例代碼，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧
2018-05-05
詳解JavaScript權(quán)威指南之對象
JavaScript對象除了可以保持自有的屬性外，還可以從一個稱為原型的對象繼承屬性。這篇文章主要介紹了詳解JavaScript權(quán)威指南之對象的相關(guān)資料,需要的朋友可以參考下
2016-09-09
web前端開發(fā)中常見的多列布局解決方案整理(一定要看)
多列布局在web前端開發(fā)中也是較為常見的，今天小編給大家介紹這里會提到的多列布局有兩列定寬加一列自適應(yīng)、多列不定寬加一列自適應(yīng)、多列等分三種，感興趣的朋友一起看看吧
2017-10-10
js 實現(xiàn)日期靈活格式化的小例子
這篇文章介紹了js實現(xiàn)日期靈活格式化的小例子，有需要的朋友可以參考一下
2013-07-07
JavaScript事件循環(huán)及宏任務(wù)微任務(wù)原理解析
這篇文章主要介紹了JavaScript事件循環(huán)及宏任務(wù)微任務(wù)原理解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-09-09