例:

<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. 巨蟒python全栈开发django11:ajax&&form表单上传文件contentType

    回顾: 什么是异步? 可以开出一个线程,我发出请求,不用等待返回,可以做其他事情. 什么是同步? 同步就是,我发送出了一个请求,需要等待返回给我信息,我才可以操作其他事情. 局部刷新是什么? 通过jq ...

  3. [转]html5表单上传控件Files API

    表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...

  4. js验证表单大全

    js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...

  5. JS 更改表单的提交时间和Input file的样式

    JS转换时间 function renderTime(data) { var da = eval('new ' + data.replace('/', '', 'g').replace('/', '' ...

  6. 文件的上传(表单上传和ajax文件异步上传)

    项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...

  7. 普通文件的上传(表单上传和ajax文件异步上传)

    一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...

  8. js动态控制表单表格

    js动态控制表单表格,这里操作只讲,添加一行,删除一行,删除某一行某一列. 直接放代码: <!DOCTYPE html> <html> <head> <met ...

  9. Vue.js:表单

    ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...

随机推荐

  1. 转→js数组遍历 千万不要使用for...in...

    看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...

  2. 欢迎使用CSDN-markdown编辑器

    私有变量和函数 在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量和函数. function Box(){ var color = "blue&qu ...

  3. iOS多线程-GCD之常用函数

    延迟执行任务函数dispatch_after(.....) -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEve ...

  4. pycharm快捷键及一些常用设置

    pycharm快捷键及一些常用设置,有需要的朋友可以参考下. Alt+Enter 自动添加包 Ctrl+t SVN更新 Ctrl+k SVN提交 Ctrl + / 注释(取消注释)选择的行 Ctrl+ ...

  5. 从sum()求和引发的思考

    sum()求和是一个非常简单的函数,以前我的写法是这样,我想大部分和我一样刚开始学习JS的同学写出来的也会是这样. function sum() { var total=null; for(var i ...

  6. c++虚析构函数

    虚析构函数的作用主要是当通过基类指针删除派生类对象时,调用派生类的析构函数(如果没有将不会调用派生类析构函数) #include <iostream> using namespace st ...

  7. AM335x tscadc platform driver 相关代码跟踪

    TI AM335x ti am335x_tsc.c 代码跟踪 在kernel 首层目录: 先运行make ARCH=arm tags 这个作用是建立tags文件,只含有arm架构的,利用ctag即可进 ...

  8. ElasticSearch详解与优化设计

    简介 概念 安装部署 ES安装 数据索引 索引优化 内存优化 1简介 ElasticSearch(简称ES)是一个分布式.Restful的搜索及分析服务器,设计用于分布式计算:能够达到实时搜索,稳定, ...

  9. Asp.Net 数据库连接字符串

    <configuration> <connectionStrings> <add name="DefaultConnection" providerN ...

  10. [正则表达式]PCRE环视功能

    设想一下这个问题,假设为了方便长串数字的阅读性,需要为其添加逗号作为分隔,需要怎么做呢? 2569836495 => 2,569,836,495 正则表达式的匹配通常是从左往右的,这导致无法使用 ...