JavaScript笔记（七）

最新推荐文章于 2024-04-30 17:28:36 发布

glymm

最新推荐文章于 2024-04-30 17:28:36 发布

阅读量108

点赞数

分类专栏： js对象文章标签： JavaScript Java Bing 百度 Google ViewUI

js对象专栏收录该内容

8 篇文章 0 订阅

订阅专栏

[color=red]文本对象：[/color]

[color=orange]格式： [/color]
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.文本对象名称.属性
document.表单名称.文本对象名称.方法（参数）

[img]http://dl.iteye.com/upload/attachment/291023/f72e2ebf-73df-3515-be9d-26a21dd32503.bmp[/img]

事件处理程序：
onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect

<FORM>
姓名：
<INPUT TYPE="text" NAME="name">
<INPUT TYPE="button" VALUE="请单击" onClick=alert("谢谢你，"+this.form.name.value)>
</FORM>



    <Script>

    function getFocus(obj) {
        obj.style.color='red';
        obj.style.background='#DBDBDB';
    }
    function getBlur(obj) {
        obj.style.color='black';
        obj.style.background='white';
    }

    </Script>

    <BODY onLoad=document.form1.name.focus()>
    <FORM NAME="form1">
    姓　　名：<INPUT TYPE="text" NAME="name"
    onFocus=getFocus(this) onBlur=getBlur(this)><BR>
    电　　话：<INPUT TYPE="text" NAME="tel"
    onFocus=getFocus(this) onBlur=getBlur(this)><BR>
    </FORM>
    </BODY>



    <Script>

    var i = 0;

    function movenext(obj,i) {
    if(obj.value.length==4){
        document.forms[0].elements[i+1].focus();
    }
    }

    function result() {
    fm = document.forms[0];
    num = fm.elements[0].value +
    fm.elements[1].value +
    fm.elements[2].value +
    fm.elements[3].value ;
    alert("你输入的信用卡号码是"+ num);
    }

    </Script>

    <BODY onLoad=document.forms[0].elements[i].focus()>
    请输入你的信用卡号码：
    <form>
    <input type=text size=3 maxlength=4 onKeyup=movenext(this,0)> -
    <input type=text size=3 maxlength=4 onKeyup=movenext(this,1)> -
    <input type=text size=3 maxlength=4 onKeyup=movenext(this,2)> -
    <input type=text size=3 maxlength=4 onKeyup=movenext(this,3)>
    <input type=button value=显示 onClick=result()>
    </form>
    </BODY>

[color=red]关于上例，为什么(obj.value.length==4)的判断，不能写成(obj.value.length==obj.maxlength)?而且我alert了多时，obj.type和obj.size都可以，就maxlength不好用，还是挺费解的。有达人解决一下吧，谢啦[/color]

[color=orange]密码对象：[/color]
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.密码对象名称.属性
document.表单名称.密码对象名称.方法（参数）

[img]http://dl.iteye.com/upload/attachment/291029/3c14e3c4-6f62-3b69-b03c-fb4ce59e5d44.bmp[/img]

事件处理程序：
onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect



    <Script>

    function checkPw() {
    fm = document.form1;
    if (fm.pw2.value != fm.pw1.value) {
        alert("密码不符，请重新输入");
        document.form1.pw2.select();
    }
    else
        alert("谢谢你，"+fm.name.value);
    }

    </Script>

    <BODY onLoad=document.form1.name.focus()>
    <FORM NAME="form1">
    姓　　名：<INPUT TYPE="text" NAME="name"><BR>
    输入密码：<INPUT TYPE="password" NAME="pw1"><BR>
    重新输入：<INPUT TYPE="password" NAME="pw2"><BR>
    <INPUT TYPE="button" VALUE="填好了" onClick=checkPw()>　
    <INPUT TYPE="reset" VALUE="重　填">
    </FORM>
    </BODY>

<Script>

function isInt(elm) {
if (isNaN(elm)) {
    alert("你输入的是" + elm + "\n不是数字！");
    document.forms[0].pw.value = "";
    return false;
}
if (elm.length != 4) {
    alert("请输入四位数数字！");
    document.forms[0].pw.value = "";
    return false;
}
}
</Script>

<form action="test.asp" onSubmit="return isInt(this.pw.value)">
请输入四位数数字密码：<BR>
<input type="password" name="pw">
<input type="submit" value="检查">
</form>

[color=red]*注：isNaN是js自带的函数，返回的是Boolean值
isNaN=is Not a Number
用于判断是否是数字[/color]
[color=orange]
按钮对象、提交按钮对象、重置按钮对象：[/color]
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.按钮对象名称.属性
document.表单名称.按钮对象名称.方法（参数）

[img]http://dl.iteye.com/upload/attachment/291031/45f5bdd7-2b3f-3a5f-93f4-ce1c0cbf5b5e.bmp[/img]

事件处理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove

[color=orange]隐藏对象：[/color]
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.隐藏对象名称.属性
document.表单名称.隐藏对象名称.方法（参数）

[img]http://dl.iteye.com/upload/attachment/291033/1b69aeb3-fff7-3df1-afbd-ec0848c9a3a8.bmp[/img]
[color=orange]
单选按钮对象：[/color]
格式：
document.forms[索引].elements[索引](索引).属性
document.forms[索引].elements[索引](索引).方法（参数）
document.表单名称.单选对象名称[索引].属性
document.表单名称.单选对象名称[索引].方法（参数）

[img]http://dl.iteye.com/upload/attachment/291035/248c8a9d-9291-32ae-8a64-77938fde4ead.bmp[/img]

事件处理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove

<Script>

function show() {
var x = "先生";
if (document.form1.sex[1].checked)
  x = "小姐";
alert(document.form1.name.value + x);
}

</Script>
<FORM NAME=form1>
姓名：<INPUT TYPE="text" NAME="name"><BR>
你是：<INPUT TYPE="radio" NAME="sex" CHECKED>帅哥
<INPUT TYPE="radio" NAME="sex">美女<BR>
<INPUT TYPE="button" VALUE="请单击" onClick=show()>
</FORM>

[color=orange]复选框对象：[/color]
格式：
document.forms[索引].elements[索引].属性
document.forms[索引].elements[索引].方法（参数）
document.表单名称.单选对象名称[索引].属性
document.表单名称.单选对象名称[索引].方法（参数）

[img]http://dl.iteye.com/upload/attachment/291035/248c8a9d-9291-32ae-8a64-77938fde4ead.bmp[/img]

事件处理程序：
onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove

<Script>

function count() {
var checkCount=0;
var num = document.form1.elements.length;

for (var i=0; i<num; i++) {
if (document.form1.elements[i].checked)
  checkCount++;
}
alert ("你喜欢 "+ checkCount + "种颜色。")
}

</Script>
<FORM NAME=form1>
请选择你喜欢的颜色：<BR>
<INPUT TYPE="checkbox" NAME="red">红色
<INPUT TYPE="checkbox" NAME="green">绿色
<INPUT TYPE="checkbox" NAME="blue">蓝色<BR>
<INPUT TYPE="button" VALUE="请单击" onClick=count()>
</FORM>

[color=red]此处如果想取到提交的颜色，应该怎么做啊？[/color]
[color=green]
天上如下代码即可：位置自己找：）还是憋着不问自己解决有成就感啊
需要注意的是，array不要定义数，否则在打印少于3个的时候会有“,”，
再就是js打印list不需要遍历，赞一个
[/color]


var list = new Array();
list[i] = document.form1.elements[i].name;
alert ("你喜欢 "+ checkCount + "种颜色。" + list)

[color=orange]选择对象：[/color]

[img]http://dl.iteye.com/upload/attachment/291037/a19f7508-10b3-3120-9157-0cbb288d99bf.bmp[/img]

事件处理程序：
onBlur onClick onChange onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove

[color=orange]选项对象：选择对象的子对象[/color]
格式：
<option value="值" selected>文字</option>
new Option([文字[,值[,defaultSelected[,selected]]]])

[img]http://dl.iteye.com/upload/attachment/291039/9f4f3c14-08e1-3400-bb57-e2a100886492.bmp[/img]



    <Script>

    var url = new Array(3);
    url[0] = "http://www.google.com.hk/";
    url[1] = "http://www.baidu.com/";
    url[2] = "http://cn.bing.com/";

    function goto(form) {
    var i = form.menu.selectedIndex;
    if (i>0) {
    location = url[i-1];
    }
    }

    </Script>
    <FORM>
    <SELECT NAME="menu" onChange="goto(this.form)">
    <OPTION>你喜欢哪一个搜索引擎?
    <OPTION STYLE="color:red">◆Google
    <OPTION STYLE="color:red">◇百度
    <OPTION STYLE="color:red">◆必应
    </SELECT>
    </FORM>



    <Script>

    function getText() {
    sel = document.forms[0].weekday
    ans = sel.options[sel.selectedIndex].text
    return ans;
    }

    </Script>
    <FORM>请选择...
    <SELECT name=weekday>
    <OPTION VALUE="Monday">星期一
    <OPTION VALUE="Tuesday">星期二
    <OPTION VALUE="Wednesday">星期三
    <OPTION VALUE="Thursday">星期四
    <OPTION VALUE="Friday">星期五
    <OPTION VALUE="Saturday">星期六
    <OPTION VALUE="Sunday">星期日
    </SELECT><P>
    <INPUT TYPE="button" VALUE="取出选项的文字"
    onClick="alert(getText())">
    <INPUT TYPE="button" VALUE="取出选项的值"
    onClick="alert(this.form.weekday.value)"><BR>
    </FORM>

例：
[color=red]用某个大牛的话说，这里选完之后，应该把左边选项中相应的值给去掉
不知道怎么做，hide不好用啊[/color]

<FORM NAME="form1">
你最喜欢哪一种水果?
<INPUT TYPE="text" NAME="fruit">
<A HREF="#" onClick="javascript:open('1.htm','','width=100')">
查询</A>
</FORM>

/* -------- 1.htm -------- */

<Script> 

function choice() {
sel = document.forms[0].elements[0];
document.form1.fruit.value =
sel.options[sel.selectedIndex].text;
self.close();
}

</Script>

<FORM>
<SELECT onChange="choice()">
<OPTION>请选择
<OPTION>西瓜
<OPTION>香蕉
</SELECT>
</FORM>

<上例完>



    <Script>

    function createOptions(){
    var option = new Option(document.form1.select1.value)
    document.form1.select2.options[2] = option;
    }

    </script>

    <form name="form1">
    <select name="select1" size="10">
    <option>可选择项目 <option>---------------
    <option value="香蕉">香蕉 <option value="葡萄">葡萄
    <option value="苹果">苹果 <option value="梨子">梨子
    </select>

    <input type="button" value="-->" onClick="createOptions()">
    <select name="select2" size="10">
    <option>选择项目 <option>---------------
    </select>
    </form>



    <Script>

    function createOptions(){
    sel1 = document.form1.select1;
    sel2 = document.form1.select2;
    var num = sel1.selectedIndex;
    var option = new Option(sel1.options[num].text);
    sel2.options[2] = option;
    }

    </script>

    <form name="form1">
    <select name="select1" size="10">
    <option>可选择项目 <option>---------------
    <option value="香蕉">香蕉 <option value="葡萄">葡萄
    <option value="苹果">苹果 <option value="梨子">梨子
    </select>

    <input type="button" value="-->" onClick="createOptions()">
    <select name="select2" size="10">
    <option>选择项目 <option>---------------
    </select>
    </form>



    <Script>

    function createOptions(){
    sel1 = document.form1.select1;
    sel2 = document.form1.select2;
    var num = sel1.selectedIndex;
    var option = new Option(sel1.options[num].text);
    var item = sel2.options.length;
    sel2.options[item] = option;
    }

    </script>

    <form name="form1">

    <select name="select1" size="10">
    <option>可选择项目 <option>---------------
    <option value="香蕉">香蕉 <option value="葡萄">葡萄
    <option value="苹果">苹果 <option value="梨子">梨子
    </select>

    <input type="button" value="-->" onClick="createOptions()">
    <select name="select2" size="10">
    <option>选择项目 <option>---------------
    </select>
    </form>

<Script>

function createOptions(){

sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
if (num > 1) {
var option = new Option(sel1.options[num].text);
var item = sel2.options.length;
sel2.options[item] = option;
}
sel1.selectedIndex = 10000;
}

function delOptions() {
var num = document.form1.select2.selectedIndex;
if (num>1)
document.form1.select2.options[num] = null;
else
document.form1.select2.selectedIndex = 10000;
}

</script>
<form name="form1">
<select name="select1" size="10"
onDblClick="createOptions()">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select>
<input type="button" value="选择" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
<input type="button" value="删除" onClick="delOptions()">
</form>

[color=orange]
文本区域对象：[/color]

[img]http://dl.iteye.com/upload/attachment/291049/97d61af9-79f8-3bbb-b3b8-640ddaac4304.bmp[/img]

事件处理程序：
onBlur onClick onChange onSelect onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove



    <Script>

    function isTooLong(elm){
    if (elm.length > 50) {
      alert("留言内容太长，请修改后再发送....");
      return false;
    }
    }

    </script>

    <FORM onSubmit="return isTooLong(this.msg.value)">
    <TEXTAREA NAME="msg" COLS="30" ROWS="5" onFocus="this.value=''">
    欢迎留言，不过请长话短说....
    </textarea><BR>
    <INPUT TYPE="submit" VALUE="留言完毕">
    </FORM>

<STYLE>
INPUT {background-color:'99FFFF';color:"red"}
TEXTAREA {background-color:'99FFFF';color:"red"}
</STYLE>
<BODY BGCOLOR="99FFFF">
<FORM METHOD="post" ENCTYPE="text/plain" ACTION="mailto:hwyang@iii.org.tw?subject=不错">
<TABLE>
<CAPTION>读者回函</CAPTION>
<TR><TD>姓　　名：
<TD><INPUT TYPE="text" NAME="userName">
<TR><TD>电子邮件：
<TD><INPUT TYPE="text" NAME="email">
<TR><TD VALIGN="top">内　　容：
<TD><TEXTAREA NAME="msg" ROWS="2" COLS="30">
我非常喜欢你的书，加油!!!
</TEXTAREA>
<TR><TD COLSPAN="2" ALIGN="center">
<INPUT TYPE="submit" VALUE="填好了">
</TABLE>
</FORM>
</BODY>

[color=orange]
文件上传对象：[/color]

[img]http://dl.iteye.com/upload/attachment/291051/4b402a52-0e37-3e7a-9ee7-2ac84137fc53.bmp[/img]

事件处理程序：
onBlur onClick onSelect onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove

glymm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记（七）

[color=red]文本对象：[/color][color=orange]格式： [/color]document.forms[索引].elements[索引].属性document.forms[索引].elements[索引].方法（参数）document.表单名称.文本对象名称.属性document.表单名称.文本对象名称.方法（参数）[img]http:...
复制链接

扫一扫