JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例


Posted in Javascript onJanuary 26, 2020

本文实例讲述了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>

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">
   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>

JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
js数组操作常用方法
May 08 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
js实现简单的轮播图效果
Dec 13 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 #Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 #Javascript
详解Vue的ref特性的使用
Jan 24 #Javascript
JavaScript对象原型链原理解析
Jan 22 #Javascript
Node.js学习之内置模块fs用法示例
Jan 22 #Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 #Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 #Javascript
You might like
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
深入PHP FTP类的详解
2013/06/13 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
Python二分查找详解
2015/09/13 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
python3 pygame实现接小球游戏
2019/05/14 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
就业协议书范本
2014/04/11 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
英语演讲开场白
2015/05/29 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android