经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript实现淘宝购物件数选择
来源:jb51  时间:2022/8/3 10:48:57  对本文有异议

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

实现一个简易的淘宝购物件数量的选择算法,通过鼠标点击“+”、“-”按钮对数量增加或减少1,限购9件,最大增加到数字9,最小减少到0.

代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. ?? ?<script LANGUAGE="JavaScript" type="text/javascript">
  5. ?? ??? ?function addnum()
  6. ?? ??? ?{
  7. ?? ??? ??? ?var num = document.getElementById("res").value;
  8. ?? ??? ??? ?num = parseInt(num) + 1;
  9. ?? ??? ??? ?if (num>9)?
  10. ?? ??? ??? ?{
  11. ?? ??? ??? ??? ?alert("已经是最大够件数!");
  12. ?? ??? ??? ?}
  13. ?? ??? ??? ?else
  14. ?? ??? ??? ?{
  15. ?? ??? ??? ??? ?document.getElementById("res").value = num;
  16. ?? ??? ??? ?}
  17. ?? ??? ?}
  18. ?? ??? ?function decnum()
  19. ?? ??? ?{
  20. ?? ??? ??? ?var num = document.getElementById("res").value;
  21. ?? ??? ??? ?num = parseInt(num) - 1;
  22. ?? ??? ??? ?if (num<0)?
  23. ?? ??? ??? ?{
  24. ?? ??? ??? ??? ?alert("已经是最小够件数!");
  25. ?? ??? ??? ?}
  26. ?? ??? ??? ?else
  27. ?? ??? ??? ?{
  28. ?? ??? ??? ??? ?document.getElementById("res").value = num;
  29. ?? ??? ??? ?}
  30. ?? ??? ?}
  31. ?? ?</script>
  32. </head>
  33. <body>
  34. ?? ?<form id="myform" >
  35. ?? ??? ?<p>数量</p>
  36. ?? ??? ?<input type="button" id="dec" value="-" onclick="decnum()">
  37. ?? ??? ?<input type="text" value="0" id="res">
  38. ?? ??? ?<input type="button" id="add" value="+" onclick="addnum()">
  39. ?? ??? ?<p>限购9件</p>
  40. ?? ?</form>
  41. </body>
  42. </html>

程序结果如下:

最大够件数:

最小够件数:

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号