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 相关文章推荐
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
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
php 过滤危险html代码
2009/06/29 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
php简单中奖算法(实例)
2017/08/15 PHP
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
python实现自动发送报警监控邮件
2018/06/21 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
学习保证书范文
2014/04/30 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
新农村建设汇报材料
2014/08/15 职场文书
校园广播稿精选
2014/10/01 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
2015年教师国培感言
2015/08/01 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
Python使用永中文档转换服务
2022/05/06 Python
python读取mat文件生成h5文件的实现
2022/07/15 Python
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server