js案例——简易扣扣对话框

本文链接： https://blog.csdn.net/qq_43151638/article/details/102631286
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>扣扣对话框</title>
	<style type="text/css">
		#box{
			width: 450px;
			height: 500px;
			margin: 0px auto;
			border: 5px solid rgba(0,0,0,0.6);
			overflow:auto;
			background:url(img/bg.jpg) no-repeat;
			background-size:cover;
		}
		img{
			border-radius: 50%;
			width: 70px;
			height: 70px;
		}
		input{
			border: none;
			outline: none;
			margin-top: 10px;
			background:rgba(0,0,0,0.5);
		}
		button{				
			margin-top: 10px;
			border: none;
			outline: none;
		}
		
	</style>
</head>
<body>
	<div id="box">
		
	</div>
	<p style="width: 450px;height: 70px;margin: 0px auto;border: 5px solid rgba(0,0,0,0.5);background:rgba(0,0,0,0.2);">
		<img src="img/1.png" alt="" id="images" style="float: left;">
		<input type="text" id="text" style="float: left;width:270px;height: 50px;" />
		<button type="button" style="float: left;width:110px;height:52px;" id="btn">提交</button>
	</p>
	<script type="text/javascript">
		window.onload=function(){
			var box=document.getElementById('box');
			var text=document.getElementById('text');
			var btn=document.getElementById('btn');
			var images=document.getElementById('images');
			var num=1;
			images.onclick=function(){
				num=num+1;
				if(num>2){
					num=1;
				}
				images.src="img/"+num+".png";
			}
			btn.onclick=function(){
				//点击获取输入的内容
				var textValue=text.value;
				var imgValue=images.src;
				//在盒子里显示上一步输入框内容+新获取的内容解决覆盖原有内容的性质
				console.log(num)
				if(num==2){
					box.innerHTML=box.innerHTML+'<p style="float:right;margin:0px 0px 5px;"><span style="width:271px;display:inline-block;text-align:right;">'+textValue+'</span><img src="'+imgValue+'" style="margin-right:5px;"/></p>';
					
				}else{
					box.innerHTML=box.innerHTML+'<p style="width:100%;height:70px;clear:both;margin:5px 0px;"><img src="'+imgValue+'" style="margin-right:5px;"/><span style="display:inline-block;text-align:left;line-height:10px;">'+textValue+'</span></p>';
				}
				//清空输入框的内容
				text.value='';
			}
		}
	</script>
</body>
</html>
js案例——简易扣扣对话框

猜你喜欢
