<!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案例——简易扣扣对话框
最新推荐文章于 2023-03-28 20:38:03 发布