day58
作者：互联网
（1）模态框
（2）简易评论框
（3）选项卡
（4）点击
模态框
方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框</title>
<style>
.box1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
}
.box2 {
width: 600px;
height: 300px;
position: absolute;
top: 200px;
left: 50%;
margin-left: -300px;
background-color: yellow;
text-align: center;
line-height: 300px;
}
.box3 {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" value="弹出模态框" id="btn">
<script>
var btn=document.getElementById('btn')
btn.onclick=function () {
var box1=document.createElement('div') //创建一个div
var box2=document.createElement('div')
var box3=document.createElement('div')
box1.classList.add('box1') //第一个box1表示声明的box1变量，第二个box1表示<style>中的类'box1'（给创建的div加上类'box1'属性）
box2.classList.add('box2')
box2.innerText='这是一个模态框'
box3.classList.add('box3')
box3.innerText='x'
box1.appendChild(box2)
box2.appendChild(box3)
var body=document.getElementsByTagName('body')[0]
body.appendChild(box1) //body中加上子标签box1
box3.onclick=function () {
body.removeChild(box1) //点击关闭后清除模态框页面，回到主页（box1包含box2和box3）
}
}
</script>
</body>
</html>
方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框</title>
<style>
.box1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
display: none;
}
.box2 {
width: 600px;
height: 300px;
position: absolute;
top: 200px;
left: 50%;
margin-left: -300px;
background-color: yellow;
text-align: center;
/*!*line-height: 300px;*! 取消行高*/
}
.box3 {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: red;
}
</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 style="margin-left: 15px">
密码：<input type="password" 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'
}
var box3=document.getElementsByClassName('box3')[0]
box3.onclick=function () {
box1.style.display='none' //点击关闭后清除模态框页面，回到主页（box1包含box2和box3）
document.getElementsByName('username')[0].value=''
document.getElementsByName('password')[0].value=''
}
</script>
</body>
</html>
简易评论框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易评论框</title>
<style>
.box1 {
background-color: royalblue;
width: 600px;
}
ul>li {
list-style: none;
background-color: lawngreen;
border: 1px solid 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标签，放评论内容
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
//将p1、p2放入li
li.appendChild(p1)
li.appendChild(p2)
//向ul中添加li，并清除评论框内容
ul.appendChild(li)
content.value=''
var delButton=document.getElementsByClassName('del')
var currentButton=delButton[delButton.length-1]
currentButton.onclick=function () {
ul.removeChild(this.parentNode.parentNode) //span--->p--->li
}
}
}
</script>
</body>
</html>
选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 900px;
height: 400px;
border: 1px solid green;
margin: auto;
margin-top: 100px;
}
ul:after {
display: table;
content: '';
clear: both;
}
li {
width: 300px;
height: 80px;
list-style: none;
background-color: gray;
float: left;
text-align: center;
line-height: 80px;
}
li.active {
background-color: lawngreen;
}
.content {
width: 900px;
height: 320px;
background-color: royalblue;
text-align: center;
line-height: 320px;
display: none;
}
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 () {
for (var 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')[this.n].classList.add('active')
}
}
</script>
</body>
</html>
点击有惊喜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击</title>
<style>
.box {
width: 600px;
height: 300px;
background-color: red;
text-align: center;
line-height: 300px;
margin: 0 auto;
margin-top: 100px;
font-size: 30px;
color: chartreuse;
}
</style>
</head>
<body>
<div class="box">点击</div>
<script>
var box=document.getElementsByClassName('box')[0]
var count=0
box.onclick=function () {
count++
if (count % 4 == 1){
this.style.backgroundColor='blue'
this.innerText='继续点击'
}else if (count%4==2){
this.style.backgroundColor='yellow'
this.innerText='点击查看链接'
}else if (count%4==3){
this.style.backgroundColor='deepskyblue'
this.innerHTML='<a href="https://www.bilibili.com">记得三连</a>'
}
}
</script>
</body>
</html>
标签：color,height,day58,var,li,document,box1 来源： https://www.cnblogs.com/bronya/p/13771017.html