可以看出,使用方式越來越簡單,程式員越來越傻,不知道是好事,還是壞事。。。 ...
最近項目在做頁面，有兩個js的效果，個人感覺還是挺不錯的，給大家共用一下。
各位要是瞧上眼了，就拿去用。
放張霉霉圖片鎮一下
分割線
這個是實現輸入內容智能提示補充的，我是用在郵箱填寫上的、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>monster</title>
<script>
//輸入內容改變調用的函數
function textChange()
{
var input=document.getElementById("email").value;
var temp=document.getElementById("email1");
var content="";
temp.innerHTML="";
//在此處寫入要補充的字元串
var a = new Array("@qq.com", "@163.com", "@126.com", "@sina.com");
for(var t in a){
content+="<option value=";
content+=input+a[t]+">"
}
temp.innerHTML=content;
}
</script>
</head>
<div>
<input style="border-radius:5px;" id="email" onkeyup="textChange();" required="required" list="email1" type="text" placeholder="Email">
<datalist id="email1">
</datalist>
<span class="fa fa-envelope form-control-feedback"></span>
</div>
<body>
</body>
</html>
第二個js是div翻轉效果，可用在登錄的時候找回密碼上，或者其他地方，主要思路是兩塊div，一塊是block，一塊none，翻轉的時候兩個交替，比如block的塊從0-90，none的塊從270-360，然後再把塊的display屬性none和block互相交換，這邊我寫的函數有點蠢，因為在setInterval這個函數中要傳遞參數比較麻煩，我又是個麻煩的人，我就多copy了幾個函數就解決了。好吧，就這樣了 拜拜。。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script>
//實現頁面反轉
var x,y,ny=0,nx=270,rotYINT
function begin(){
y=document.getElementById("rotatey1");
x=document.getElementById("rotatey2");
clearInterval(rotYINT);
rotYINT=setInterval("startYRotate11()",5);
setTimeout("setValue()",500);
}
function end(){
clearInterval(rotYINT);
rotYINT=setInterval("startYRotate21()",5);
setTimeout("setValue1()",500);
}
function setValue(){
y.style.display="none";
x.style.display="block";
clearInterval(rotYINT);
rotYINT=setInterval("startYRotate12()",5);
}
function setValue1(){
x.style.display="none";
y.style.display="block";
clearInterval(rotYINT);
rotYINT=setInterval("startYRotate22()",5);
}
//從270到360 1
function startYRotate12()
{
nx=nx+1;
x.style.transform="rotateY(" + nx + "deg)";
x.style.webkitTransform="rotateY(" + nx + "deg)";
x.style.OTransform="rotateY(" + nx + "deg)";
x.style.MozTransform="rotateY(" + nx + "deg)";
if (nx>=360)
{
nx=270;
clearInterval(rotYINT);
}
}
//從270到360 2
function startYRotate22()
{
nx=nx+1;
y.style.transform="rotateY(" + nx + "deg)";
y.style.webkitTransform="rotateY(" + nx + "deg)";
y.style.OTransform="rotateY(" + nx + "deg)";
y.style.MozTransform="rotateY(" + nx + "deg)";
if (nx>=360)
{
nx=270;
clearInterval(rotYINT);
}
}
//從0-90 把1
function startYRotate11()
{
ny=ny+1;
y.style.transform="rotateY(" + ny + "deg)";
y.style.webkitTransform="rotateY(" + ny + "deg)";
y.style.OTransform="rotateY(" + ny + "deg)";
y.style.MozTransform="rotateY(" + ny + "deg)";
if (ny>=90){
ny=0;
clearInterval(rotYINT);
}
}
// 0-90 把2
function startYRotate21()
{
ny=ny+1;
x.style.transform="rotateY(" + ny + "deg)";
x.style.webkitTransform="rotateY(" + ny + "deg)";
x.style.OTransform="rotateY(" + ny + "deg)";
x.style.MozTransform="rotateY(" + ny + "deg)";
if (ny>=90){
ny=0;
clearInterval(rotYINT);
}
}
</script>
</head>
<div id="rotatey1" style="display:block;width:200px; height:200px; background-color:pink;">
<button onclick="begin();">我是正面</button>
</div>
<div id="rotatey2" style="display:none;width:200px;height:200px; background-color:pink;">
<button onclick="end();">我是反面</button>
</div>
<body>
</body>
</html>
效果演示：http://139.199.67.243/myserver/20170727 這是小弟的一個騰訊雲，安全做的很爛，求各位做安全的大佬放過。
拜拜
