1.弹出模态框
点击弹出按钮,一个背景会覆盖全页(实际上通过display:none 实现)
示例图:
代码:
<!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: #5a42ff;
display: none;
}
.box2{
width: 500px;
height: 500px;
background-color: white;
position: absolute;
top: 100px;
left: 50%;
margin-left: -250px;
text-align: center;
color: red;
}
.box3{
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 50px;
background-color: red;
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>
username: <input type="text" name="username">
</p>
<p>
psw: <input type="password" name="psw">
</p>
<p>
<input type="button" value="submit">
</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'
document.getElementsByName('username')[0].value=""
document.getElementsByName('psw')[0].value=""
}
</script>
</body>
</html>
2.点击有惊喜
每次点击界面可以变换背景(定义一个计数器count实现)
示例图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
margin: auto;
text-align: center;
line-height: 200px;
font-size: 30px;
color: #eeeeee;
}
</style>
</head>
<body>
<div class="box">点击有惊喜！</div>
<script>
var count = 0
var box=document.getElementsByClassName("box")[0]
box.onclick=function (){
count++
if(count==1){
this.style.backgroundColor="green"
this.innerText='继续点击！'
}else if(count==2){
this.style.backgroundColor='yellow'
this.innerText='精彩将出现！'
}else if(count==3){
this.style.backgroundColor='pink'
this.innerText='骗你的！！'
}else{
this.style.backgroundColor='red'
this.innerText='点击有惊喜！'
count=0
}
}
</script>
</body>
</html>
3.贴吧评论楼
每提交一次评论,就会盖一层楼,加上n楼和发布时间,删除按钮. 点击删除时,下面的楼层数会变化.
示例图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
background-color: #f6c2d2;
width: 600px;
}
ul>li {
list-style: none;
background-color: #f5deb3;
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>
4.选项卡
点击不同的选项卡,展示不同的内容
示例图:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
height: 400px;
border: 3px solid #55BBBB;
margin: auto;
}
ul > li {
list-style: none;
width: 200px;
height: 80px;
background-color: grey;
text-align: center;
line-height: 80px;
float: left;
}
ul:after {
display: table;
content: "";
clear: both;
}
.content {
background-color: pink;
width: 600px;
height: 320px;
display: none;
}
li.active {
background-color: lightseagreen;
}
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 (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>