javascript之三效合一

来源：互联网发布：大疆软件下载编辑：程序博客网时间：2024/04/28 13:18

<html><head></head><body><input id="username" type="text"/><script>var username=document.getElementById("username");username.onkeydown=function(e){var charCode=(e||event).keyCode;if(charCode<65||charCode>96){alert("只能输入0到9数字");if(e)e.preventDefault();elseevent.returnValue=false;}}</script></body></html>

<html><head><style>.floatl{font-size:13px;color:blue;width:150px;height:150px;border:1px solid #000;float:left;}.floatr{font-size:13px;color:blue;width:150px;height:150px;border:1px solid #000;float:right;}</style></head><body><span class="floatl"></span><span class"floatl"></span><div style="clear:both"></div><span class="floatr"></span><span class="floatr"></span></body></html>

<html><head><style>#p{font-size:13px;color:blue;width:150px;height:150px;border:1px solid #000;}#c{margin-left:200px;margin-top:10px;width:100px;height:100px;border:1px solid #000;}</style></head><body><div id="p">父亲节点<div id="c">子节点</div></div><script>var p=document.getElementById("p");var c=document.getElementById("c");alert("按确定键观看父亲节点改变效果");with(p.style){fontSize="18px";color="black";background="#eee";}alert("按确定键观看子节点改变效果");with(c.style){background="lightgray";}</script></body></html>

<html><head><style>#p{width:500px;height:500px;border:1px solod #000;position:relative;left:100px;top:100px;background:lightgray;}#c{width:300px;height:200px;border:1px solod #000;position:absolute;left:100px;top:100px;}</style></head><body><div id="c"></div><script>var c=document.getElementById("c");var limitx=450;var limity=450;var dirx=0;var diry=0;var cx=c.offsetLeft;var cy=c.offsetTop;var randomx=3;var randomy=3;setInterval(function(){c.style.left=cx+(dirx?-randomx:randomx)+'px';c.style.top=cy+(diry?-randomy:randomy)+'px';cx=parseInt(c.style.left);cy=parseInt(c.style.top);if(cx>=limitx){dirx=1;c.style.left=limitx+'px';randomx=Math.random()*5+1;}elseif(cx<=0){dirx=0;c.style.left=0+'px';randomx=Math.random()*4+1;}if(cy<=0){diry=0;c.style.top=0+'px';randomy=Math.random()*3+1;}elseif(cy>=limity){diry=1;c.style.top=limity+'px';randomy=Math.random()*2+1;}},80);</script></body></html>

<html><head><style>div{width:100px;height:100px;}#layer1{position:absolute;left:30px;top:30px;background:#000080;opacity:0.2;filter:Alpha(opacity='20');}#layer2{background:#FDBDD7;}</style></head><body><div id="layer1" ></div><div id="layer2" ></div></body></html>

<html><head><style>#block{width:100px;height:100px;border:1px solid #000;position:relative;top:20px;left:100px;}</style></head><body><div id="block"></div></body></html>

<html><head></head><body><form id="reginfo" action="URL地址"><input id="username" type="text"/><input type="submit"/></form><script>var reginfo=document.getElementById("reginfo");var username=document.getElementById("username");reginfo.onsubmit=function(e){if(!/^[0-9]{6,9}$/.test(username.value)){alert("只能输入6到9位数字");if(e)e.preventDefault();elseevent.returnValue=false;}}</script></body></html>

0 0