JavaScript Browser 对象实例
JavaScript基础 2022-04-25 01:55:31小码哥的IT人生shichen
JavaScript Browser 对象实例
使用 JavaScript 来访问和操作浏览器对象的实例。
Window 对象
完整实例【单击按钮时打开一个新窗口】：
<!DOCTYPE html>
<html>
<head>
<script>
function openWin() {
window.open("http://www.phpcodeweb.com/");
}
</script>
</head>
<body>
<form>
<input type="button" value="打开新窗口" onclick="openWin()">
</form>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【打开一个新窗口并控制其外观】：
<!DOCTYPE html>
<html>
<body>
<p>单击按钮以打开一个包含一些规格的新窗口。</p>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
window.open("http://www.phpcodeweb.com/", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【让新窗口失去并获得焦点】：
<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=400, height=200");
myWindow.blur();
}
function blurWin() {
myWindow.blur();
}
function focusWin() {
myWindow.focus();
}
</script>
</head>
<body>
<input type="button" value="打开新窗口" onclick="openWin()">
<input type="button" value="失焦新窗口" onclick="blurWin()">
<input type="button" value="聚焦新窗口" onclick="focusWin()">
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【关闭新窗口】：
<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=400, height=200");
}
function closeWin() {
myWindow.close();
}
</script>
</head>
<body>
<input type="button" value="打开 myWindow" onclick="openWin()" />
<input type="button" value="关闭 myWindow" onclick="closeWin()" />
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【检查新窗口是否被关闭】：
<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=400 ,height=200");
}
function closeWin() {
if (myWindow) {
myWindow.close();
}
}
function checkWin() {
msg = ""
if (!myWindow) {
msg = "从未打开";
} else {
if (myWindow.closed) {
msg = "已关闭";
} else {
msg = "已打开";
}
}
document.getElementById("msg").innerHTML =
"myWindow " + msg;
}
</script>
</head>
<body>
<button onclick="openWin()">打开 myWindow</button>
<button onclick="closeWin()">关闭 myWindow</button>
<button onclick="checkWin()">myWindow 打开了吗？</button>
<br><br>
<div id="msg"></div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【向源（父）窗口写一些文本】：
<!DOCTYPE html>
<html>
<head>
<script>
function openWin() {
var myWindow = window.open("", "", "width=400, height=200");
myWindow.opener.document.getElementById("demo").innerHTML =
"已经打开一个新窗口。";
}
</script>
</head>
<body>
<button onclick="openWin()">打开 myWindow</button>
<p id="demo"></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【相对于当前位置移动新窗口】：
<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
myWindow=window.open("", "", "width=400, height=200");
}
function moveWin() {
myWindow.moveBy(250, 250)
}
</script>
</head>
<body>
<input type="button" value="打开 myWindow" onclick="openWin()" />
<br><br>
<input type="button" value="移动 myWindow" onclick="moveWin()" />
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【将新窗口移动到指定的位置】：
<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin() {
myWindow=window.open("", "", "width=400, height=200");
}
function moveWin() {
myWindow.moveTo(300, 0);
myWindow.focus();
}
</script>
</head>
<body>
<input type="button" value="打开 myWindow" onclick="openWin()" />
<br><br>
<input type="button" value="移动 myWindow" onclick="moveWin()" />
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【打印当前页面】：
<!DOCTYPE html>
<html>
<head>
<script>
function printPage() {
window.print();
}
</script>
</head>
<body>
<input type="button" value="打印此页" onclick="printPage()" />
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【按指定像素调整窗口大小】：
<!DOCTYPE html>
<html>
<head>
<script>
var w;
function openwindow() {
w = window.open('','', 'width=100,height=100');
w.focus();
}
function myFunction() {
w.resizeBy(50, 50);
w.focus();
}
</script>
</head>
<body>
<button onclick="openwindow()">创建一个窗口</button>
<button onclick="myFunction()">调整窗口大小</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【将窗口调整为指定的大小】：
<!DOCTYPE html>
<html>
<head>
<script>
var w;
function openwindow() {
w = window.open('','', 'width=100,height=100');
w.focus();
}
function myFunction() {
w.resizeTo(500, 500);
w.focus();
}
</script>
</head>
<body>
<button onclick="openwindow()">创建一个窗口</button>
<button onclick="myFunction()">调整窗口大小</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【按指定的像素数滚动内容】：
<!DOCTYPE html>
<html>
<head>
<script>
function scrollWindow() {
window.scrollBy(0, 10);
}
</script>
</head>
<body>
<p>单击下面的按钮，页面会向下滚动几个像素：</p>
<input type="button" onclick="scrollWindow()" value="滚动" />
<h2>保留字</h2>
<hr>
<p>您不能将保留字用作变量、标签或函数名称：</p>
<hr>
<br>
abstract<br><br>
arguments<br><br>
boolean<br><br>
break<br><br>
byte<br><br>
case<br><br>
catch<br><br>
char<br><br>
class<br><br>
const<br><br>
continue<br><br>
debugger<br><br>
default<br><br>
delete<br><br>
do<br><br>
double<br><br>
else<br><br>
enum<br><br>
eval<br><br>
export<br><br>
extends<br><br>
false<br><br>
final<br><br>
finally<br><br>
float<br><br>
for<br><br>
function<br><br>
goto<br><br>
if<br><br>
implements<br><br>
import<br><br>
in<br><br>
instanceof<br><br>
int<br><br>
interface<br><br>
let<br><br>
long<br><br>
native<br><br>
new<br><br>
null<br><br>
package<br><br>
private<br><br>
protected<br><br>
public<br><br>
return<br><br>
short<br><br>
static<br><br>
super<br><br>
switch<br><br>
synchronized<br><br>
this<br><br>
throw<br><br>
throws<br><br>
transient<br><br>
true<br><br>
try<br><br>
typeof<br><br>
var<br><br>
void<br><br>
volatile<br><br>
while<br><br>
with<br><br>
yield<br><br>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【将内容滚动到指定的位置】：
<!DOCTYPE html>
<html>
<head>
<script>
function scrollWindow() {
window.scrollTo(0, 100);
}
</script>
</head>
<body>
<p>单击下面的按钮，页面会向下滚动到指定的坐标：</p>
<input type="button" onclick="scrollWindow()" value="滚动" />
<h2>保留字</h2>
<hr>
<p>您不能将保留字用作变量、标签或函数名称：</p>
<hr>
<br>
abstract<br><br>
arguments<br><br>
boolean<br><br>
break<br><br>
byte<br><br>
case<br><br>
catch<br><br>
char<br><br>
class<br><br>
const<br><br>
continue<br><br>
debugger<br><br>
default<br><br>
delete<br><br>
do<br><br>
double<br><br>
else<br><br>
enum<br><br>
eval<br><br>
export<br><br>
extends<br><br>
false<br><br>
final<br><br>
finally<br><br>
float<br><br>
for<br><br>
function<br><br>
goto<br><br>
if<br><br>
implements<br><br>
import<br><br>
in<br><br>
instanceof<br><br>
int<br><br>
interface<br><br>
let<br><br>
long<br><br>
native<br><br>
new<br><br>
null<br><br>
package<br><br>
private<br><br>
protected<br><br>
public<br><br>
return<br><br>
short<br><br>
static<br><br>
super<br><br>
switch<br><br>
synchronized<br><br>
this<br><br>
throw<br><br>
throws<br><br>
transient<br><br>
true<br><br>
try<br><br>
typeof<br><br>
var<br><br>
void<br><br>
volatile<br><br>
while<br><br>
with<br><br>
yield<br><br>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Screen 对象
完整实例【访问者屏幕：宽度】：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"屏幕宽度是：" + screen.width;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【访问者屏幕：高度】：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"屏幕高度是：" + screen.height;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【访问者屏幕：可用宽度】：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"可用屏幕宽度是：" + screen.availWidth;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【访问者屏幕：可用高度】：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"可用屏幕高度是：" + screen.availHeight;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【访问者屏幕：色深】：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"屏幕色深是：" + screen.colorDepth;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【访问者屏幕：像素深度】：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"屏幕像素深度是：" + screen.pixelDepth;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Location 对象
完整实例【返回当前 URL 的主机名和端口】：
<!DOCTYPE html>
<html>
<body>
<h1>window.location 对象</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"页面主机名是：" + window.location.hostname;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【返回当前页面的完整 URL】：
<!DOCTYPE html>
<html>
<body>
<h1>window.location 对象</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"本页面的完整 URL 是：<br>" + window.location.href;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【返回当前 URL 的路径名】：
<!DOCTYPE html>
<html>
<body>
<h1>window.location 对象</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"页面路径是：" + window.location.pathname;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【返回当前 URL 的协议部分】：
<!DOCTYPE html>
<html>
<body>
<h1>window.location 对象</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"页面协议是：" + window.location.protocol;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【加载新文档】：
<!DOCTYPE html>
<html>
<body>
<h1>window.location 对象</h1>
<input type="button" value="加载新的文档" onclick="newDoc()">
<script>
function newDoc() {
window.location.assign("http://www.phpcodeweb.com/")
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【替换当前文档】：
<!DOCTYPE html>
<html>
<body>
<button onclick="window.location.replace('http://www.phpcodeweb.com/')">
替换文档
</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【跳出框架】：
<!DOCTYPE html>
<html>
<head>
<script>
function breakout() {
if (window.top != window.self) {
window.top.location = "/index.html";
}
}
</script>
</head>
<body>
<input type="button" onclick="breakout()" value="跳出框架">
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
History 对象
完整实例【显示历史列表中的 URL 数目】：
<!DOCTYPE html>
<html>
<body>
<p>显示历史记录列表中的 URL 数量：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = history.length;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【在页面中创建后退按钮】：
<!DOCTYPE html>
<html>
<head>
<script>
function goBack() {
window.history.back()
}
</script>
</head>
<body>
<button onclick="goBack()">后退</button>
<p>单击此处的“后退”按钮不会导致任何操作，因为历史记录列表中没有之前的 URL。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【在页面中创建前进按钮】：
<!DOCTYPE html>
<html>
<head>
<script>
function goForward() {
window.history.forward()
}
</script>
</head>
<body>
<button onclick="goForward()">前进</button>
<p>单击此处的“前进”按钮不会导致任何操作，因为历史列表中没有下一个 URL。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【加载历史（记录）列表中的特定 URL】：
<!DOCTYPE html>
<html>
<head>
<script>
function goBack() {
window.history.go(-2)
}
</script>
</head>
<body>
<button onclick="goBack()">后退两页</button>
<p>单击此处的“后退两页”按钮不会导致任何操作，因为历史列表中没有之前的 URL。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Navigator 对象
完整实例【访问者浏览器中是否启用 cookie？】：
<!DOCTYPE html>
<html>
<body>
<h1>Navigator 对象</h1>
<p>如果启用了 cookie，则 cookieEnabled 属性返回 true：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"navigator.cookieEnabled 是：" + navigator.cookieEnabled;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【访问者浏览器的名称是什么？】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Navigator 对象</h1>
<p>appCodeName 属性返回浏览器的代码名称。</p>
<p>不要依赖它！ “Mozilla” 是 Chrome、Firefox、IE、Safari 和 Opera 的应用程序代码名称。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"navigator.appCodeName is " + navigator.appCodeName;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【访问者浏览器的引擎名称是什么？】：
<!DOCTYPE html>
<html>
<body>
<h1>Navigator 对象</h1>
<p>product 属性返回浏览器的产品名称。</p>
<p>不要依赖它！大多数浏览器都将 “Gecko” 作为产品名称返回！</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"navigator.product 是：" + navigator.product;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【访问者浏览器的版本信息是什么？】：
<!DOCTYPE html>
<html>
<body>
<h1>Navigator 对象</h1>
<p>appVersion 属性返回有关浏览器的版本信息：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = navigator.appVersion;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【访问者浏览器的用户代理信息是什么？】：
<!DOCTYPE html>
<html>
<body>
<h1>Navigator 对象</h1>
<p>userAgent 属性返回浏览器发送给服务器的用户代理标头：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
navigator.userAgent;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【访问者浏览器是什么平台？】：
<!DOCTYPE html>
<html>
<body>
<h1>Navigator 对象</h1>
<p>platform 属性返回浏览器平台（操作系统）：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"navigator.platform 是：" + navigator.platform;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【访问者浏览器是什么语言？】：
<!DOCTYPE html>
<html>
<body>
<h1>Navigator 对象</h1>
<p>language 属性返回浏览器的语言：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"navigator.language 是：" + navigator.language;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【是否在访问者的浏览器中启用了 Java？】：
<!DOCTYPE html>
<html>
<body>
<h1>Navigator 对象</h1>
<p>如果启用了 Java，则 javaEnabled() 方法返回 true：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"javaEnabled 是：" + navigator.javaEnabled();
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
弹出框
完整实例【显示警告框】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 警告框</h1>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
alert("我是一个警告框！");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【演示在警告框中换行】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript</h1>
<p>在警告框中换行。</p>
<button onclick="alert('HellonHow are you?')">试一试</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【显示确认框】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 确认框</h1>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt;
if (confirm("Press a button!")) {
txt = "您按了确定";
} else {
txt = "您按了取消";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【显示提示框】：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Prompt</h1>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt;
var person = prompt("请输入您的名字：", "哈利波特");
if (person == null || person == "") {
txt = "用户取消输入";
} else {
txt = "你好，" + person + "！今天过得好吗？";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
计时
完整实例【简单计数】：
<!DOCTYPE html>
<html>
<body>
<p>点击“试一试”。等待 3 秒钟，页面将提示“Hello”。</p>
<button onclick="setTimeout(myFunction, 3000);">试一试</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【另一个简单计数】：
<!DOCTYPE html>
<html>
<body>
<button onclick="timedText()">试一试</button>
<p id="demo">点击“试一试”。我将在两秒，四秒和六秒过后显示。</p>
<script>
function timedText() {
setTimeout(myTimeout1, 2000)
setTimeout(myTimeout2, 4000)
setTimeout(myTimeout3, 6000)
}
function myTimeout1() {
document.getElementById("demo").innerHTML = "2 秒";
}
function myTimeout2() {
document.getElementById("demo").innerHTML = "4 秒";
}
function myTimeout3() {
document.getElementById("demo").innerHTML = "6 秒";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【无限循环中的计时事件】：
<!DOCTYPE html>
<html>
<body>
<button onClick="setInterval(myCounter, 1000)">启动计数器</button>
<p id="demo">点击上面的按钮，我会永远计数。</p>
<script>
var c = 0;
function myCounter() {
document.getElementById("demo").innerHTML = ++c;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【无限循环中的计时事件 - 带有停止按钮】：
<!DOCTYPE html>
<html>
<body>
<button onClick="myTimer = setInterval(myCounter, 1000)">启动计数器</button>
<p id="demo">点击上面的按钮，我会永远计数。</p>
<button onClick="clearInterval(myTimer)">停止计数器</button>
<script>
var c = 0;
function myCounter() {
document.getElementById("demo").innerHTML = ++c;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【用计时事件创建的时钟】：
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // 在数字 < 10 之前加零
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例【通过 setInterval() 和 clearInterval() 设置并停止计时器】：
<!DOCTYPE html>
<html>
<body>
<p>此页面上的脚本启动这个时钟：</p>
<p id="demo"></p>
<button onclick="clearInterval(myVar)">停止时间</button>
<script>
var myVar = setInterval(myTimer ,1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Cookies
完整实例【创建一个欢迎 cookie】：
<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("再次欢迎您，" + user);
} else {
user = prompt("请输入姓名：","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
