练习:单选按钮演示。
<html>
#contentid{
display:none;
}
1.是否参与调查问卷?
2.性格测试
-->
您要参与问卷调查吗?
是
否
问卷调查内容:
您的姓名:
您的邮箱:
function showContent(node){
var oDivNode=document.getElementById("contentid");
with(oDivNode.style){ //其实这个和下面注释里的内容效果是一样的,就是另一种写法。
if(node.value=="yes"){
display="block";
}else{
display="none";
}
}
// if(node.value=="yes"){
// oDivNode.style.display="block";
// }else{
// oDivNode.style.display="none";
// }
}
</html>
<html>
#no1ul{
list-style:none;
margin:0px;
}
.close{
display:none;
}
.open{
display:block;
}
function showResult(){
//1.判断是否有答案被选中。获取所有的no1的radio,并遍历判断checked状态。
var oNo1Nodes=document.getElementsByName("no1");
var flag=false; //用这个标记判断是否有答案被选中。
var val; //用这个标记记住被选中的是哪个答案。
for(var x=0;x
if(oNo1Nodes[x].checked){
flag=true;
val=oNo1Nodes[x].value;
break;
}
}
if(!flag){
alert("没有任何答案被选中!");
}
if(val>=1&&val<=3){
document.getElementById("res_1").className="open";
document.getElementById("res_2").className="close"; //注意:这里如果只写res_1 open,那么换一个选项,
//这个结果仍然会显示,会一直显示,所以要两个都写出来。
}else{
document.getElementById("res_2").className="open";
document.getElementById("res_1").className="close";
}
}
欢迎您参与性格测试!
第一题:
您喜欢的水果是什么?
</html>
练习:下拉菜单应用
<html>
.clrclass{
height:50px;
width:50px;
float:left;
margin-right:30px
}
#text{
clear:left;
margin-top:20px;
}
需要显示效果的文字
需要显示效果的文字
需要显示效果的文字
需要显示效果的文字
//注意这里是onchange而不是onclick
function changeColor(node){
var colorVal=node.style.backgroundColor;
document.getElementById("text").style.color=colorVal;
}
function changeColor2(){
var oSelectedNode=document.getElementsByName("selectColor")[0];
var colorVal=oSelectedNode.options[oSelectedNode.selectedIndex].value;
document.getElementById("text").style.color=colorVal;
}
</html>
练习:选择城市(二级联动菜单)
<html>
width:100px;
function selectCity(){
var collCities=[[‘选择城市‘],
[‘海淀区‘,‘朝阳区‘,‘东城区‘, ‘西城区‘],
[‘济南‘,‘青岛‘,‘烟台‘,‘威海‘],
[‘沈阳‘,‘大连‘,‘鞍山‘,‘抚顺‘],
[‘石家庄‘,‘保定‘,‘邯郸‘,‘廊坊‘]];
//获取两个下拉菜单对象。
var oSelNode=document.getElementById("selid");
var oSubSelNode=document.getElementById("subselid");
//获取到底选择的是哪个省
var index=oSelNode.selectedIndex;
//通过角标到容器中去获取对应的城市数组。
var arrCities=collCities[index];
// //将子菜单中的内容清空。否则,如果选山东,城市里会既有北京的区,又有山东的城市。
// for(var x=0;x
// oSubSelNode.removeChild(oSubSelNode.option[x]);
// }
// //上面这个删除太麻烦了,直接一句话就可以代替。
oSubSelNode.length=0;
//遍历获取到的对应城市的数组,并将这个数组的元素封装成option对象,添加到子菜单中。
for(var x=0;x
var oOptNode=document.createElement("option");
oOptNode.innerHTML=arrCities[x];
oSubSelNode.appendChild(oOptNode);
}
}
</html>
练习:在页面中添加附件的动作。
<html>
table a:link,a:visited{
color:#179ed9;
text-decoration:none;
}
table a:hover{
color:#f36021;
}
function addFile(){
//因为文件选取框定义在行对象中,
//所以只要给表格创建新的行和单元格即可。
var oTabNode=document.getElementById("fileid");
var oTrNode=oTabNode.insertRow();
var oTdNode_file=oTrNode.insertCell();
var oTdNode_del=oTrNode.insertCell();
oTdNode_file.innerHTML="";
oTdNode_del.innerHTML="删除附件";
}
function deleteFile(node){
var oTrNode=node.parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
}
</html>
表单校验
<html>
用户名称:
输入密码:
确认密码:
邮件地址:
//校验用户名
function checkUser(){
var flag;
var oUserNode=document.getElementsByName("user")[0];
var name=oUserNode.value;
var oSpanNode=document.getElementById("userspan");
//定义正则表达式。用户名必须是4个字母。
var reg=new RegExp("^[a-z]{4}$","i");
if(reg.test(name)){
oSpanNode.innerHTML="用户名正确".fontcolor("green");
flag=true;
}else{
oSpanNode.innerHTML="用户名错误".fontcolor("red");
flag=false;
}
return flag;
}
// 想要控制只在用户名正确的时候才提交数据,怎么办?
// 直接在form后面加个属性就行。改成这样:
// 注意:这里是return checkForm()。才能在用户名错误的情况下,不提交数据。否则会一直提交。
//
// 另一种方式:自定义提交按钮
// 直接加个按钮,定义个事件,然后用form的submit()方法就行。
//提交事件的处理
function checkForm(){
alert(checkUser()+checkPsw()+checkRepsw()+checkMail());
if(checkUser()&&checkPsw()&&checkRepsw()&&checkMail()){
return true;
}else{
return false;
}
}
function mySubmit(){
var oFormNode=document.getElementById("userinfo");
if(checkUser()&&checkPsw()&&checkRepsw()&&checkMail()){
oFormNode.submit();
}else{
return;
}
}
//关于校验:
//发现很多框(比如用户名和密码)的校验除了几个内容不同外,过程几乎是一样的,所以进行了代码的提取。
function check(name,reg,spanId,okinfo,errinfo){
var flag;
var val=document.getElementsByName(name)[0].value;
var oSpanNode=document.getElementById(spanId);
if(reg.test(val)){
oSpanNode.innerHTML=okinfo.fontcolor("green");
flag=true;
}else{
oSpanNode.innerHTML=errinfo.fontcolor("red");
flag=false;
}
return flag;
}
//这下校验就很简单方便了,比如要校验密码。
function checkPsw(){
var reg=/^\d{4}$/; //这是正则表达式的另一种定义方式,这种方式的数字就不用写成\\d了,因为外面没有双引号
return check("psw",reg,"pswspan","密码格式正确","密码格式错误");
}
//校验确认密码
function checkRepsw(){
var flag;
//获取密码框内容
var pass=document.getElementsByName("psw")[0].value;
//获取确认密码框内容
var repass=document.getElementsByName("repsw")[0].value;
//获取确认密码的span区域
var oSpanNode=document.getElementById("repswspan");
if(pass==repass){
oSpanNode.innerHTML="密码一致".fontcolor("green");
flag=true;
}else{
oSpanNode.innerHTML="密码不一致".fontcolor("red");
flag=false;
}
return flag;
}
//校验邮件
function checkMail(){
var reg=/^\w+@\w+(\.\w+)+$/i; //\w后面写个加号表示一次或多次。
return check("mail",reg,"mailspan","邮件地址格式正确","邮件地址格式错误");
}
</html>
来源: http://www.bubuko.com/infodetail-2281261.html