我的第一个随笔
今天学习了一下'摸摸头'的码，看了看，又重新码了一遍，受益良多，是我注册博客后的第一篇
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>一个简易的动态创建层</title>
<style type="text/css">
input{
margin:10px auto 0;
width:100px;
height:30px;
line-height:30px;
display:block;
font-family:"微软雅黑";
font-size:14px;
}
/*
设置bg和layer的样式
*/
#bg{
display:none;
position:absolute;
top:0;
left:0;
z-index:1;
width:100%;height:100%;background-color:#000;
opacity:0.15;
}
#layer{
position:absolute;
top:0;left:0;z-index:2;
width:300px;height:300px;border:1px solid #ccc;
background:-webkit-radial-gradient(#ffff00,green);
box-shadow:inset 0 0 1px 5px #000;
border-radius:50px 150px;
}
</style>
</head>
<body>
<input type="button" value="登录" id="input1">
</body>
<script type="text/javascript">
//获取当前屏幕的宽和高
//宽
var cw=document.documentElement.clientWidth||
document.body.clientWidth;
//g高
var ch=document.documentElement.clientHeight||
document.body.clientHeight;
//绑定点击“登录”按钮事件
//找到id为"input1"的元素存在oIn中
var oIn=document.getElementById("input1");
oIn.onclick=function(){
//创建动态图层
//创建一个新的div元素，存为bg
//将bg的id名设为bg
//把bg添加到body下
var bg=document.createElement("div");
bg.id="bg";
document.body.appendChild(bg);
//创建一个新的div存为layer
//将layer的id名设为layer
//设置layer的样式的top为当前屏幕的高减去300除以2(因为我们要将layer的高度设置为300)
//同样设置layer的样式的left为当前屏幕的宽减去300除以2
//将layer添加到body下
var layer=document.createElement("dov");
layer.id="layer";
layer.style.top=(ch-300)/2+"px";
layer.style.left=(cw-300)/2+"px";
document.body.appendChild(layer);
//绑定layer的点击事件
layer.onclick=function(){
//删除layer
//删除bg
document.body.removeChild(layer);
document.body.removeChild(bg);
}
}
</script>
</html>
浙公网安备 33010602011771号