简易留言板:
<!--<!DOCTYPE html>-->
<!--<html>-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<title>留言板</title>-->
<!--<style>-->
<!--*{-->
<!--margin:0;-->
<!--padding:0;-->
<!--}-->
<!--.close{-->
<!--display:inline-block;-->
<!--width:20px;-->
<!--height:20px;-->
<!--line-height:20px;-->
<!--text-align:center;-->
<!--cursor:pointer;-->
<!---->
<!--margin-left:20px;-->
<!--}-->
<!--</style>-->
<!--</head>-->
<!--<body>-->
<!--<h1>简易留言板</h1>-->
<!--<div id="box">-->
<!--</div>-->
<!--<textarea id="msg"></textarea>-->
<!--<input type="button" id="btn" value="留言"/>-->
<!--<button onclick="sum()">统计</button>-->
<!--</body>-->
<!--<script>-->
<!--// 将ul标签添加到div#box标签中-->
<!--var oUl=document.createElement("ul");-->
<!--var oBox=document.getElementById("box");-->
<!--oBox.appendChild(oUl);-->
<!--var oBtn=document.getElementById("btn");-->
<!--var oMsg=document.getElementById("msg");-->
<!--// 控制留言的总数量-->
<!--var count=0;-->
<!--oBtn.onclick=function(){-->
<!--// 点击留言按钮实践操作-->
<!--// 1.创建li标签-->
<!--var oLi=document.createElement("li");-->
<!--// 2.设置内容-->
<!--oLi.innerHTML=oMsg.value+"<span class='close'>X</span>";-->
<!--// 3.如果想在插入的第一个li获取的前面继续添加li标签-->
<!--// 3.1获取li标签-->
<!--var oLis=document.getElementsByTagName("li");-->
<!--// 3.2如果是第一次添加的li标签,则直接添加到ul的后面-->
<!--if(oLis.length==0){-->
<!--oUl.appendChild(oLi);-->
<!--count++;-->
<!--}else{-->
<!--// 3.3如果不是第一次添加的li标签,则插入到第一个li标签的前面-->
<!--oUl.insertBefore(oLi,oLis[0]);-->
<!--count++;-->
<!--}-->
<!--// 4.添加完成之后 清空textarea的值-->
<!--oMsg.value="";-->
<!--// 5.点击X的时候删除当前的一条数据-->
<!--// 5.1先获取所有的X-->
<!--var oSpans=document.getElementsByTagName("span");-->
<!--// 5.2for循环对所有的X添加点击事件-->
<!--for(var i=0;i<oSpans.length;i++){-->
<!--oSpans[i].onclick=function(){-->
<!--// 5.3移除当前的li标签-->
<!--console.log(this.parentNode);-->
<!--oUl.removeChild(this.parentNode);-->
<!--count--;-->
<!--}-->
<!--}-->
<!--};-->
<!--function sum(){-->
<!--alert("一共发布了"+count+"条留言")-->
<!--}-->
<!--</script>-->
<!--</html>-->
以下是鼠标悬浮时,背景变色,之后还原
<!--<!doctype html>-->
<!--<html>-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<title>悬浮按钮</title>-->
<!--<style>-->
<!--*{-->
<!--margin:0;-->
<!--padding:0;-->
<!--}-->
<!--#box button{-->
<!--width:100px;-->
<!--height:40px;-->
<!--line-height:40px;-->
<!--text-align:center;-->
<!--float:left;-->
<!--margin-left:20px;-->
<!--margin-top:20px;-->
<!--}-->
<!--</style>-->
<!--</head>-->
<!--<body>-->
<!--<div id="box">-->
<!--<button>按钮1</button>-->
<!--<button>按钮2</button>-->
<!--<button>按钮3</button>-->
<!--<button>按钮4</button>-->
<!--<button>按钮5</button>-->
<!--</div>-->
<!--</body>-->
<!--<script>-->
<!--var bt=document.getElementsByTagName("button");-->
<!--for(let i=0;i<bt.length;i++){-->
<!--bt[i].onmouseover=function(){-->
<!--// for(var j=0;j<bt.length;j++){-->
<!--// bt[j].style.backgroundColor="white";-->
<!--// }-->
<!--bt[i].style.backgroundColor="red";-->
<!--};-->
<!--bt[i].onmouseout=function(){-->
<!--bt[i].style.backgroundColor="white";-->
<!--}-->
<!--}-->
<!--</script>-->
<!--</html>-->
以下是tab栏选项卡
<!--<!doctype html>-->
<!--<html>-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<title>Document</title>-->
<!--<style>-->
<!--*{-->
<!--margin:0;-->
<!--padding:0;-->
<!--}-->
<!--.box{-->
<!--width:1226px;-->
<!--height:1000px;-->
<!--margin:0 auto;-->
<!---->
<!--}-->
<!--.box1{-->
<!--margin-left:380px;-->
<!--position:relative;-->
<!--}-->
<!--.box1 a{-->
<!--width:160px;-->
<!--height:60px;-->
<!--float:left;-->
<!--display:block;-->
<!--text-decoration:none;-->
<!--margin-top:50px;-->
<!--line-height:60px;-->
<!--text-align:center;-->
<!---->
<!--}-->
<!--.box1 p{-->
<!--display:none;-->
<!--height:200px;-->
<!--width:480px;-->
<!--line-height:200px;-->
<!--text-align:center;-->
<!--position:absolute;-->
<!--top:110px;-->
<!--}-->
<!--.box1 .active{-->
<!--display:block;-->
<!---->
<!--}-->
<!--</style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="box">-->
<!--<div class="box1">-->
<!--<a href="#" class="active">首页</a>-->
<!--<a href="#">新闻</a>-->
<!--<a href="#">图片</a>-->
<!--<p class="active">首页内容</p>-->
<!--<p>新闻内容</p>-->
<!--<p>图片内容</p>-->
<!--</div>-->
<!--</div>-->
<!--<script>-->
<!--var sa=document.getElementsByTagName("a");-->
<!--var sp=document.getElementsByTagName("p");-->
<!--for(let i=0;i<sa.length;i++){-->
<!--sa[i].onmouseover=function(){-->
<!--for(var j=0;j<sa.length;j++){-->
<!--sa[j].className="";-->
<!--sp[j].className="";-->
<!--}-->
<!--this.className="active";-->
<!--sp[i].className="active";-->
<!--}-->
<!--}-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
购物车</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width:500px;
height:400px;
margin:100px auto;
background-color:rgba(0,0,255,0.4);
position:relative;
}
.car{
width:150px;
height:30px;
background-color:#fff;
padding-left:30px;
position:absolute;
left:130px;
top:3px;
z-index:3;
border:1px solid green;
}
.shop{
width:310px;
height:70px;
background-color:#fff;
position:absolute;
top:33px;
left:0;
display:none;
}
div.c{
border-bottom:0;
}
div.t{
border:1px solid green;
}
</style>
</head>
<body>
<div class="box">
<div class="car" id="myCar">我的购物车</div>
<div class="shop t" id="shop"></div>
</div>
<script type="text/javascript">
var mycar=document.getElementById("myCar");
var shop=document.getElementById("shop");
mycar.onmouseover=function(){
shop.style.display="block";
mycar.className +=" c";
};
mycar.onmouseout=function(){
shop.style.display="none";
mycar.removeAttribute("class");
mycar.className="car";
}
</script>
</body>
模态框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
html,body{
height:100%;
}
#box{
width:100%;
height:100%;
background:rgba(0,0,0,.3);
}
#content{
position:relative;
top:150px;
width:400px;
height:200px;
line-height:200px;
text-align:center;
color:red;
background-color:#fff;
margin:auto;
}
#span1{
position:absolute;
background-color:red;
top:0;
right:0;
width:30px;
height:30px;
line-height:30px;
text-align:center;
color:#fff;
}
</style>
</head>
<body>
<button id="btn">弹出</button>
</body>
<script>
// 获取dom,1.获取事件源
var oBtn=document.getElementById("btn");
// 创建弹出模态框的 相关DOM对象
var oDiv=document.createElement("div");
var oP=document.createElement("p");
var oSpan=document.createElement("span");
// 设置属性
oDiv.id="box";
oP.id="content";
oP.innerHTML="模态框成功弹出";
oSpan.innerHTML="X";
oSpan.id="span1";
// 追加元素
oDiv.appendChild(oP);
oP.appendChild(oSpan);
// 点击弹出按钮 弹出模态框
oBtn.onclick=function(){
// 动态的添加到body中一个div,
this.parentNode.insertBefore(oDiv,btn)
};
// 点击X 关闭模态框
oSpan.onclick=function(){
// 移除oDiv元素
oDiv.parentNode.removeChild(oDiv)
};
</script>
</html>