人机交互中基于js购物计数器简单应用

烟火漫天

已于 2023-05-17 17:52:41 修改

阅读量130

点赞数 1

文章标签： javascript 人机交互 html css

于 2023-05-17 17:48:04 首次发布

本文链接：https://blog.csdn.net/m0_74223728/article/details/130731083

版权

文章介绍了在人机交互实验中使用JavaScript来实现购物计数器功能，通过HTML的script标签内嵌JS代码和引入外部JS文件的两种方式。示例代码展示了如何通过JS操作DOM元素，监听按钮点击事件，动态更新商品数量和总价。优化后的算法使加减操作更直观易懂。

摘要由CSDN通过智能技术生成

对于人机交互实验中js的运用我们可以采用最常用的两种方式进行连接

在HTML中嵌入JS代码的第一种方式：页面script 标签嵌入，脚本块的方式。脚本块的位置随意，没有限制！这种方式是最简单粗暴的，也是我个人比较喜欢的。

<script type=""></script>

但是一定是要加在body后面，因为代码执行顺序是从上到下的。

<body></body>

在 HTML 中嵌入 JS 的第二种方式：引入外部独立的 JS 文件，这是一堆 JS 代码，这些 JS 代码在 HTML 引入的时候，遵循自上而下的顺序依次逐行执行，我们只需要建立一个js文件，在html中用script引入js文件即可

<script src="js/1.js"></script>

对于人机交互中基于js购物计数器简单应用这用的是第二种方式，通过引入js文件对于我的html代码进行操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="box">
		<div class="qq">
		<div class="ww1">
			你已购买的商品:女士衣服
		</div>
		<div class="ww2">
			单价：<span id="jiage">100</span>
		</div>
		<div class="ww3">
			数量为:
			<button class="button1">-</button>
			<span class="num">1</span>
			<button class="button">+</button>
		</div>
		<div class="ww4">
			总价为:<span class="total">100</span>
		</div>
		</div>
		</div>
	</body>
	<script src="js/app.js"></script>
</html>

html中用了盒子模型进行封装，css语言进行修饰，使其内容居中，美感更好

input{
				width: 50px;
				text-align: center;
			}
			/* .ww1{text-align: left;}
			.ww2{text-align: left;}
			.ww3{text-align: left;}
			.ww4{text-align: left;} */

*{margin: 0;padding: 0;
  }
.qq{text-align: left;}
.box{
					width:300px;
					height: 300px;
					position: absolute;
					left: 0;
					right: 0;
					margin: auto;
}

js中对于加减有多种方式，这是最传统的，也是大多学习的，这种方式较为复杂，不容易理解，而我自己重新建立优化了其他算法

这是我自己优化的算法代码，能更加直观的处理加减号对于数量的变化，也能更加容易理解。

			var button=document.querySelector(".button");
			var button1 = document.querySelector(".button1");
			var num = document.querySelector(".num");
			var total = document.querySelector(".total");
			var x = 1;
			var y= 100;
			// 给定事件
			button1.onclick = function () {
			    // 每次点击减一
			    x--;
				y=y-100;
			    if (x < 0) {
			        num.innerHTML = "0";
					total.innerHTML="0";
			        x = 0;
					y=0;
			    }
			    else {
			        num.innerHTML = x;
					total.innerHTML=y;
			    }
			}
			button.onclick = function () {
			    x++;
				y=y+100;
			    num.innerHTML = x;
				total.innerHTML=y;
			}

此为实验运行结果图