Javascript(6)

今天看了Javascript视频教程的一集,主要讲述了日期对象Date.
像往常一样，总结一下这集的小知识点吧。
这次我并不想利用1,2,3。。。归结小知识点。而是利用示例来说明。感觉这集视频教程这样来总结比较直观。
示例1：显示时间

主要知识点是：

clearTimeout()方法。清除、停止时间的跳转。

setTimeout()方法。根据设定的时间跳转。

效果图：

代码如下：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Date对象示例：显示时间</title>
<style type="text/css">
input{font-size:50px;color:#cc0000;border-style::none
}
</style><script type="text/javascript" >
function showNowTime()
{var mytime=new Date();var md=(mytime.getYear()+1900)+"-";if(mytime.getMonth()<9){md+="0";}md+=(mytime.getMonth()+1)+"-";if(mytime.getDate()<=9){md+="0";}md+=(mytime.getDate())+" ";if(mytime.getHours()<=9){md+="0"}md+=(mytime.getHours())+":"if(mytime.getMinutes()<=9){md+="0";}md+=(mytime.getMinutes()+":");if(mytime.getSeconds()<=9){md+="0";}md+=mytime.getSeconds();document.getElementById("time").value=md;setTimeout("showNowTime()",1000);
}var settime;var i=0;function ShowTime(){i++;alert(i);settime=setTimeout("ShowTime()" ,2000);}function stopShowTime(){clearTimeout(settime);}</script>
</head >
<body οnlοad="showNowTime()">
<p align="center">
<input id="time" />
<input type="button" οnclick="ShowTime()"  value="两秒弹出一次"/>
<input type="button" οnclick="stopShowTime()" value="停止弹出"/>
</p>
</body>
</html>

示例2：提示在某个时间后自动跳转到某一地址

效果图：

代码如下：

View Code

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="youlianjinda"/>
<meta name="description" content="youlianjinda"/>
<meta http-equiv="refresh" content="10,url="http://www.baidu.com""
<title>跳转</title>
<style type="text/css">
input{
font-size:20px;
color:#33CCFF;
border-style:none;
}
</style>
</head>

<body onload="tiaozhuan()">
<P align="center">
该网站已经停用，如果需要访问原网站内容，请访问新的地址<a href="http://www.baidu.com" target="_blank">http://www.baidu.com</a>
点击后没有跳转，将在 <input id="tiaozhuan" value="10" size="3" readonly />秒后自动跳转。
</P>
<script type="text/javascript">
function tiaozhuan()
{
var settime;
var old=document.getElementById("tiaozhuan").value;
document.getElementById("tiaozhuan").value=parseInt(old)-1;
if(parseInt(old)<=1)
{
window.location="http://www.baidu.com";
clearTimeout(settime);
}
settime=setTimeout("tiaozhuan()",1000);

}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/lhmlyx2723356/archive/2011/04/30/2033528.html

Javascript(6)相关推荐

【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
【JavaScript总结】JavaScript语法基础：JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
【JavaScript总结】JavaScript语法基础：DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
【JavaScript总结】JavaScript语法基础：JS编码
运算符数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...
【JavaScript总结】JavaScript语法基础：数据类型
------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...
【JavaScript总结】JavaScript发展与学习内容
发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...
Python：模拟登录、点击和执行 JavaScript 语句案例
案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...
[JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)
课程来源:后盾人上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...
[JavaScript] JavaScript 数组挖掘，不只是讲数组哟
课程来源:后盾人数组引用类型分析数组的定义 const array = new Array('hello', 'dust', 1, 2, 3, 4, 5) console.log(array) l ...
linux下用js生成xml,js2xml:将javascript字符串转换为xml
有时候爬数据遇到像下面这种,数据在script标签中以javascript形式存在. var totalReviewsValue = 32; var averageRating = 4.5; if(t ...

Javascript(6)

Javascript(6)相关推荐

最新文章

热门文章