js入门例子小结4

最新推荐文章于 2025-09-12 16:56:45 发布

原创最新推荐文章于 2025-09-12 16:56:45 发布 · 781 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #表单

js 专栏收录该内容

5 篇文章

订阅专栏

感谢张龙老师

js23.html

<script type="text/javascript">
//遍历所有的链接
function cl(){
alert(document.links.length);
for(var i = 0 ; i < document.links.length; i++){
alert(document.links[i]);
}
}

</script>
  </head>
  
  <body>
<h1>搜索引擎列表：</h1>
<a href = "http://www.google.com">google</a><br>
<a href = "http://www.baidu.com">baidu</a><br>
<a href = "http://www.sougu.com">sougu</a><br>
<a href = "http://www.bing.com">bing</a><br>
<input type = "button" value = "look"  onclick = "cl()">

　　　  </body>

js24.html

<script type="text/javascript">
//自动对准每个输入框的开始部分
function moveNext(object,index){
if(object.value.length == 4){
document.forms[0].elements[index + 1].focus();
}
}

function  showResult(){
var f = document.forms[0];
var result = "";
for(var i = 0; i < 4 ; i++){
result += f.elements[i].value;
}
alert(result);
}
</script>
  </head>
  
  <body onload = "document.forms[0].elements[0].focus();" >
<form >
<input type ="text" size = "3" maxlength = "4" onkeyup="moveNext(this,0)"/>-
<input type ="text" size = "3" maxlength = "4"onkeyup="moveNext(this,1)"/>-
<input type ="text" size = "3" maxlength = "4"onkeyup="moveNext(this,2)"/>-
<input type ="text" size = "3" maxlength = "4"onkeyup="moveNext(this,3)"/>
<input type = "button"  value = "显示" onclick = "showResult();">
</form>
</body>

js25.html

<script type="text/javascript">

//生成cookie

var today = new Date();
var expireDay = new Date(); 
var msPerMonth = 31 * 24 * 60 * 60 * 1000;

expireDay.setTime(today.getTime() + msPerMonth);

 document.cookie = "name=zhang;expie=" + expireDay.toGMTString();

document.writeln("cookie已经写到硬盘上了");

document.writeln("内容是" + document.cookie);

document.writeln("有效日期是：");

document.writeln(expireDay.toGMTString());

</script>

begain,jsp 和end.jsp实现动态生成多选框，并对多选框进行全选、展开或收缩的操作。

1.begain.jsp中写表单

<body>
<form action="end.jsp" method ="post" onsubmit = "return validate();">

请输入数字（5--15）<input type = "text" name = "number">
<input type ="submit" >
</form>
 </body>

2.处理单击事件，实现客户端验证

<script type="text/javascript">
//确认输入的是10到15之间的数字。不是，重新输入。
function validate(){

var num = document.getElementsByName("number")[0];
if(num.value.length == 0){
alert("请重新输入");
num.focus();
return false;
}

for(var i = 0; i < num.value.length; i++){
var param = "0123456789";
if(param.indexOf(num.value.charAt(i)) == -1){
alert("请输入数字");
num.focus();
return false;
}
}

if(parseInt(num.value) < 10 || parseInt(num.value) > 15){
num.value  = 10;
}
return true;
}
</script>

3.处理action方法，转向end.jsp

<script type="text/javascript">
//实现全选
function checkAll(){
var checkAll = document.getElementsByName("checkAll")[0];
var check = document.getElementsByName("check");

if(checkAll.checked ){
for(var i = 0; i < check.length; i ++){
check[i].checked = true;
}
}
else {
for(var i = 0; i < check.length; i ++){
check[i].checked = false;
}
}
}
//实现展开和收缩
function handle(){
with(document){
var button = getElementById("change");
var table = getElementById("table");
}

if(button.value == "收缩"){
table.style.display = "none";
button.value = "展开";
}
else if(button.value == "展开"){
table.style.display = "block";
button.value = "收缩";
}
}
</script>