基于jQuery写的一个计数器

最新推荐文章于 2024-07-29 11:53:27 发布

LxxQ.

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量432

点赞数 2

文章标签： javascript css html html5 jquery

本文链接：https://blog.csdn.net/qq_37717457/article/details/116242376

版权

哈哈第一次发文章写的要是有不好的欢迎各位提出哈

用晚修一节课写的代码很烂

html结构

<body>
		<p>不可以低于0哦</p>
		<div class="num-warp">
			<span class="num-a">+</span>
			<span class="number"></span>
			<span class="num-b">-</span>
		</div>
		<h1>计数器基于jQuery</h1>
</body>

css样式

.num-warp {
				width: 100px;
				box-shadow: 0 0 10px lightgray;
				border-radius: 30px;
				margin: 50px auto;
				padding: 5px;
				text-align: center;
				font-size: 25px;
			}
			.num-warp input {
				width: 60px;
			}
			input {
				border: 0;
			}
			input:focus {
				outline: none;
			}
			/* chrome */ 
			input::-webkit-outer-spin-button,
			input::-webkit-inner-spin-button { 
			    -webkit-appearance: none; 
			}
			/* 火狐浏览器 */
			input[type="number"]{ 
			    -moz-appearance: textfield; 
			}
			span {
				user-select: none;
				cursor: pointer;
			}
			p {
				opacity: 0;
			}

js代码

<script>
			$(function(){
				var num = 0;
				var v = $(".number").html(0)
				$(".num-a").click(function(){
					num++;
					v.html(num)
					console.log(num)
					$("p").html('不可以低于0哦').css({'color':'red','text-align':'center','opacity':'0'});
				})
				$(".num-b").click(function(){
					if(num<=0){
						num == 0;
						v.html(num);
						$("p").html('不可以低于0哦').css({'color':'red','text-align':'center','opacity':'1'});
					}else{
						num--;
						v.html(num);
						console.log(num);
					}
				})
				
			})
		</script>

有不好的大佬们一定要指出来一定虚心接受！！！