JS经典基础案例,对话框
输入框中没有输入东西的时候按钮式是橘色的,不能点击,当有东西输入的时候按钮立马变成粉色,并且点击提交之后,会在下面生成一个信息框,点击右上角的x号,可以删除那条信息框:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
width: 800px;
/*height: 1500px;*/
border:3px solid ;
margin:0 auto;
padding-bottom: 20px;
}
textarea{
display: block;
width: 90%;
height: 300px;
border:5px solid pink;
margin:0 auto;
margin-top:50px;
outline: none;
}
input[type="button"]{
display: block;
background-color: pink;
width: 80px;
height: 30px;
margin-left: 40px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<textarea cols="30" rows="10" id="content"></textarea>
<input type="button" value="提交">
</div>
</body>
<script>
//获取元素
var inp = document.querySelector("input");
var text = document.getElementById("content");
var wrap = document.querySelector(".wrap");
//点击事件
inp.onclick = function(){
//当文本框中输入不为空时
if(text.value!=""){
console.log(text.value);
//创建一个对话框
var dialog = document.createElement("div");
//为对话框设置样式
dialog.style.width="85%";
dialog.style.border="3px solid pink";
dialog.style.backgroundColor="#A3DAC1";
dialog.style.marginLeft="40px";
dialog.style.marginTop="10px";
dialog.style.position="relative";
dialog.style.borderRadius="5px";
//设置换行,中文是默认可以换行的,英文需要设置
dialog.style.wordWrap="break-word"
dialog.style.padding="20px";
//将对话框添加到wrap的子级中
wrap.appendChild(dialog);
//将获取到的value添加到对话框中
dialog.innerHTML+=text.value;
//创建删除的按钮
var d = document.createElement("div");
//为删除按钮设置样式
d.style.width="15px";
d.style.height="15px";
d.innerHTML="X";
d.style.position="absolute";
d.style.top="0px";
d.style.right="0px";
d.style.cursor="pointer";
//将删除按钮添加到对话框中
dialog.appendChild(d);
console.log(d);
console.log(dialog);
//将value置空
text.value="";
//当点击删除按钮时删除对话框
d.onclick = function(){
dialog.remove();
}
}
}
setInterval(function(){
if(text.value){
inp.style.backgroundColor="#F49D9A";
inp.disabled=false;
}else{
inp.style.backgroundColor="#F4D6B4";
inp.disabled=true;
}
},10);
</script>
</html>
效果如图:
- QQ群:253510359
- 建议:VPS商家层出不穷,根据需要购买,切莫剁剁剁!
- 评测:很多VPS虽已评测,但网络环境改变稳定性,速度也会随之改变.评测只能作为一般性参考.不负任何法律,道义责任.
- 申明:所有vps,域名,服务器优惠信息均来自网络公开内容,由于水平有限不免有谬误.请以官方为准.