JavaScript 窗口、文档及表单对象操作示例 | 极客日志

JavaScript大前端

JavaScript 窗口、文档及表单对象操作示例

JavaScript 窗口、文档及表单对象操作示例。涵盖选项移动、定时器、历史记录、位置跳转、密码验证等常见前端交互功能。通过实例演示 window、history、location、document 及 form 对象的方法使用，包括 open/close 窗口、setTimeout/setInterval 计时、表单提交校验及下拉菜单跳转逻辑。适合初学者理解浏览器对象模型及基础 DOM 操作。

DotNetGuy发布于 2025/1/19更新于 2026/6/518 浏览

JavaScript 常用对象与表单操作示例

本文整理了一系列 JavaScript 基础操作示例，涵盖选项移动、定时器、历史记录、位置跳转、密码验证等常见前端交互功能。通过实例演示 window、history、location、document 及 form 对象的方法使用。

1. 从左边选项选择到右边，左边不变

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项移动示例</title>
<script type="text/javascript">
function createOptions() {
    var option = new Option(document.form1.select1.value);
    var select2_length = document.form1.select2.length;
    var opts = document.getElementById('select2').options;
    if (opts.length > 2) {
        for (var i = 2; i < opts.length; i++) {
            if (document.form1.select1. == opts[i].) {
                ;
            }
        }
    }
     (... !=  && opts. < ) {
        ...[opts.] = option;
        ...[opts. - ]. = ...;
    }
}





可选择项目
---------------
香蕉
芭乐
苹果
梨子



选择项目
---------------

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项移动删除示例</title>
<script type="text/javascript">
function createOptions() {
    var option = new Option(document.form1.select1.value);
    var opts = document.getElementById('select2').options;
    if (document.form1.select1.value != "" && opts.length < 10) {
        document.form1.select2.options[opts.length] = option;
        document.form1.select2.options[opts.length - 1].value = document.form1.select1.value;
        // 注意：remove 方法在旧版 IE 中可能不支持，现代浏览器可用 remove()
        document.form1.select1.remove(document.form1.select1.selectedIndex);
    }
}
</script>
</head>
<body>
<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" id="select2" size="10">
<option>选择项目
<option>---------------
</select>
</form>
</body>
</html>

function add() {
    this.result = this.left + this.right;
}
function MyClass(n) {
    this.left = n;
    this.right = 6;
    this.result = 0;
    this.sum = add;
}
x = new MyClass(4);
x.sum();
document.write(x.result);

<script>
function scrollIt() {
    for (var y = 1; y <= 1000; y++) {
        window.scrollBy(0, 1);
    }
}
</script>
<body ondblclick="scrollIt()">
按鼠标左键两下，画面自动卷动...
<br><br><br><br><br><br><br><br><br><br><br><br><br>
... The End ....
</body>

<form>
<input type="button" value="打开窗口一 (newWin)" onClick="newWin=window.open('index.jsp','')">
<p>
<input type="button" value="height 为 150 点,width 为 200 点" onClick="open('index.jsp','','height=150,width=200')">
<p>
<input type="button" value="只有工具列的窗口" onClick="open('index.jsp','','toolbar=yes')">
<p>
<input type="button" value="关闭窗口一 (newWin)" onClick="newWin.close()">
<p>
<input type="button" value="开关目前窗口" onClick="window.close()">
</form>

<script type="text/javascript">
function timer() {
    setTimeout("alert('3 秒到了!')", 3000);
}
</script>
<body><form>
<input type="button" value="计时开始" onClick="timer()">
</form></body>

<script type="text/javascript">
var counter = 0;
setTimeout("upDate()", 3000);
function upDate() {
    counter++;
    status = "第" + counter + "次载入";
    timer1 = setTimeout("upDate()", 3000);
}
</script>
<body><form>
<input type="button" value="计时结束" onClick="clearTimeout(timer1)">
</form></body>

<body>
<form>
<input type="button" value="上一页" onClick="history.back()">
<input type="button" value="下一页" onClick="history.forward()">
</form>
</body>

<script>
with (document) {
    write("<a href='javascript:location.reload()'>重新载入此页</a><p>");
    write("<a href='javascript:location.replace(''http://www.seed.net.tw'')'>前往 SeedNet 方法一</a><p>");
    write("前往 SeedNet 方法二<p>".link('http://www.seed.net.tw'));
    write("<a href='http://www.seed.net.tw'>前往 SeedNet 方法三</a><p>");
}
</script>
<body>
<a href="http://www.seed.net.tw">前往 SeedNet 方法四</a>
<a href="#" onMouseOver="location.replace('http://www.seed.net.tw')">前往 SeedNet 方法五</a><p>
<a href="#" onMouseOver="location.href='http://www.seed.net.tw'">前往 SeedNet 方法六</a><p>
<a href="#" onMouseOver="window.location='http://www.seed.net.tw'">前往 SeedNet 方法七</a>
</body>

<script>
document.write("◎本页最后更新日期： ");
document.write(document.lastModified);
</script>

<script>
function checkPwLgh(index, str) {
    if (str.length != 9) {
        alert('你只输入' + str.length + '位数\n请输入 9 位数密码');
        document.form1.elements[index].value = '';
        document.form1.elements[index].focus();
    }
}
function checkRetype() {
    if (document.form1.pw.value != document.form1.retypePw.value) {
        alert("两组密码不符，请重新输入");
        document.form1.retypePw.value = '';
        document.form1.retypePw.focus();
    } else {
        alert("密码检查作业完成!");
    }
}
</script>
<form name="form1">
输入密码：<input type="password" name="pw" size="9" maxlength="9" onChange="checkPwLgh(0,this.value)"><BR>
重新输入：<input type="password" name="retypePw" size="9" maxlength="9" onChange="checkPwLgh(1,this.value)"><BR>
<input type="button" value="密码检查" onClick="checkRetype()">
</form>

<script>
var url = new Array(2);
url[0] = "http://www.seed.net.tw";
url[1] = "http://www.hinet.net";
function jumpPage(form) {
    i = form.menu.selectedIndex;
    if (i > 0) {
        window.location.href = url[i - 1];
    }
}
</script>
<Form>
<Select name="menu" onChange="jumpPage(this.form)">
<option>--选择 ISP--
<option>Seednet
<option>Hinet
</Select>
</Form>

<script>
function isReady() {
    if (document.form1.text1.value.length == 9) {
        return true;
    } else {
        alert("请输入 9 位数密码");
        return false;
    }
}
</script>
<Form name="form1" onSubmit="return isReady()">
<input type="text" name="text1">
<input type="submit">
</form>

JavaScript 窗口、文档及表单对象操作示例

JavaScript 常用对象与表单操作示例

1. 从左边选项选择到右边，左边不变

更多推荐文章

相关免费在线工具

2. 从左边选项选择到右边，左边删除此选项

3. 构造函数与原型方法

4. 屏幕滚动效果

5. 窗口对象范例 - 打开与关闭窗口

6. 窗口对象范例 - Timer

7. 窗口对象范例 - History

8. 窗口对象范例 - Location

9. 文档对象范例 - 最后更新时间

10. 表单对象 - Password

11. 表单对象范例 - Select

12. 提交验证 - Submit

更多推荐文章

相关免费在线工具

JavaScript 窗口、文档及表单对象操作示例

JavaScript 常用对象与表单操作示例

1. 从左边选项选择到右边，左边不变

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

2. 从左边选项选择到右边，左边删除此选项

3. 构造函数与原型方法

4. 屏幕滚动效果

5. 窗口对象范例 - 打开与关闭窗口

6. 窗口对象范例 - Timer

7. 窗口对象范例 - History

8. 窗口对象范例 - Location

9. 文档对象范例 - 最后更新时间

10. 表单对象 - Password

11. 表单对象范例 - Select

12. 提交验证 - Submit

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具