javascript基础小案例（1）

楼上楼下
715 阅读1分钟

一：开关门效果

开关门效果：点击开关门打开，再点击，门关闭

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			div{
				width: 300px;
				height: 400px;
				background: red;
				display: none;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<button style="background: #fff;">···</button>
		<div></div>
		<p>Lorem ipsum dosa!</p>
		<p>L ipsa!</p>
		<script type="text/javascript">
		// 找到元素并绑定事件
			var btn=document.getElementsByTagName("button")[0],
			div=document.getElementsByTagName("div")[0];
			btn.onclick=function(){
				// 如果开关是白色，点击时门就显示，开关颜色变为灰色
				if(this.style.background=="rgb(255, 255, 255)"){
					div.style.display="block";
					this.style.background="#ccc";
				}
				// 否则门就关闭
				else{
					div.style.display="none";
					this.style.background="#fff";
				}
			}
		</script>
	</body>
</html>

二：表格隔行变色

点击按钮，奇数次奇数行变色，偶数次偶数行变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table{
				width: 1200px;
				margin: 0 auto;
				border: 1px solid #000;
				text-align: center;
				border-collapse: collapse;
				table-layout: fixed;
			}
			td{
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<!-- 按钮 -->
		<button>变</button>
		<!-- 表格部分 -->
		<table>
			<tr>
				<td>1111</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
		</table>
		
		<script type="text/javascript">
			var btn=document.getElementsByTagName("button")[0],
			j=0,
			trs=document.getElementsByTagName("tr")	;
			btn.onclick=function(){
				j++;
				if(j%2==1){
					for(var i=0;i<trs.length;i++){
						if(i%2==1){
							trs[i].style.background="pink";
						}else{
							trs[i].style.background="transparent";
						}
					}
				}else{
					for(var i=0;i<trs.length;i++){
						if(i%2==0){
							trs[i].style.background="purple";
						}else{
							trs[i].style.background="transparent";
						}
					}
				}
			}
		</script>
	</body>
</html>

三：购物车

购物车有单价、数量、小计、总计的变化

//html
<table id="tbl">
		<thead></thead>
		<tbody>
			<tr>
				<td>iphone6</td>
				<td>4488</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>4488</td>
			</tr>
			<tr>
				<td>iphone7</td>
				<td>5488</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>5488</td>
			</tr>
			<tr>
				<td>iphone8</td>
				<td>6488</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>6488</td>
			</tr>
			<tr>
				<td>iphone9</td>
				<td>7488</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>7488</td>
			</tr>
			<tr>
				<td>iphoneX</td>
				<td>8488</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>8488</td>
			</tr>
			<tr>
				<td>RTX3090</td>
				<td>20000</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>20000</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">总计:</td>
				<td id="total">0</td>
			</tr>
		</tfoot>
	</table>

//js未封装版
<script type="text/javascript">
		var btns = document.getElementsByTagName("button");
		for (var i = 0; i < btns.length; i++) {
			btns[i].onclick = function () {
				if (this.innerHTML == "+") {
					var span = this.previousElementSibling;
					var spanV = parseInt(span.innerHTML) + 1;
					if (spanV > 0) {
						span.innerHTML = spanV;
                                                var price this.parentNode.previousElementSibling.innerHTML；				this.parentNode.nextElementSibling.innerHTML = price * spanV;
					}
				} else {
					var span = this.nextElementSibling;
					var spanV = parseInt(span.innerHTML) - 1;
					if (spanV > 0) {
						span.innerHTML = spanV;
						var price = this.parentNode.previousElementSibling.innerHTML				this.parentNode.nextElementSibling.innerHTML = price * spanV;
					}
				}
				var tbody = document.getElementsByTagName("tbody")[0];
				var trs = tbody.children;
				for (var i = 0, sum = 0; i < trs.length; i++) {
					sum += parseInt(trs[i].lastElementChild.innerHTML)
				}
				total.innerHTML = sum;
			}
		}
		var tbody = document.getElementsByTagName("tbody")[0];
		var trs = tbody.children;
		for (var i = 0, sum = 0; i < trs.length; i++) {
			sum += parseInt(trs[i].lastElementChild.innerHTML)
		}
		total.innerHTML = sum;
	</script>

//js封装版
		<script type="text/javascript">
			var btns = document.getElementsByTagName("button");
			for(var i = 0; i < btns.length; i++) {
				btns[i].onclick = function() {
					if(this.innerHTML == "+") {
						jsxj(1, this)
					} else {
						jsxj(-1, this)
					}
					jszj()
				}
			}
			function jsxj(num, btn) {
				if(num == 1) {
					var span = btn.previousElementSibling;
				} else {
					var span = btn.nextElementSibling;
				}
				var spanV = parseInt(span.innerHTML) + num;
				if(spanV > 0) {
					span.innerHTML = spanV;
					var price = btn.parentNode.previousElementSibling.innerHTML
					btn.parentNode.nextElementSibling.innerHTML = price * spanV;
				}
			}
			function jszj(){
				var tbody = document.getElementsByTagName("tbody")[0];
				var trs = tbody.children;
				for(var i = 0, sum = 0; i < trs.length; i++) {
					sum += parseInt(trs[i].lastElementChild.innerHTML)
				}
				total.innerHTML = sum;
			}
			jszj()
		</script>

四：选项卡效果

//html
               <ul>
			<li abc="0" class="active">天涯明月刀</li>
			<li abc="1">古剑奇谭</li>
			<li abc="2">仙剑奇侠传</li>
		</ul>
		<div class="active">天涯明月刀是一款非常好玩不，花钱的游戏</div>
		<div>古剑奇谭 </div>
		<div>仙剑奇侠传 </div>

//css
<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			body{
				color: #fff;
			}
			ul{
				display: flex;
			}
			ul>li{
				width: 100px;
				line-height: 40px;
				border: 1px solid #000;
				background: pink;
				text-align: center;
				cursor: pointer;
			}
			div{
				width: 400px;
				height: 200px;
				background: purple;
				display: none;
				text-align: justify;
				border: 1px solid #000;
			}
			li.active{
				background: purple;
			}
			div.active{
				display: block;
			}
		</style>

//js
<script type="text/javascript">
		var lis = document.getElementsByTagName("li"),
			divs = document.getElementsByTagName("div");//[div,div,div]
		for (var i = 0; i < lis.length; i++) {
			lis[i].onclick = function () {
				for (var i = 0; i < lis.length; i++) {
					lis[i].className = "";
					divs[i].className = "";
				}

				var i = this.getAttribute("abc");
				divs[i].className = "active";
				this.className = "active";
			}
		}
</script>

五：计算器

//html
                <div>
			<textarea id="txt" readonly></textarea>
			<button>1</button>
			<button>2</button>
			<button>3</button>
			<button>4</button>
			<button>5</button>
			<button>6</button>
			<button>7</button>
			<button>8</button>
			<button>9</button>
			<button>0</button>
			<button>.</button>
			<button>+</button>
			<button>-</button>
			<button>*</button>
			<button>/</button>
			<button>%</button>
			<button>C</button>
			<button>=</button>
		</div>

//html
            <style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 300px;
				border: 1px solid #666;
				margin: 0 auto;
				text-align: center;
			}
			textarea{
				resize: none;
				width: 100%;
				border: 0;
				outline: 0;
				border-bottom: 1px solid #666;
				height: 100px;
				font-size: 35px;
			}
			button{
				width: 30%;
				height: 50px;
				margin: 2px 0px;
			}
		</style>

//js
        <script type="text/javascript">
			var btns=document.getElementsByTagName("button");
			for(var i=0;i<btns.length;i++){
				btns[i].onclick=function(){
					if(this.innerHTML=="C"){
						txt.innerHTML="";
					}else if(this.innerHTML=="="){
						txt.innerHTML=eval(txt.innerHTML)
					}else{
						txt.innerHTML+=this.innerHTML
					}
				}
			}	
		</script>
avatar
文章
阅读
粉丝