Web基础之Javascript 进阶

最新推荐文章于 2015-09-08 16:39:19 发布

zhengkang504

最新推荐文章于 2015-09-08 16:39:19 发布

阅读量357

点赞数

本文链接：https://blog.csdn.net/zhengkang504/article/details/8222017

版权

Javascript 进阶

动态添加表格内容：

var length= 0; //只初始化一次

function addrow(){

var name= document.getElementById("name").value;

var rank= document.getElementById("rank").value;

var nickname = document.getElementById("nickname").value;

// varlength = document.getElementById("t1").rows[].length;

var newrow = document.getElementById("t1").insertRow(++length);

var x =newrow.insertCell(0);

var y =newrow.insertCell(1);

var z =newrow.insertCell(2);

x.innerHTML= name;

y.innerHTML= rank;

z.innerHTML= nickname;

document.getElementById("name").value= "";

document.getElementById("rank").value= "";

document.getElementById("nickname").value= "";

}

</script>

<body>

<tableid="t1">

<tr>

</tr>

</table>

<div>

姓名：<input type="text"id="name"><br/>

排名：<input type="text"id="rank"><br/>

绰号：<input type="text"id="nickname"><br/>

</div>

</body>

父窗口与子窗口通信：

Parent:

var newwindow;

function cpen(){ //JavaScript函数名一定要注意,不能用open()等关键字

newwindow= window.open("child.html","_blank");

}

function call(){

varcontent = $("parent").value;

newwindow.document.getElementById("child").value= content;

}

function $(id){

return document.getElementById(id);

}

</script>

<body>

This is parent <input type="text" id="parent"/>

<inputtype="button" value="Open" οnclick="cpen()">

</body>

Child :

function callback(){

opener.document.getElementById("parent").value= document.getElementById("child").value;

}

</script>

<body>

This ischild.<input type="text" id="child"><inputtype="button" value="callback"οnclick="callback()">

</body>

动态创建和删除标签：

function add1(){

var new_link = document.createElement("a");

new_link.href= "http://www.baidu.com";

new_link.innerText= "百度一下";

new_link.style.top= "200px";

new_link.style.left= "300px";

new_link.style.position= "absolute";

document.body.appendChild(new_link);

}

var buttonid = 0;

function add2(){

var new_button = document.createElement("input");

new_button.type= "button";

new_button.value= "I am button";

new_button.id= ++buttonid;

document.getElementById("div1").appendChild(new_button);

}

function del(){

document.getElementById("div1").removeChild(document.getElementById(buttonid--));

}

function shownode(){

var div1= document.getElementById("div1");

window.alert(div1.nodeName+""+div1.nodeType);

window.alert(div1.parentNode.parentNode);

}

function inHtml(){

document.getElementById("sp1").innerHTML= "<a href='http://www.sohu.com'>BaiDu</a>";

}

function inText(){

document.getElementById("sp1").innerText= "<a href='http://www.sohu.com'>";

}

</script>

<body>

<divid="div1" style="width:200px;height:150px;border:1px solidred;"></div>

标签内容的显示和隐藏：

function op(e){

var div1= document.getElementById("div1");

if (e.id== "hide"){

div1.style.display= "none"; // 不影响页面布局，若用visibility则会影响

}else if(e.id == "show"){

div1.style.display= "block";

}

</script>

<body>

gahogahoghaooaghg<br>

ahgoahq9hthgagabg<br>

algagoahogahohago<br>

</div>

</body>

document.getElementsByName:

function show(){

var hobbies = document.getElementsByName("hobby");

window.alert(hobbies.length);

for(var i=0; i<hobbies.length; i++){ //不能用int

if(hobbies[i].checked){

alert(hobbies[i].value);

}

function test(){

var input = document.getElementsByTagName("input");

}

<body>

<input type="checkbox"value="football" name="hobby">FootBall

<input type="checkbox"value="basketball" name="hobby"/>Basketball

<input type="checkbox"value="voliball" name="hobby">VoliBall

</body>

JavaScript输入校验：

function check(){

document.getElementById("sp1").innerText= "";

document.getElementById("sp2").innerText= "";

document.getElementById("sp3").innerText= "";

var check = false;

if(document.forms[0].username.value.length < 4 ||document.forms[0].username.value.length > 6){

document.getElementById("sp1").innerText= "用户名长度在4~6之间";

check= true;

}

if(document.forms[0].passwd.value.length < 8){

document.getElementById("sp2").innerText= "密码长度要大于8";

check= true;

}

if(check){

check= false;

return false; //必须加，否则会提交刷新；

}

</script>

<body>

<table>

</table>

</form>

</body>

简易时钟（setInterval）:

function show(){

document.getElementById("time").value= new Date().toLocaleString();

}

setInterval("show()",1000); //函数名要加""

</script>

<body >

</body>

桌面弹簧球游戏：

speed = 1;

directX =5;

directY =5;

sumX = 0;

sumY = 0;

function move(){

var rabbit = document.getElementById("rab");

sumX +=directX;

sumY +=directY;

rabbit.style.left= sumX + "px";

rabbit.style.top= sumY + "px";

if(rabbit.offsetWidth+ sumX >= document.body.clientWidth || sumX <= 0){

directX= -directX;

}

if(rabbit.offsetHeight+ sumY >= document.body.clientHeight || sumY <= 0){

directY= -directY;

}

setInterval("move()",speed);

</script>

<divid="rab" style="position: absolute;">

<span style="font-style: italic;color: blue;">Hello,I am baby rabbit!</span>

</div>

</body>

zhengkang504

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web基础之Javascript 进阶

Javascript 进阶动态添加表格内容： var length= 0; //只初始化一次 function addrow(){ var name= document.getElementById("name").value; var rank= document.getElementById("rank").value
复制链接

扫一扫