模态框案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
background-color: darkgray;
}
.box2{
width: 500px;
height: 500px;
background-color: white;
/*margin: auto;*/
/*margin-top: 100px;*/
position: absolute;
top: 100px;
left:50%;
margin-left: -250px;
text-align: center;
line-height: 500px;
color: red;
}
.box3{
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
background-color:
color: white;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<input type="button" value="弹出模态窗" id="btn">
<script>
var btn=document.getElementById('btn')
btn.onclick=function () {
// alert(123)
var box1=document.createElement('div')
var box2=document.createElement('div')
var box3=document.createElement('div')
box3.innerText='X'
box2.innerText='弹出的模态框'
box1.classList.add('box1')
box2.classList.add('box2')
box3.classList.add('box3')
box1.appendChild(box2)
box2.appendChild(box3)
var body=document.getElementsByTagName('body')[0]
body.appendChild(box1) //将box1添加到文档中
box3.onclick=function () {
body.removeChild(box1)
}
}
</script>
</body>
</html>
模态框扩展案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
background-color: darkgray;
display:none /*box1元素不显示,也不占位置了 */
}
.box2{
width: 500px;
height: 500px;
background-color: white;
/*margin: auto;*/
/*margin-top: 100px;*/
position: absolute;
top: 100px;
left:50%;
margin-left: -250px;
/*text-align: center;*/
color: red;
}
.box3{
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
background-color:
color: white;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<input type="button" value="弹出模态窗" id="btn">
<div class="box1">
<div class="box2">
<form action="">
<p>
用户名:<input type="text" name="username">
</p>
<p>
密码:<input type="text" name="password">
</p>
<p>
<input type="button" value="提交">
</p>
</form>
<div class="box3">X</div>
</div>
</div>
<script>
var btn=document.getElementById('btn')
var box1=document.getElementsByClassName('box1')[0]
btn.onclick=function () {
box1.style.display='block' //box1显示为块级模块
}
var box3=document.getElementsByClassName('box3')[0]
box3.onclick=function () {
box1.style.display='none'
document.getElementsByName('username')[0].value=''
document.getElementsByName('password')[0].value=''
console.log(div.box2.username,div.box2.password)
}
</script>
</body>
</html>
点击有惊喜案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: #ec6357;
margin: auto;
text-align: center;
line-height: 200px;
font-size: 30px;
color: #f5ff21;
}
</style>
</head>
<body>
<div class="box">
点击有惊喜!
</div>
<script>
var box=document.getElementsByClassName('box')[0]
var count=0
box.οnclick=function () {
count++
if (count % 4==1){
this.style.backgroundColor='blue'
this.innerText='继续点击!'
}else if(count%4==2)
{
this.style.backgroundColor='pink'
this.innerText='精彩即将揭晓'
}else if(count%4==3)
{
this.style.backgroundColor='green'
this.innerText='骗你的傻逼'
}else
{
this.style.backgroundColor='red'
this.innerText='点击有惊喜!'
}
}
</script>
</body>
</html>
简易评论框案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
background-color:
width: 600px;
}
ul>li{
list-style: none; /*去样式*/
background-color:yellow;
border: 1px dotted black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box1">
<p>评论区</p>
<ul></ul>
</div>
<div class="box2">
<p>留言内容</p>
<textarea name="" id="content" cols="30" rows="10"></textarea>
<p>
<input type="button" value="提交" id="btn">
<input type="button" value="统计" id="cal">
</p>
</div>
<script>
var btn=document.getElementById('btn')
var count=0 //全局初始值
btn.onclick= function () {
var content=document.getElementById('content')//评论框
var val=content.value
if (val.length!=0){
var ul=document.getElementsByTagName('ul')[0]//ul表,用于盛放li标签
var li=document.createElement('li')//造一个li标签,li标签里放评论的内容
var p1=document.createElement('p')//楼层信息
var p2=document.createElement('p')//评论内容
//处理楼层信息
count=document.getElementsByTagName('li').length+1
var d=new Date()
p1.innerHTML='#'+count+'楼 '+' '+d.toLocaleString()+' '+'<span class="del">删除</span>'
//处理评论内容
p2.innerText=val
// alert(val)
//把p1,p2放入li
li.appendChild(p1)
li.appendChild(p2)
// 往ul里添加li,并清除评论框的内容
ul.appendChild(li)
content.value=''
var delButtons=document.getElementsByClassName('del')
var currentButton=delButtons[delButtons.length-1]
// alert(currentButton)
currentButton.onclick=function () {
//console.log(123123213)
ul.removeChild(this.parentNode.parentNode)
}
}
}
</script>
</body>
</html>
简易评论框改进案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
background-color:
width: 600px;
}
ul>li {
list-style: none;
background-color:
border: 1px dotted black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box1">
<p>评论区:</p>
<ul></ul>
</div>
<div class="box2">
<p>留言内容</p>
<textarea name="" id="content" cols="30" rows="10"></textarea>
<p>
<input type="button" value="提交" id="btn">
<input type="button" value="统计" id="cal">
</p>
</div>
<script>
var btn=document.getElementById("btn")
var count=0
btn.onclick = function () {
var content=document.getElementById("content") // 评论框
var val=content.value
if (val.length != 0){
var ul=document.getElementsByTagName("ul")[0] // ul表,用于盛放li标签
var li=document.createElement("li") // 造了一个li标签,li标签里放评论的内容
var p1=document.createElement("p") // 楼层信息
var p2=document.createElement("p") // 评论内容
// 处理楼层信息
count=document.getElementsByTagName("li").length+1
var d=new Date()
p1.innerHTML="#"+ "<span class='num'>"+count +"</span>"+ "楼" + " " +d.toLocaleString() + " " +"<span class='del'>删除</span>"
// 处理评论内容
p2.innerText=val
// 把p1、p2放入li
li.appendChild(p1)
li.appendChild(p2)
// 往ul里添加li,并清除评论框的内容
ul.appendChild(li)
content.value=""
var delButtons=document.getElementsByClassName("del")
var currentButton=delButtons[delButtons.length-1]
// alert(currentButton)
currentButton.onclick=function () {
// console.log(123123213)
// 把后面的楼层都减1
var allNum=document.getElementsByClassName("num")
var currntNum=this.previousElementSibling
for (var i=0;i<allNum.length;i++) {
if (currntNum == allNum[i]) {
// alert(i) // 找到当前索引
for (var j=i+1;j<allNum.length;j++) {
allNum[j].innerText=parseInt(allNum[j].innerText) - 1
}
break
}
}
ul.removeChild(this.parentNode.parentNode)
count--
}
}
}
</script>
</body>
</html>
选项卡案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
height: 400px;
border: 1px solid red;
margin: auto;
}
ul>li {
list-style: none;
width: 200px;
height: 80px;
background-color: gray;
text-align: center;
line-height: 80px;
float: left;
}
ul:after {
display: table;
content: "";
clear: both;
}
.content {
background-color:
width: 600px;
height: 320px;
display: none;
}
li.active {
background-color:
}
div.active {
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">首页</li>
<li>新闻</li>
<li>图片</li>
</ul>
<div class="content active">
首页内容
</div>
<div class="content ">
新闻内容
</div>
<div class="content">
图片内容
</div>
</div>
<script>
var arr=document.getElementsByTagName('li')
for (var i=0;i<arr.length;i++) {
arr[i].n=i
arr[i].onclick=function () {
// alert(this.n)
for (j=0;j<arr.length;j++) {
arr[j].classList.remove("active")
document.getElementsByClassName("content")[j].classList.remove("active")
}
this.classList.add('active')
// document.getElementsByClassName("content")[i].classList.add("active") // 错误的做法
document.getElementsByClassName("content")[this.n].classList.add("active")
}
}
</script>
</body>
</html>