遮罩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.div1{
height:70%;width:60%;
background-color: darkorchid;
position: absolute;
}
.div2{
height:100%;width:100%;
position:absolute;
background-color: cornflowerblue;
opacity:0.6;
}
.div3{
width: 1600px;
height: 100px;
text-align: center;
background-color: brown;
position: relative;
}
.hide{
display: none;
}
</style>
<body>
<div class="div1 ">
<button id="login">登录</button>
底层
</div>
<div class="div2 hide">遮罩层</div>
<div class="div3 hide">
用户名：<input type="text" value="请输入用户名">
密码： <input type="text" value="请输入密码"><br>
<input type="submit" value="submit">
</div>
</body>
<script>
var login=document.getElementById("login")
var user=document.getElementsByTagName("input")[0]
var pwd=document.getElementsByTagName("input")[1]
var sub=document.getElementsByTagName("input")[2]
var ele_div2=document.getElementsByClassName("div2");
var ele_div3=document.getElementsByClassName("div3");
login.onclick=function (){
ele_div3[0].classList.remove("hide")
ele_div2[0].classList.remove("hide")
}
user.onfocus=function (){
if(user.value="请输入用户名")
{user.value = ""}
}
user.onblur=function (){
if(user.value=="")
{user.value = "请输入用户名"}
}
pwd.onfocus=function (){
if (pwd.value=="请输入密码")
{pwd.value=""}
}
pwd.onblur=function (){
if(pwd.value=="")
{pwd.value = "请输入密码"}
}
sub.onclick=function (){
ele_div3[0].classList.add("hide")
ele_div2[0].classList.add("hide")
}
</script>
</html>
全选反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="All()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>
<br>
<input type="checkbox" value="111">111</input><br>
<input type="checkbox" value="222">222</input><br>
<input type="checkbox" value="333">333</input><br>
</body>
<script>
var tag=document.getElementsByTagName("input");
function All()
{
for (i in tag)
{
tag[i].checked=true;
}
}
function cancel()
{
for (i in tag)
{
tag[i].checked=false;
}
}
function reverse()
{
for (i in tag)
{
tag[i].checked=!tag[i].checked;
}
}
</script>
</html>
二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select onchange=func(this) name="province" >
<option value="" >请选择省份</option>
</select>
<select name="city" >
<option value="" >请选择城市</option>
</select>
</body>
<script>
data={"福建省":["厦门","福州"],"广东省":["深圳","广州"]}
var pro=document.getElementsByName("province")[0];//这里用name拿到的是数组，用id则为单个，注意这个坑
var ct=document.getElementsByName("city")[0];
for (var i in data)
{
var opt=document.createElement("option");
opt.innerHTML=i;
pro.appendChild(opt);
}
function func(that){
var subpro=(that.options[that.selectedIndex]).innerText
ct.options.length=1;
for (i in data[subpro])
{
var opt=document.createElement("option");
opt.innerHTML=data[subpro][i];
ct.appendChild(opt);
}
}
</script>
</html>
时间显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
width: 350px;
height: 50px;
}
</style>
</head>
<body>
当前时间：<input type="text" >
<button onclick="begin()">开始</button>
<button onclick="stop()">停止</button>
<button onclick="clean()">清除</button>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
<script>
function showtime()
{
var cur_time=new Date().toString()
$("input").val(cur_time)
}
var clock
function begin()
{
showtime()
if(!clock){
clock=setInterval(showtime,1000)
} //如果不判断，点击会一直生成新的setInterval对象，没法停止
}
function stop()
{
clearInterval(clock)
clock='' //清空原有的变量值,不进行此操作，clock不能接收新的对象
}
function clean() //不能用clear作为名字，关键字冲突
{
$("input").val('')
}
</script>
</html>
事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>111</p>
<p>222</p>
<p>333</p>
<p>444</p>
<button>add</button>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$("div").on("click","p",function(){ //事件委托
alert("hello");
})
$("button").click(function (){ //生成新元素一样有效果
var index=$("p").length+1
var ele=$("<p></p>").text(index*111);
$("button").before(ele)
})
</script>
</html>
轮播图（590px和470px指图片大小，图片可以自己找，对应修改即可）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer {
width: 590px;
height:470px;
margin:80px auto;
position: relative;
padding: 0;
}
.img {
width:590px;
height:470px;
list-style: none; //去掉li标签的小黑点
position: absolute;
overflow: hidden;
margin-top: 0;
margin-left:0;
padding: 0;
}
.ooo {
display: inline-block;//转化为内联
list-style: none;
position: absolute;
bottom: 20px;
left: 230px;
}
.ooo li{
display: inline-block;
width:12px;
height:12px;
background-color: white;
border-radius: 50%;
margin-right: 5px;
}
.left{
width: 30px;
height: 60px;
background-color: aliceblue;
text-align:center;
font-size: 30px;
position: absolute;
left: 0;
top:50%;
}
.right{
width: 30px;
height: 60px;
background-color: aliceblue;
text-align:center;
font-size: 30px;
position: absolute;
right: 0;
top:50%;
}
/*.hide{*/
/* display: none;*/
/*}*/
.active{
background-color: red!important;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img ">
<li><a href=""><img src="1.jpg" alt=" " ></a></li>
<li><a href=""><img src="2.jpg" alt=" "></a></li>
<li><a href=""><img src="3.jpg" alt=" "></a></li>
<li><a href=""><img src="4.jpg" alt=" "></a></li>
<li><a href=""><img src="5.jpg" alt=" " ></a></li>
</ul>
<ul class="ooo"></ul>
<div class="left "><</div>
<div class="right ">></div>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
//生成底下的小圆圈
var img_len=$(".img li").length;
var index=0 //把当前图片的索引值作为全局变量
var i=0;
for(i;i<img_len;i++){
var ele=("<li></li>");
$(".ooo").append(ele);
}
$(".ooo li").eq(0).addClass("active")
// var j=$(".ooo li").eq(0).hasClass("active")
// alert(j)
//手动轮播
$(".ooo li").mouseover(function (){
index=$(this).index();
$(this).addClass("active").siblings().removeClass("active")
$(".img li").eq(index).stop().fadeIn("fast").siblings().stop().fadeOut()
})
//左右按钮
$(".left").click(function (){
index--;
if(index==0){
index=img_len;
}
$(".ooo li").eq(index).addClass("active").siblings().removeClass("active")
$(".img li").eq(index).stop().fadeIn("fast").siblings().stop().fadeOut()
})
$(".right").click(R) //右按钮跟自动轮播操作一样，故提取出来
function R(){
index++;
if(index==img_len){
index=0;
}
$(".ooo li").eq(index).addClass("active").siblings().removeClass("active")
$(".img li").eq(index).stop().fadeIn("fast").siblings().stop().fadeOut()
}
//自动轮播
c=setInterval(R,1000);
$(".outer").mouseover(function (){
clearInterval(c)
}).mouseout(function (){
c=setInterval(R,1000);
})
</script>
</html>