例:
<body>
<form>我的生日是哪一年?
<input type="text" value="" id="t1" name="t1" />
<input type="submit" onclick="checkName()" id="t2" name="t2" value="检查答案" />
</form>
<script language="javascript">
function Space(s){ /* 这里是删去空格,如果输入了字符串
while((s.length>0)&&(s.charAt(0)==' ')) 并且第0位是空格,那么重新截取1-最后.
s = s.substring(1, s.length); while循环直到不是空格的那位数,尾巴
while((s.length>0)&&(s.charAt(s.length-1)==' ')) 一样.*/
s = m.substring(0, s.length-1);
return s;
}
function checkName()
{
var a = document.getElementById("t1");
a.value=Space(a.value)
if(a.value.length == )
{
alert("不能为空");
}
else if(a.value==)
{
alert("正确");
}
else
{
alert("错误");
}
}
</script>
</body>
这样看起来很麻烦,我们可以通过操作属性来判断.
通过ID获取值，var a = document.getElementById("id");
a.setAttribute("属性名","属性值"); 设置一个属性，添加或更改都可以：disabled
a.getAttribute("属性名")；获取属性的值
a.removeAttribute("属性名")；移除一个属性
<body> <input type="text" answer="" value="" id="t1" /> <input type="button" onclick="check()" value="检查答案" /> <script language="javascript"> function check()
{
var a=document.getElementById("t1");
var a1=a.value;
var a2=a.getAttribute("answer");
if(a1==a2)
{
alert("答对了！");
}
else
{
alert("再想想！");
}
}
</script>
</body>
在标签里面添一条属性, answer="1989" 可以自己命名,然后通过js获取内容用getAttribute("answer")来对比输入的内容.
我们也可以用removeAttribute来移除一个标签属性,如果移除一个关键属性就可以实现一个功能,如
<body>
<form>
<input type="submit" id="b1" name="b1" value="同意（9）" disabled="disabled" />
</form>
<script language="javascript"> var n=;
var a= document.getElementById("b1");
function bian()
{
n--;
if(n==)
{
a.removeAttribute("disabled");
a.value="同意";
return;
}
else
{
a.value= "同意（"+n+"）";
window.setTimeout("bian()",); //设置时间,("函数","执行间隔(毫秒)")
}
}
window.setTimeout("bian()",);
</script>
</body>
我们也可以用setAttribute来添加一个标签属性,如果移除一个关键属性就可以实现一个功能
setAttribute()里面 ("加入标签名","标签的属性值")
_________________________________________传说中的分割线___________________________________________
例子：换窗口的背图片，每隔三秒换一次，循环不止；点上一张、下一张可以切换，这时停止了自动转换。
<style type="text/css">
.pages
{
border:1px solid gray;
padding:15px 15px 15px 15px;
position:fixed;
top:200px;
text-align:center;
color:white;
background-color:#C3C;
font-weight:bold; }
#p1
{
left:10px;
}
#p2
{
right:10px;
}
</style>
</head>
<body style=" background-image:url(banner4.jpg)">
<iframe id="ff" src="preload.html" width="" height="" frameborder=""></iframe>
<div class="pages" id="p1" onclick="dodo(-1)">前一张</div>
<div class="pages" id="p2" onclick="dodo(1)">后一张</div>
</body>
<script language="javascript">
var jpg =new Array();
jpg[]="url(1.jpg)";
jpg[]="url(2.jpg)";
jpg[]="url(3.jpg)";
jpg[]="url(4.jpg)"; var xb=;
var n=;
function huan()
{
xb++;
if(xb == jpg.length)
{
xb=;
}
document.body.style.backgroundImage=jpg[xb];
if(n==)
{
var id = window.setTimeout("huan()",);
} }
function dodo(m)
{
n=;
xb = xb+m;
if(xb < )
{
xb = jpg.length-;
}
else if(xb >= jpg.length)
{
xb = ;
}
document.body.style.backgroundImage=jpg[xb];
}
window.setTimeout("huan()",);
</script>
_________________________________________传说中的分割线___________________________________________
<style type="text/css">
#main
{
width:200px;
background-color:#CCF;
}
.topic
{
font-weight:bold;
text-align:center;
background-color:#C39;
color:white;
font-size:14px;
padding:5px 0px 5px 0px;
margin-top:1px; }
.list
{
border:1px solid navy;
height:200px;
background-color:#CFF;
display:none;
}
</style>
</head>
<body> <div id="main">
<div class="topic" onclick="dodo('l1')">工作计划管理</div>
<div class="list" id="l1"> </div>
<div class="topic" onclick="dodo('l2')">个人资料管理</div>
<div class="list" id="l2"></div>
<div class="topic" onclick="dodo('l3')">部门外联管理</div>
<div class="list" id="l3"></div>
<div class="topic" onclick="dodo('l4')">系统设置</div>
<div class="list" id="l4"></div>
</div>
</body>
<script language="javascript">
function dodo(listid)
{ var dd = document.getElementById(listid);
if(dd.style.display != "block")
{
dd.style.display="block";
}
else
{
dd.style.display="none";
}
}
</script>
同一时间只允许打开一个
function dodo(listid)
{
var dd = document.getElementById(listid);
var ll = document.getElementsByClassName("list");
for(var i=;i<ll.length;i++)
{
ll[i].style.display="none";
} dd.style.display="block"; }