您的位置：首页 > 其它

linked-in小例子

2016-07-13 19:34 218 查看

<!DOCTYPE html>
<html>

<head>
<meta
charset="utf-8"
/>
<title></title>
<style
type="text/css">
body
{
background-image: -webkit-linear-gradient(#008cc9
10%,
#009ea5 80%);
background-repeat:
no-repeat;
}

#wrap
{
width:
360px;
height:
500px;
overflow:
hidden;
margin:
auto;
text-align: center;
padding-top:
5px;
padding:
15px;
}

h2
{
color: white;
}

h3
{
color: white;
}

#txt1
{
width:
140px;
height:
32px;
font-size:
13px;
color:
#434649;
border-radius:
2px;
padding-left:
6px;
line-height:
32px;
float:
left;
margin-bottom:
15px;
margin-left:
26px;
border:
1px solid
#BFBFBF;
}

#txt2
{
width:
140px;
height:
32px;
font-size:
13px;
color:
#434649;
border-radius:
2px;
padding-left:
6px;
line-height:
32px;
float:
right;
margin-bottom:
15px;
margin-right:
26px;
border:
1px solid
#BFBFBF;
}

#txt3,
#txt4
{
width:
300px;
height:
32px;
font-size:
13px;
color:
#434649;
border-radius:
2px;
padding-left:
6px;
line-height:
32px;
margin-bottom:
15px;
border:
1px solid
#BFBFBF;
}

p
{
width:
320px;
height:
28px;
color:
#9bdaf3;
font-size:
12px;
margin:
auto;
text-align: center;
}

#btn
{
width:
300px;
height:
34px;
font-size:
16px;
font-weight:
bold;
background-color:
#efb920;
border-radius:
2px;
cursor:
pointer;
padding:
3px
16px;
text-align: center;
margin-top:
15px;
}

#div1
{
text-align:
left;
width:
295px;
height:
0;
border-radius:
2px;
margin-bottom:
15px;
margin-left:
26px;
border:
1px solid
#dd3737;
background-color:
#dd3737;
overflow:
hidden;
padding-left:
10px;
line-height:
28px;
}

.x1
{
width:
14px;
height:
14px;
color:
#dd3737;
font-size:
12px;
border:
1px solid white;
background-color: white;
border-radius:
14px;
line-height:
14px;
display:
inline-block;
text-align:
center;
}

.x2
{
color: white;
font-size:
13px;
line-height:
15px;
margin-left:
5px;
}

.x3
{
margin-left:
140px;
color: white;
font-size:
12px;
cursor:
pointer;
}
</style>
</head>

<body>
<div
id="wrap">
<h2>领英，全球最大的职业社交网站</h2>
<h3>加入领英，打造您的职场品牌</h3>

<input
type="text"
id="txt1" value=""
placeholder="真实姓名"
/>
<input
type="text"
id="txt2" value=""
placeholder="外文名(选填)"
/>
<input
type="text" id="txt3"
value="" placeholder="邮箱"
/>
<input
type="password"
id="txt4" value=""
placeholder="密码"
/>
<p>点击“立即加入”，即表示您同意遵守领英的《用户协议》、《隐私政策》及《Cookie 政策》。</p>
<input
type="submit"
id="btn" value="立即加入"
/>
</div>
<script
src="js/tween.js"
type="text/javascript" charset="utf-8"></script>
<script
type="text/javascript">
var
oWrap = document.getElementById("wrap");
var
oBtn = document.getElementById("btn");
var
oTxt1 = document.getElementById("txt1");
var
oTxt3 = document.getElementById("txt3");
var
oTxt4 = document.getElementById("txt4");
var
timer = null;

oBtn.onclick
= function() {
function
Donghua() {
var
t = 0;
var
b = 0;
var
c = 32;
var
d = 20;

clearInterval(timer);
timer
= setInterval(function() {
t++;
if
(t >= d) {
clearInterval(timer);
}
oDiv.style.height
= Tween.Linear(t, b, c, d) + "px";
},
20)
}

var
oDiv = document.createElement("div");
oDiv.setAttribute("id",
"div1");
var
oX1 = document.createElement("span");
oX1.setAttribute("class",
"x1");
var
oX2 = document.createElement("span");
oX2.setAttribute("class",
"x2");
var
oX3 = document.createElement("span");
oX3.setAttribute("class",
"x3");
if
(oTxt1.value == ""
|| oTxt3.value == ""
|| oTxt4.value == "") {
oDiv.appendChild(oX1);
oDiv.appendChild(oX2);
oDiv.appendChild(oX3);
oWrap.insertBefore(oDiv, oWrap.children[2]);
oX1.innerHTML
= "X";
oX2.innerHTML
= "请输入完整信息。";
oX3.innerHTML
= "X";
oTxt1.style.borderColor
= "#dd3737";
oTxt3.style.borderColor
= "#dd3737";
oTxt4.style.borderColor
= "#dd3737";
Donghua();

}
else if (oTxt4.value.length < 6) {
oDiv.appendChild(oX1);
oDiv.appendChild(oX2);
oDiv.appendChild(oX3);
oWrap.insertBefore(oDiv, oWrap.children[2]);
oX1.innerHTML
= "X";
oX2.innerHTML
= "密码须大于6位。";
oX3.innerHTML
= "X";
oTxt1.style.borderColor
= "#dd3737";
oTxt3.style.borderColor
= "#dd3737";
oTxt4.style.borderColor
= "#dd3737";
Donghua();
}

oX3.onclick
= function() {
var
t = 0;
var
b = 32;
var
c = -32;
var
d = 20;

clearInterval(timer);
timer
= setInterval(function() {
t++;
if
(t >= d) {
oWrap.removeChild(oDiv);
clearInterval(timer);
}
oDiv.style.height
= Tween.Linear(t, b, c, d) + "px";
},
20)
}
oBtn.onclick
= !oBtn.onclick;
}
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： DOM tween

相关文章推荐

新的分享

章节导航