javascript经典题目

最新推荐文章于 2024-07-24 16:48:58 发布

原创最新推荐文章于 2024-07-24 16:48:58 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #UI #HTML #ViewUI

javascript 专栏收录该内容

0 篇文章

订阅专栏

本文提供了一系列前端JavaScript脚本实例，包括列表框元素移动、定时器效果、动态显示日期时间、表单验证等功能，并展示了省市二级联动的实现。

1. 实现列表框元素的左右移动。
move.html
<script type="text/javascript">
function move(a,b)
{
var aObj = document.getElementById(a);
var bObj = document.getElementById(b);
for(var i=0;i<aObj.length;i++)
{
if(aObj[i].selected)
{
var opt = new Option(aObj[i].text,aObj[i].value);
bObj.add(opt);
aObj.remove(i);
i--;
}
}
}
</script>
<table width="40%" border="1" bgcolor="#cecece">
<tr>
<td><select id="left" size="6" multiple>
<option value="1">增加简历</option>
<option value="2">删除简历</option>
<option value="3">修改简历</option>
<option value="4">列表简历</option>
</select></td>
<td><input type="button" value=">>"
onclick="move('left','right')"><br>
<input type="button" value="<<"
onclick="move('right','left')"></td>
<td><select id="right" size="6" multiple style="width: 80px">
</select></td>
</tr>
</table>

2. 实现姓名和学号每隔一秒钟互换的效果。
change.html
<script>
//每隔一秒钟学号和姓名互换
var i = 0;
window.onload=change;
setInterval('change()',1000);
function change()
{
if(i%2)
{
document.getElementById("result").innerHTML='姓名:张三';
}else
{
document.getElementById("result").innerHTML='学号:0303003';
}
i++;
}
</script>
<div id="result"></div>

3. 动态显示当前日期时间。
datetime.html
<script>
window.onload=init;
setInterval('init()',1000);
function init()
{
var date = new Date();
var year = date.getYear();
var month = date.getMonth()+1;
if(month<10)month="0"+month;
var day = date.getDate();
if(day<10)day="0"+day;
var hour = date.getHours();
if(hour<10)hour="0"+hour;
var minute = date.getMinutes();
if(minute<10)minute="0"+minute;
var second = date.getSeconds();
if(second<10)second="0"+second;
var dateTime = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
document.getElementById("dateTime").value= dateTime;
}
</script>
<input type="text" name="dateTime" readonly>

4. 实现全选和反选。
check.html
<script>
//全选
function checkAll()
{
var chAll = document.getElementById("ckAll");
var items = document.getElementsByName("item");
for(var i = 0;i<items.length;i++)
{
items[i].checked = chAll.checked;
}
}
//反选
function reverseAll()
{
var revAll = document.getElementById("revAll");
var items = document.getElementsByName("item");
for(var i = 0;i<items.length;i++)
{
items[i].checked = !items[i].checked ;
}
}
</script>
全选<input type="checkbox" name="ckAll" onclick="checkAll()">/反选<input type="checkbox" name="revAll" onclick="reverseAll()"><br>
<input type="checkbox" name="item"><br>
<input type="checkbox" name="item"><br>
<input type="checkbox" name="item"><br>
<input type="checkbox" name="item"><br>
<input type="checkbox" name="item"><br>

5. 实现省市二级联动
connAction.html
<script language="javascript">

</script>
<select name="province"
onChange="connAction(this.selectedIndex)">
<option value="直辖市" selected>直辖市</option>
<option value="湖北">湖北</option>
<option value="河北">河北</option>
<option value="湖南">湖南</option>
</select>
省
<select name="city">
<option value="北京" selected>北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="重庆">重庆</option>
</select>
市

6. 实现基本的表单验证功能
formCheck.html
<HTML>
<HEAD>
<TITLE>FormCheck</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>
TD {
FONT-SIZE: 12px;
COLOR: #333333
}
</STYLE>
<SCRIPT language=JavaScript type=text/JavaScript src="formcheck.js"></SCRIPT>
<SCRIPT language=JavaScript>

</SCRIPT>
<BODY text=#000000 bgColor=#ffffff onload=focusInFirst()>
<CENTER><B><FONT
face="Geneva, Arial, Helvetica, san-serif" color=#ff6600
size=4>The sample of FormCheck</FONT></B> <FONT
face="Arial, Helvetica, sans-serif" size=2>(By Roczhao) </FONT>
<HR width="60%" color=#000000 noShade SIZE=1>

<FORM name=testForm onsubmit="return formCheck();" method=post>
<TABLE cellSpacing=0 cellPadding=0 width=500 border=1>
<TBODY>
<TR>
<TD width=182 height=25>身份证：</TD>
<TD width=312><INPUT name=id></TD>
</TR>
<TR>
<TD width=182 height=25>固定电话：</TD>
<TD width=312><INPUT name=tel></TD>
</TR>
<TR>
<TD width=182 height=25>手机号码：</TD>
<TD width=312><INPUT name=mobi></TD>
</TR>
<TR>
<TD width=182 height=25>邮箱：</TD>
<TD width=312><INPUT name=mail></TD>
</TR>
<TR>
<TD width=182 height=25>邮编：</TD>
<TD width=312><INPUT name=post></TD>
</TR>
<TR>
<TD width=182 height=25>只能输入数字、字母、下划线：</TD>
<TD width=312><INPUT name=nlu></TD>
</TR>
<TR>
<TD width=182 height=25>输入长度在4-6之间：</TD>
<TD width=312><INPUT name=leng></TD>
</TR>
<TR align=middle>
<TD colSpan=2 height=25><INPUT type=submit
value=" 点击测试 " name=Submit></TD>
</TR>
</TBODY>
</TABLE>
</FORM>
</CENTER>
</BODY>
</HTML>
formcheck.js
/*js函数文件 formcheck.js*/
/*焦点放置在第一个表单域*/
function focusInFirst(){
document.forms[0].elements[0].focus();}

/*判断用户输入是否为空*/
function isEmpty(ui) {
return (ui==null||ui=="");}

/*取得用户输入的字符串的长度*/
function getLength(ui) {
var i,sum=0;
for(i=0;i<ui.length;i++) {
if ((ui.charCodeAt(i)>=0) && (ui.charCodeAt(i)<=255))
sum++;
else
sum+=2;}
return sum;}

/*是否为数字、字母或下划线*/
function isNLU(ui) {
var valid=/^\w*$/;
return (valid.test(ui));}

/*判断是否为身份证号码*/
function isIdno(ui){
var valid=/(^\d{16}$)|(^\d{18}$)/;
return (isEmpty(ui)||valid.test(ui));}

/*判断是否为邮政编码*/
function isPostCode(ui){
var valid=/^\d{6}$/;
return (isEmpty(ui)||valid.test(ui));}

/*判断是否为固定电话*/
function isChinaTel(ui){
var valid=/^0\d{2,3}\-\d{7,8}$/;
return (isEmpty(ui)||valid.test(ui));}

/*判断是否为移动电话*/
function isChinaMob(ui){
var valid=/^0?13[0,1,3,5,6,8,9]\d{8}$/;
return (isEmpty(ui)||valid.test(ui));}

/*判断是否为电话，只能为固定电话或移动电话*/
function isTel(ui){
var valid=/(^0\d{2,3}\-\d{7,8}$)|(^0?13[0,1,3,5,6,8,9]\d{8}$)/;
return (isEmpty(ui)||valid.test(ui));}

/*判断是否为邮件*/
function isMail(ui){
if(isEmpty(ui)){return true;}
var notValid=/(@.*@)|(\.\.)|(@\.)|(\.@)|(^\.)|(^\-)|(\-\.)|(\.\-)/;
var valid=/^.+\@[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}$/;
return (!notValid.test(ui)&&valid.test(ui));}

/*用户输入字符串长度是否在两值之间*/
function isLenBetween(ui,minl,maxl) {
return (ui>=minl&&ui<=maxl);}