利用HTML+css+js创建类似购物车加减的样式

最新推荐文章于 2024-07-31 16:33:32 发布

℡52Hz★

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量952

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_53541336/article/details/123090523

版权

一、首先利用HTML和css设置一个文本框


<!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="login">
			<form action="html" method="post">
				<div class="linedate">
					<input type="text" name="count" id="count" value="1" >
					<input type="button" value="增加" id="up"/>
					<input type="button" value="减少" id="desc" />
				</div>
		    </form>
		</div>
		<script src="js/app.js"></script>
	</body>
</html>

具体样式如下图所示

二、下面附上具体的js代码

let up = document.getElementById("up");
let desc = document.getElementById("desc");
let count= document.getElementById("count");

up.addEventListener("click",function ()
{
	if(count.value >=10)
		{
			count.value = 10;
		}
		else
		{
			count.value = parseInt(count.value) + 1;
		}
}
);

up.removeEventListener("click",up);

desc.addEventListener("click",function()
	{
    if(count.value <= 1) {

        count.value = 1;
        
    }
	 else
	 {
        count.value = parseInt(count.value) - 1;
    }
});
desc.removeEventListener("click",desc);

这样就完成了增加和减少的一系列过程了，小伙伴们是不是觉得很简单呢，赶快用自己的勤快小手手试试吧。

℡52Hz★

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
利用HTML+css+js创建类似购物车加减的样式

一、首先利用HTML和css设置一个文本框<!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&
复制链接

扫一扫