JavaScript 窗口、文档及表单对象操作示例。涵盖选项移动、定时器、历史记录、位置跳转、密码验证等常见前端交互功能。通过实例演示 window、history、location、document 及 form 对象的方法使用，包括 open/close 窗口、setTimeout/setInterval 计时、表单提交校验及下拉菜单跳转逻辑。适合初学者理解浏览器对象模型及基础 DOM 操作。
本文整理了一系列 JavaScript 基础操作示例，涵盖选项移动、定时器、历史记录、位置跳转、密码验证等常见前端交互功能。通过实例演示 window、history、location、document 及 form 对象的方法使用。
<!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.value == opts[i].value) {
return;
}
}
}
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;
}
}
</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>
<!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>
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online