例:

<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";

}


												


											
JS应用,表单上的一些东西的更多相关文章
	

    
								
  1. 使用jquery.form.js提交表单上传文件
		
    方法: 1.formSerilize()  用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式. 2.clearForm()   清除表单中所有输入值的内容. 3.restF ...
    
		
    2. 
						
  2. 巨蟒python全栈开发django11:ajax&&form表单上传文件contentType
		
    回顾: 什么是异步? 可以开出一个线程,我发出请求,不用等待返回,可以做其他事情. 什么是同步? 同步就是,我发送出了一个请求,需要等待返回给我信息,我才可以操作其他事情. 局部刷新是什么? 通过jq ...
    
		
    3. 
						
  3. [转]html5表单上传控件Files API
		
    表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...
    
		
    4. 
						
  4. js验证表单大全
		
    js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...
    
		
    5. 
						
  5. JS 更改表单的提交时间和Input file的样式
		
    JS转换时间 function renderTime(data) { var da = eval('new ' + data.replace('/', '', 'g').replace('/', '' ...
    
		
    6. 
						
  6. 文件的上传（表单上传和ajax文件异步上传）
		
    项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...
    
		
    7. 
						
  7. 普通文件的上传（表单上传和ajax文件异步上传）
		
    一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...
    
		
    8. 
						
  8. js动态控制表单表格
		
    js动态控制表单表格,这里操作只讲,添加一行,删除一行,删除某一行某一列. 直接放代码: <!DOCTYPE html> <html> <head> <met ...
    
		
    9. 
						
  9. Vue.js：表单
		
    ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 蒙特卡洛模拟入门的几个小例子（R语言实现）
			
    嗯,第一个例子是怎么用蒙特卡洛模拟求pi的值:第二个是用蒙特卡洛模拟求解定积分:第三个是用蒙特卡洛模拟证券市场求解其收益:第四个是用蒙特卡洛模拟验证OLS的参数的无偏性:然后还要R是如何求导,计算导数 ...
    
			
    2. 
						
  2. AVPlayer
			
    AVPlayer     AVPlayerLayer是CALayer的一个子类,由于AVPlayer这个播放器只能安置在AVPlayerLayer 这个图层之上,所以我们需要实例化一个UIView,并 ...
    
			
    3. 
						
  3. Error:Excepted resource of type id
			
    This inspection looks at Android API calls that have been annotated with various support annotations ...
    
			
    4. 
						
  4. runtime理论知识
			
    http://southpeak.github.io/2014/10/25/objective-c-runtime-1/ 转载http://www.jianshu.com/p/6b905584f536 ...
    
			
    5. 
						
  5. noi前机房日常
			
    2015/6/16 上午a了一道省选分组赛day1t2,并在cf100553H双倍经验,好评 bzoj3152(ctsc2013)贪心,用priority_queue要清空 bx2k上午交了几十题,他 ...
    
			
    6. 
						
  6. js 判断客户端浏览器
			
    var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { ...
    
			
    7. 
						
  7. springmvc拦截器验证登录时间
			
    在前一篇[Filter实现用户名验证]的随笔里,记录了如何使用filter 这次增加了拦截器实现 ①filter实现用户登陆时验证用户名是否为null ②interceptor实现用户登陆时时间判断, ...
    
			
    8. 
						
  8. ffmpeg-201612[01,08,10,17,21,27,30]-bin.7z
			
    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 5 屏幕横向放大 20 像素 6 屏幕横向缩小 20 像素 S 下一帧 [ -2秒 ] +2 ...
    
			
    9. 
						
  9. ACID属性区别
			
    事务是指对系统进行的一组操作,为了保证系统的完整性,事务需要具有ACID特性,具体如下: 1. 原子性(Atomic)     一个事务包含多个操作,这些操作要么全部执行,要么全都不执行.实现事务的原 ...
    
			
    10. 
						
  10. androidstdio偶遇一
			
    android的错误 今天在安装androidstdio的过程中产生了遇到了一个错误(之前一直没有重新安装,因为觉得麻烦,但是电脑慢成狗了,只好重新安装....)那么现在步入正题.     首先安装的 ...
    
			
    11.