JavaScript实现淘宝购物件数选择

 更新时间:2022年08月03日 08:26:03   作者:YaJeanZhang_  
这篇文章主要为大家详细介绍了JavaScript实现淘宝购物件数的选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现淘宝购物件数选择的具体代码,供大家参考,具体内容如下

实现一个简易的淘宝购物件数量的选择算法,通过鼠标点击“+”、“-”按钮对数量增加或减少1,限购9件,最大增加到数字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("已经是最大够件数!");
            }
            else
            {
                document.getElementById("res").value = num;
            }
        }
        function decnum()
        {
            var num = document.getElementById("res").value;
            num = parseInt(num) - 1;
            if (num<0) 
            {
                alert("已经是最小够件数!");
            }
            else
            {
                document.getElementById("res").value = num;
            }
        }
    </script>
</head>
<body>
    <form id="myform" >
        <p>数量</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>

程序结果如下:

最大够件数:

最小够件数:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 代码详解JS操作剪贴板

    代码详解JS操作剪贴板

    本篇文章给大家介绍了如何用JS操作剪贴板的功能,并把实例代码做了分享,需要的朋友学习下吧。
    2018-02-02
  • JS Array创建及concat()split()slice()的使用方法

    JS Array创建及concat()split()slice()的使用方法

    下面小编就为大家带来一篇JS Array创建及concat()split()slice()的使用方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JavaScript中的this关键字使用方法总结

    JavaScript中的this关键字使用方法总结

    这篇文章主要介绍了JavaScript中的this关键字使用方法总结,本文讲解了作为对象方法调用、作为函数调用、作为构造函数调用、使用 apply 或 call 调用等内容,需要的朋友可以参考下
    2015-03-03
  • JS图片懒加载技术实现过程解析

    JS图片懒加载技术实现过程解析

    这篇文章主要介绍了JS图片懒加载技术实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JavaScript实现点击切换功能

    JavaScript实现点击切换功能

    这篇文章主要为大家详细介绍了JavaScript实现点击切换功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • Js经典案例的实例代码

    Js经典案例的实例代码

    JS实现鼠标悬停切换图片,显示天气预报,利用焦点实现选择网站的实例代码,具有很好的参考价值,希望对大家有所帮助,一起跟随小编过来看看吧
    2018-05-05
  • 详解JavaScript权威指南之对象

    详解JavaScript权威指南之对象

    JavaScript对象除了可以保持自有的属性外,还可以从一个称为原型的对象继承属性。这篇文章主要介绍了详解JavaScript权威指南 之对象的相关资料,需要的朋友可以参考下
    2016-09-09
  • web前端开发中常见的多列布局解决方案整理(一定要看)

    web前端开发中常见的多列布局解决方案整理(一定要看)

    多列布局在web前端开发中也是较为常见的,今天小编给大家介绍这里会提到的多列布局有两列定宽加一列自适应、多列不定宽加一列自适应、多列等分三种,感兴趣的朋友一起看看吧
    2017-10-10
  • js 实现日期灵活格式化的小例子

    js 实现日期灵活格式化的小例子

    这篇文章介绍了js实现日期灵活格式化的小例子,有需要的朋友可以参考一下
    2013-07-07
  • JavaScript事件循环及宏任务微任务原理解析

    JavaScript事件循环及宏任务微任务原理解析

    这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09

最新评论