JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
更新时间：2020年01月26日 12:40:45 作者：echo曦
这篇文章主要介绍了JS实现的定时器展示简单秒表、页面弹框及跳转操作,结合实例形式分析了JavaScript时间函数及页面元素动态操作相关使用技巧,需要的朋友可以参考下
本文实例讲述了JS实现的定时器展示简单秒表、页面弹框及跳转操作。分享给大家供大家参考，具体如下：
定时器展示简单秒表demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css"></style>
<script type="text/javascript">
//全局变量
var i=0;
var timer;//外面定义全局变量
function start2(){
//获取网页中id=result的< input>元素
var inputObj=document.getElementById("result");
//<input>标记有什么属性.那么,对应的元素对象就有什么属性.
inputObj.value="该程序已经运行了"+i+"秒!";
i++;
//延时器
//延时器想要实现重复执行,必须在函数中不断调用自己.
//这吗实现以后,延时器就可以模拟定时器的效果了.
timer=window.setTimeout("start2()",100);//里面赋值
}
function stop2(){
window.clearTimeout(timer);
}
</script>
</head>
<body>
<input id="result" type="button" value="该程序已经运行了0秒!"/><br/>
<input type="button" value="开始"/ onclick="start2()">
<input type="button" value="停止" onclick="stop2()"/>
</body>
</html>
页面弹框及跳转demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css"></style>
//注意:谷歌浏览器会拦截弹框可以选择火狐浏览器打开
<script type="text/javascript">
window.onload=init;//是将函数的地址传给了事件,而不是将函数的执行结果传给事件. 有名函数或普通函数,作为地址引用,不能带括号.
function init()
{
//更改网页背景色
window.document.body.bgColor="#ff0000";
//变量初始化
var url2="";
var name2="win2";
var options2="width=400,heigth=300,left=300,top=300";
//打开新窗口的方法,winObj就是新窗口对象
var winObj=window.open(url2,name2,options2);
var str="<h2>张三的基本信息</h2>";
str+="姓名:张三";
str+="<br>年龄:28";
str+="<br>性别:男";
winObj.document.write(str);
//5秒后,新窗口自动关闭
winObj.setTimeout("window.close()",5000);
}
</script>
</head>
<body>
<a href="http:\\www.baidu.com" rel="external nofollow" target="win2">百度跳转</a>
</body>
</html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了基于JavaScript的简易计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
如何利用Web Speech API之speechSynthesis实现文字转语音功能
Web Speech API使你能够将语音数据合并到Web应用程序中,SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音,这篇文章主要介绍了利用Web Speech API之speechSynthesis实现文字转语音功能,需要的朋友可以参考下2024-06-06
这篇文章主要为大家详细介绍了微信小程序实现炫酷的弹出式菜单特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
（兼容ff/ie）td点击背景变色特效...2007-08-08
这篇文章主要为大家详细介绍了js基础之事件捕获与冒泡原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。2015-05-05
这篇文章主要为大家介绍了JavaScript定义ajax函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>2021-11-11
这篇文章主要介绍了JS经典正则表达式笔试题,结合实例形式汇总分析了javascript正则表达式的经典使用技巧,需要的朋友可以参考下2016-12-12
今天在项目碰到一个问题，之前在项目首页实现单列表的显示和隐藏，通过wx:if判断就可实现，现在要实现多列表的单项显示和隐藏功能应该如何实现呢？下面小编给大家带来了微信小程序之多列表的显示和隐藏功能，感兴趣的朋友一起看看吧2018-08-08
这篇文章主要介绍了JavaScript同源策略和跨域访问,结合实例形式较为详细的分析了javascript同源策略与跨域访问的原理、实现、使用方法及相关注意事项,需要的朋友可以参考下2018-04-04
最新评论