这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

1.通过javascript向文档中输出文本

document是javascript的内置对象,代表浏览器的文档部分
document.write("Hello Javascript"); 向文档写入字符串

2.javascript都是放在script标签中的,一旦加载,就会执行

javascript顺序执行,如果有多段script代码,会按照从上到下,顺序执行
javascript有两种注释方式 :
单行注释 //
多行注释

3. JavaScript  调试办法

a.alert进行调试
b.使用firefox
c.console.log() ,console.log() 只会把信息输出在console里,而不会影响用户的使用

4.基本数据类型

undefine,Boolean,Number,String,null
undefine 声明了但未赋值
Boolean 布尔,Boolean变量有两种值,分别是true或者false
Number 数字,javascript中的Number可以表示十进制,八进制,十六进制整数,浮点数,科学技术法
String         字符串,单引号和双引号,都用来表示字符串。
var         动态类型,变量的类型是动态的,当值是整数的时候,就是Number类型,当值是字符串的时候,就是String类型 
typeof         变量类型判断,使用typeof来进行判断数据类型,正是因为变量是动态类型的,所以无法确定当前到底是哪种类型,这个时候,就可以使用typeof来进行判断 
null         空对象/对象不存在 ,null表示一个对象不存在

5.伪对象概念:

javascript是一门很有意思的语言,即便是基本类型,也是伪对象,所以他们都有属性和方法。

6.无论是Number,Boolean还是String都有一个toString方法,用于转换为字符串

数字转字符串 :
Number转换为字符串的时候有默认模式和基模式两种 a.toString() //默认模式,即十进制
a.toString(2) //基模式,二进制
a.toString(8) //基模式,八进制
a.toString(16) //基模式,十六进制 String()和toString()的区别:
String()和toString()一样都会返回字符串,区别在于对null的处理
String()会返回字符串"null" 把空对象转换为字符串:null toString() 就会报错,无法执行 null.toString() / toString(null) 就会报错,所以后面的代码不能执行

7.转换为数字

javascript分别提供内置函数 parseInt()和parseFloat(),转换为数字
如果被转换的字符串,同时又数字和字符构成,那么"parseInt"会一直定位数字,直到出现非字符。 "10abc" 会被转换为 10,因为abc不是数字
"10abc8" 会被转换为 10 //判断每一位,直到发现不是数字的那一位
"hello javascript"转换为:NaN

8.转换为Boolean

当转换字符串时:非空即为true

Boolean("")//空字符串,转换为布尔后的值:false
Boolean("hello javascript")//非空字符串,转换为布尔后的值:true 当转换数字时:非0即为true Boolean(0)//0,转换为布尔后的值:false
Boolean(3.14)//非0,转换为布尔后的值:true 当转换对象时:非null即为true Boolean(null)//空对象 null 转换为布尔后的值:false
Boolean(new Object() )//对象存在,非空对象 new Object() 转换为布尔后的值:true

9.基本算数运算符:+ - * / %(取余数)

10%3=1

10.自增,自减运算符

自增++在原来的基础上 ,增加 1.
需要注意的是
如果 ++放在 前面 ,就是 先运算,后取值 。
如果 ++放在 后面 ,就是 先取值,后运算。
自减 -- 是一个道理。 var a = 5;
a++; //先取值,再运算(先取值 ,即5)
++a; //先运算,再取值(5+1=6,取值6)
a--; //先取值,再运算(先取值 ,即5)
--a; //先运算,再取值(5-1=4,取值4)

11.赋值运算符

=,+=,-=,*=,/=,%=
x=5 是 最基本的赋值运算符,即把右边的值,赋给左边的变量x。 += x+=y, 表示 x=x+y x+=6 //x=x+6 -= x-=6 //x=x-6 *= x*=6 //x=x*6 /= x/=6 //x=x/6 %= x%=6 //x=x%6

12.+运算符的多态

+ 具备多态特征
当两边都是数字的时候 ,表现为算数运算符
当任意一边是字符串的时候,表现为字符串连接符 1+2=3 //两边都是数字,算数运算符
1+"2"=12 //"2"是字符串,字符串连接符

13.基本逻辑运算符:

==,!=,>,>= 

14.绝对等,绝对不等于

与==进行值是否相等的判断不同 ,绝对等 ===还会进行 类型的判断
比如 数字1和 字符串'1'比较,值是相等的,但是类型不同
所以=会返回true,但是===会返回false
绝对不等于!=== 与上是一个道理 1=='1': true
1==='1': false

15.三相运算符 (?:)

有三个操作数
如果第一个返回true,就返回第二个操作符
否则就返回第三个操作符。 var age=15;
age<18 ? "Yes" : "No"

16.条件语句

if...else...
if条件一定是一个Boolean类型的值,条件成立时执行
else表示当条件不成立时执行的代码 else if(多条件判断 )
if(age<18){ }
else if(age<22){ }
else{ } switch (多条件判断)
switch 语句与else if一样,也是进行多条件判断的
需要注意的是,每个判断结束,都要加上break; var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
switch (day)
{
case 0:
today="星期天";
break;
case 1:
today="星期一";
break;
......
}

17. 循环语句

常用的循环语句有: for, while, do-while, for-each都是用于在满足条件的前提下,重复执行代码用的

for循环
for(var i=0;i<5;i++){
p(i);
} while循环
var i = 0;
while(i<5){
p(i);
i++;
} do-while循环
do{
p(i);
i++;
} while(i<5); forEach是增强的for循环,主要用于遍历数组。
continue 表示放弃本次循环,进行下一次循环 for(i=0;i<5;i++){
if(i==3)
continue;
p(i);
} break表示终止循环,循环体结束 for(i=0;i<5;i++){
if(i==3)
break;
p(i);
}

18.错误处理

JavaScript提供了一种try catch的错误处理机制,当有错误抛出的时候,可以catch住。
调用不存在的函数
try{
document.write("试图调用不存在的函数f2()<br>");
f2(); //调用不存在的函数f2();
}
catch(err){
document.write("捕捉到错误产生:");
document.write(err.message);
}

19. javascript 数字对象

JavaScript中的对象是有着属性和方法的一种特殊数据类型。
常见的对象有数字Number,字符串String,日期Date,数组Array等。 创建一个数字对象 :可以通过new Number()创建一个数字对象
与基本类型的数字不同,对象类型的数字,拥有更多的属性和方法 var x = new Number(123);
document.write('数字对象x的类型:'+typeof x); //通过typeof 获知这是一个object
var y = 123;
document.write('基本类型y的类型:'+typeof y); //通过typeof 获知这是一个number Number对象能够取到的最大( Number.MAX_VALUE 最大值)和最小 ( Number.MIN_VALUE 最小值)边界 NaN(Not a Number),表示不是一个数字
当通过非数字创建Number的时候,就会得到NaN.
注意: 不能通过 是否等于Number.NaN来判断 是否 “不是一个数字”,应该使用函数 isNaN() <script>
function p(s){
document.write(s);
document.write("<br>");
}
var a = new Number("123abc"); //通过非数字创建Number对象,得到的是一个NaN
p('通过非数字字符串"123abc"创建出来的Number对象 a的值是:'+a);
p('但是, a==Number.NaN会返回:'+(a==Number.NaN)); //即便是一个NaN 也"不等于" Number.NaN
p('正确判断是否是NaN的方式是调用isNaN函数:'+isNaN(a)); //正确的方式是通过isNaN() 函数进行判断
</script> toFixed返回一个数字的小数表达 var b = new Number("3.1415926");
b.toFixed(3);//保留三位小数点 返回一个Number对象的科学计数法表达 var a = new Number("123");
a.toExponential ();//数字对象123通过toExponential 返回计数法表达 1.23e+2 返回一个数字对象的基本数字类型
方法 valueOf() 返回一个基本类型的数字 <script>
//通过typeof 判断数据类型可以发现,一种是object,一种是number
function p(s){
document.write(s);
document.write("<br>");
}
var a = new Number("123");
var b = a.valueOf();
p('数字对象a的类型是: '+typeof a); //返回object
p('通过valueOf()返回的值的类型是'+typeof b); //返回number
</script>

20.字符串对象

可以通过new String()创建一个String对象

属性 length 返回字符串的长度

var y = new String("Hello JavaScrpt");
document.write("通过.length属性获取字符串'Hellow JavaScript'的长度"+y.length); charAt 返回指定位置的字符
charCodeAt 返回指定位置的字符对应的Unicode码 y.charAt(0); //返回H
y.charCodeAt(0); //返回H对应的Unicode码 72 concat用于进行字符串拼接 var x = new String("Hello ");
var y = new String("Javascript");
document.write( '通过函数concat()把x和y连接起来: ' + x.concat(y) ); indexOf 返回子字符串第一次出现的位置
lastIndexOf 返回子字符串最后一次出现的位置 y.indexOf ("a");
y.lastIndexOf ("a"); 比较两段字符串是否相同 :localeCompare 比较两段字符串是否相同,0即表示相同,非0表示不同 x.localeCompare(y); substring 截取一段子字符串 x.substring (0,3); //左闭右开,取得到0,取不到3 split 根据分隔符,把字符串转换为数组。 var x = new String("Hello This Is JavaScript");
var y = x.split(" "); //通过空格分隔split(" "),得到数组y(Hello,This,Is,JavaScript)
var z = x.split(" ",2); //通过空格分隔split(" ",2),得到数组,并且只保留前两个Hello,This
注: 第二个参数可选,表示返回数组得长度 replace(search,replacement)
找到满足条件的子字符串search,替换为replacement var x = new String("Hello JavaScript");
var y = x.replace("a","o"); //把x字符串里的第一个"a"替换成"o" 注: 默认情况下只替换找到的第一个子字符串,如果要所有都替换,需要写成:
x.replace(/a/g, "o");
或者
var regS = new RegExp("a","g");
x.replace(regS, "o"); var x = new String("Hello JavaScript");
var regS = new RegExp("a","g");
var z = x.replace(regS, "o"); //把x字符串里所有的"a"替换成"o"
或者
x.replace(/a/g, "o"); //把x字符串里所有的"a"替换成"o" 所有返回字符串类型的方法,返回的都是基本类型的String

21.创建数组对象

创建数组对象的3种方式:
1. new Array() 创建长度是0的数组
2. new Array(5); 创建长度是5的数组,,但是其每一个元素都是undefine
3. new Array(3,1,4,1,5,9,2,6); 根据参数创建数组

22.属性length 获取一个数组的长度

var x = new Array(3,1,4,1,5,9,2,6); //根据参数创建数组
document.write("通过.length获取当前数组的长度:"+x.length');

23.遍历一个数组

遍历有两种方式
1.结合for循环,通过下标遍历
var x=new Array(3,1,4);
for(i=0;i<x.length;i++)
{
document.write("使用普通的for循环遍历数组:"+x[i]+"\<br/>");
}
2.使用增强for in循环遍历
需要注意的是,在增强for in中,i是下标的意思。
for(i in x)
{ //for in 循环
p(x[i]);
}
var x=new Array(3,1,4);
for(i in x){ //for in 循环
document.write("使用增强for循环遍历数组"+x[i]+"\<br/>"); //.使用增强for in循环遍历
}

24.方法 concat 连接两个数组

var x = new Array(3,1,4);
var y = new Array(1,5,9,2,6);
var z = x.concat(y);
document.write("使用concat连接数组x和y,数组z是:"+z);

25.方法 join 通过指定"分隔符",返回一个数组的字符串表达

var x = new Array(3,1,4);    //x的类型是object
var y = x.join();
//join返回一个数组的字符串表达,其类型是 :string
document.write("y = x.join() 得到的是数组x的字符串表达,其值是"+y+" 其类型是 :"+(typeof y)+"\<br/>");
var z = x.join("@"); //指定"分隔符"为"@" ,而不是默认的","
document.write("z = x.join(\"@\");是x的字符串表达,不过分隔符不是默认的\",\" 而是\"@\" : "+z);

26. 分别在"最后的位置"插入数据和获取数据(获取后删除,就像先入后出的栈一样

方法push在最后的位置插入数据

var x = new Array(3,1,4);
x.push(5); //插入数据"5"
document.write("向x中push 5,得到:"+ x); //得到:3,1,4,5 方法pop在最后的位置获取数据(获取后删除) var x = new Array(3,1,4);
var e = x.pop();
document.write("从x中pop一个值出来,其值是:"+ e); //方法pop获取数据,获取后删除数据的最后一个
document.write("<br/>");
document.write("pop之后,x数组的值是:"+ x); //x数组的值3,1

27.分别在"最开始的位置"插入数据和获取数据(获取后删除)

方法unshift在最开始的位置插入数据

var x = new Array(3,1,4);
x.unshift(5);
document.write("对数组 unshift 值5(在最前面加),数组变为:"+ x); //数组变为5,3,1,4 方法shift在最开始的位置获取数据(获取后删除) var x = new Array(3,1,4);
var e = x.shift ();
document.write("从数组中 shift 一个数(从最前面取),其值是:"+ e); //即3
document.write("<br>");
document.write("shift之后,数组变为:"+x); //数组变为1,4

28.方法 sort对数组的内容进行排序

var x = new Array(3,1,4,1,5,9,2,6);
x.sort();
document.write("使用sort排序后的数组x是:"+x); //数组x是:1,1,2,3,4,5,6,9

29.自定义排序算法

sort()默认采用正排序,即小的数排在前面。 如果需要采用自定义排序的算法,就把比较器函数作为参数传递给sort()。
比较器函数:
function comparator(v1,v2){
return v2-v1; //v2-v1表示大的放前面,小的放后面
}
调用sort函数的时候,把这个比较器函数comparator作为参数传递进去即可 function comparator(v1,v2){
return v2-v1;
}
var x = new Array(3,1,4,1,5,9,2,6);
x.sort(comparator);
document.write("使用sort 进行自定义倒排序后的数组x是:"+x); //进行自定义倒排序后的数组x是:9,6,5,4,3,2,1,1 自定义一个函数,对数组进行排序,要求排序后数组中无重复数据
function check(value,a){//检查数组里是否有相同的值
for(i in a){
if(value==a[i])
return true;
}
return false;
}
function removeDuplicate(a){//移除相同的值
var result =new Array(); //新建一个数组result
while(a.length!=0){//当数组里有相同的值时,删除它后一个相同的值
var v = a.pop();
console.log(v); //web控制台输出v
if( !check(v,a) ){ //当数组里没有相同的值时(即check()如果返回false),!号就是"取非"
result.push(v); //往数组result最后的位置插入数据
}
}
return result;
}
var x = new Array(1,3,4,5,7,7,4,5,6,7,7);
x = removeDuplicate(x);
x.sort();
document.write("使用sort排序后的无重复数据的数组x是:"+x); //得到无重复数据的数组x是:1,3,4,5,6,7

30.方法 reverse,对数组的内容进行反转

var x = new Array(3,1,4,1,5,9,2,6);
x.reverse();
document.write("使用reverse()函数进行反转后的值是:"+x); //函数进行反转后的值是:6,2,9,5,1,4,1,3

31.方法 slice 获取子数组

var x = new Array(3,1,4,1,5,9,2,6);
var y = x.slice(1);
document.write("x.slice(1)获取的子数组是:"+y); //1,4,1,5,9,2,6即数组位置为1后面的所有数包括位置1
document.write("<br>");
var z = x.slice(1,3);
document.write("x.slice(1,3)获取的子数组是:"+z); //获取的子数组是:1,4
//注意:第二个参数取不到(即取得到数组位置为1至数组位置为3之间的数但不包括位置3)

32.方法 splice (不是 slice) 用于删除数组中的元素,奇葩的是 ,它还能用于向数组中插入元素

var x = new Array(3,1,4,1,5,9,2,6);
x.splice (3,2);//从位置3开始 ,删除2个元素
document.write("x.splice (3,2) 表示从位置3开始 ,删除2个元素:"+x); //得到3,1,4,9,2,6
document.write("<br/>");
x.splice(3,0,1,5); //从位置3开始,删除0个元素,但是插入1和5
document.write("x.splice(3,0,1,5) 从位置3开始,删除0个元素,但是插入1和5,最后得到:"+x); //得到3,1,4,1,5,9,2,6

33.通过new Date创建一个日期对象,这个对象就表示当前日期(现在)

var d = new Date();
document.write('new Date():'+d);

34.分别获取年/月/日,需要注意的是,getMonth()返回的月数,是基零的,0代表1月份

  var d = new Date();
document.write('分别获取年月日: ');
document.write(d.getFullYear()); //获取年份
document.write("/");
document.write(d.getMonth()+1); //获取月份
document.write("/");
document.write(d.getDate()); //获取日

35.获取时:分:秒:毫秒

 var d = new Date();
document.write("分别获取时:分:秒:毫秒 ");
document.write(d.getHours()); //时
document.write(":");
document.write(d.getMinutes()); //分
document.write(":");
document.write(d.getSeconds()); //秒
document.write(":");
document.write(d.getMilliseconds()); //毫秒

36.通过getDay()获取,今天是本周的第几天,与getMonth()一样,返回值是基0的。

var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
var weeks = new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
document.write("今天是 : "+weeks[day]);

37.获取从1970/1/1 08:00:00 至今的毫秒数

var time = new Date().getTime();
document.write("从1970/1/1 08:00:00 到今天的毫秒数: "+ time);

38.修改日期和时间

var d=new Date();  //当前日期
d.setFullYear(2012); //修改年份
d.setMonth(11); //月份时基0的,所以11表示12月
d.setDate(12); //日
d.setHours(0); //时
d.setMinutes(0); //分
d.setSeconds(0); //秒
document.write(d); //把日期对象设置为2012/12/12 00:00:00

39.javascript Math对象详解

a. 自然对数和圆周率
属性E和PI,分别表示自然对数和圆周率PI document.write(Math.E);
document.write("<br>");
document.write(Math.PI); b.方法 abs 取绝对值 document.write(Math.abs(-1)); c.方法 min和max 分别取最小值,最大值 document.write(Math.min(1,100));
document.write("<br>");
document.write(Math.max(1,100)); d.方法 pow 求一个数的n次方 (求幂 ) document.write(Math.pow(3,3)); //3的立方,即27 e.方法 round,小数四舍五入取整 document.write(Math.round(3.4));
document.write("<br>");
document.write(Math.round(3.5)); f.方法 random 取0-1之间的随机数 document.write(Math.random()); //0-1 之间的随机数
document.write(Math.round(Math.random() *5)+5 ); //5-10之间的随机整数,(0~1)*5=0~5,(0~5)+5=5~10
取十个 5-10 之间的随机数
for(i=0;i<10;i++){
document.write(Math.round(Math.random() *5)+5 ); //5-10之间的随机整数
}

40.javascript 设计自定义对象

a.通过new Object()创建一个对象
var hero = new Object();
hero.name = "盖伦"; //定义一个属性name,并且赋值
hero.kill = new function(){
document.write(hero.name + " 正在杀敌" ); //定义一个函数kill
}
hero.kill(); //调用函数kill b.通过function设计一个对象
通过new Object创建对象有个问题,就是每创建一个对象,都得重新定义属性和函数。这样代码的重用性不好
那么,才用另一种方式,通过function设计一种对象。 然后实例化它 。
这种思路很像Java里的设计一种类,但是 javascript没有类,只有对象,所以我们叫设计一种对象 function Hero(name){
this.name = name;
this.kill = function(){
document.write(this.name + "正在杀敌<br>");
}
}
var gareen = new Hero("盖伦");
gareen.kill();
var teemo = new Hero("提莫");
teemo.kill(); c.为已经存在的对象,增加新的方法
对设计好的Hero对象追加一个新的方法keng(),需要通过prototype实现这一点 function Hero(name){
this.name = name;
this.kill = function(){
document.write(this.name + "正在杀敌<br>");
}
}
var gareen = new Hero("盖伦");
gareen.kill();
var teemo = new Hero("提莫");
teemo.kill();
Hero.prototype.keng = function(){
document.write(this.name + "正在坑队友<br>");
}
gareen.keng();
teemo.keng();

41.BOM即 浏览器对象模型(Brower Object Model)

浏览器对象包括:
Window(窗口)
Navigator(浏览器)
Screen (客户端屏幕)
History(访问历史)
Location(浏览器地址)

42.Window对象

a.获取文档显示区域的高度和宽度
一旦页面加载,就会自动创建window对象,所以无需手动创建window对象。
通过window对象可以获取文档显示区域的高度和宽度 document.write("文档显示区域的宽度"+window.innerWidth);
document.write("<br>");
document.write("文档显示区域的高度"+window.innerHeight); b.获取外部窗体的宽度和高度
所谓的外部窗体即浏览器,可能用的是360,火狐,IE, Chrome等等。
document.write("浏览器的宽度:"+window.outerWidth);
document.write("<br>");
document.write("浏览器的高度:"+window.outerHeight); c.打开一个新的窗口
碰到一些网站会自动打开另一个网站,那么是怎么做到的呢?
就是通过window的open方法做到的
但不建议使用,如果需要打开一个新的网站,应该通过超级链接等方式让用户主动打开,在没有告知用户的前提下就打开一个新的网站会影响用户的体验
<script>
function openNewWindow(){
myWindow=window.open("/");
}
</script>
<button onclick="openNewWindow()">打开一个新的窗口</button>

43.Navigator对象(即浏览器对象,提供浏览器相关的信息 )

打印浏览器相关信息 

document.write("<p>浏览器产品名称:");
document.write(navigator.appName + "</p>"); document.write("<p>浏览器版本号:");
document.write(navigator.appVersion + "</p>"); document.write("<p>浏览器内部代码:");
document.write(navigator.appCodeName + "</p>"); document.write("<p>操作系统:");
document.write(navigator.platform + "</p>"); document.write("<p>是否启用Cookies:");
document.write(navigator.cookieEnabled + "</p>"); document.write("<p>浏览器的用户代理报头:");
document.write(navigator.userAgent + "</p>");

44.Screen对象(表示用户的屏幕相关信息 )

返回用户的屏幕大小,以及可用屏幕大小
如果是在台式电脑上,通常看到的可用区域的高度会比屏幕高度小一点,因为有任务栏的存在。
document.write("用户的屏幕分辨率: ")
document.write(screen.width + "*" + screen.height);
document.write("<br />");
document.write("可用区域大小: ");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("<br />");

45.History对象(用于记录访问历史 )

a.返回"上一次"的访问
function goBack()
{
history.back();
} b.返回"上上次"的访问
function goBack()
{
history.go(-2); //-1表示上次,-2表示上上次,以次类推
}

46. Location对象(表示浏览器中的地址栏 )

a.reload方法刷新当前页面
<span>当前时间:</span>
<script>
var d = new Date();
document.write(d.getHours());
document.write(":");
document.write(d.getMinutes());
document.write(":");
document.write(d.getSeconds());
document.write(":");
document.write(d.getMilliseconds()); function refresh(){
location.reload(); //刷新当前页面
}
</script>
<br>
<button onclick="refresh()">刷新当前页面</button> b.跳转到另一个页面
<script>
function jump(){
//方法1
//location="/"; //方法2
location.assign("/"); }
</script>
<br>
<button onclick="jump()">跳转到首页</button> c.Location的其他属性
document.write("协议 location.protocol:"+location.protocol);
document.write("主机名 location.hostname:"+location.hostname);
document.write("端口号 (默认是80,没有即表示80端口)location.port:"+location.port);
document.write("主机加端口号 location.host:"+location.host);
document.write("访问的路径 location.pathname:"+location.pathname);
document.write("锚点 location.hash:"+location.hash);
document.write("参数列表 location.search"+location.search);

47.javascript 弹出框

浏览器上常见的弹出框有
警告框,确认框,提示框 这些都是通过调用window的方法实现的。
比如警告框用的是window.alert("警告内容"),因为很常用,所以就把window省略掉,直接使用alert
a.警告框
警告框 alert,常用于消息提示,比如注册成功等等
function register(){
alert("注册成功");
} b.确认框
确认框 confirm,常用于危险性操作的确认提示。 比如删除一条记录的时候,弹出确认框
conform返回基本类型的Boolean true或者false
function del(){
var d = confirm("是否要删除");
alert(typeof d + " " + d);
} c. 输入框
输入框 prompt,用于弹出一个输入框,供用户输入相关信息。 因为弹出的界面并不好看,很有可能和网站的风格不一致,所以很少会在实际工作中用到。
function p(){
var name = prompt("请输入用户名:");
alert("您输入的用户名是:" + name);
}

48. javascript 计时器

a.计时器只执行一次
函数setTimeout(functionname, 距离开始时间毫秒数 );
通过setTimeout在制定的毫秒数时间后,执行一次 函数functionname <script>
function printTime(){ //打印当前时间
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s; //document.getElementById 获取id=time的div元素 ,.innerHTML 修改该元素的内容
}
function showTimeIn3Seconds(){//在3秒钟后,打印当前时间并且只显示一次
setTimeout(printTime,3000);
}
</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间,并且只显示一次</button> b. 计时器不停地重复执行
函数setInterval(函数名, 重复执行的时间间隔毫秒数 );
通过setInterval重复执行同一个函数,重复的时间间隔由第二个参数指定 <p>每隔1秒钟,打印当前时间</p>
<div id="time"></div>
<script>
function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s; }
var t = setInterval(printTime,1000);
</script> c.终止重复执行
通过clearInterval终止一个不断重复的任务
当秒是5的倍数的时候,就停止执行
<p>每隔1秒钟,打印当前时间</p>
<div id="time"></div>
<script>
var t = setInterval(printTime,1000);
function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;
if(s%5==0)
clearInterval(t);
}
</script> d. 不要在setInterval调用的函数中使用document.write();
注:部分浏览器,比如firefox有这个问题,其他浏览器没这个问题。
假设setInterval调用的函数是printTime, 在printTime中调用document.write(); 只能看到一次打印时间的效果。
这是因为document.write,会创建一个新的文档,而新的文档里,只有打印出来的时间字符串,并没有setInterval这些javascript调用,所以只会看到执行一次的效果。 <p>每隔1秒钟,通过document.write打印当前时间</p>
<script>
function printTime(){
var d = new Date();
document.write(d.getHours());
document.write(":");
document.write(d.getMinutes());
document.write(":");
document.write(d.getSeconds());
document.close();
}
var t = setInterval(printTime,1000);
</script>

本文转载于:

https://www.cnblogs.com/weiwei15026906443/p/6227726.html

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录-JS 基础知识大全的更多相关文章

  1. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  2. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  3. Node.js基础知识

    Node.js入门   Node.js     Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...

  4. 网站开发进阶(十五)JS基础知识充电站

    JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...

  5. NodeJs>------->>第三章:Node.js基础知识

    第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info  方法 console.log(" node app1.js 1> ...

  6. JS基础知识笔记

    2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...

  7. python核心编程学习记录之基础知识

    虽然对python的基础知识有所了解,但是为了更深入的学习,要对python的各种经典书籍进行学习 第一章介绍python的优缺点,略过 第二章介绍python起步,第三章介绍python基础,仅记录 ...

  8. mysql基础知识大全

    前言:本文主要为mysql基础知识的大总结,mysql的基础知识很多,这里作简单概括性的介绍,具体的细节还是需要自行搜索.当然本文还有很多遗漏的地方,后续会慢慢补充完善. 数据库和数据库软件 数据库是 ...

  9. 【值得收藏】C语言入门基础知识大全!从C语言程序结构到删库跑路!

    01 C语言程序的结构认识 用一个简单的c程序例子,介绍c语言的基本构成.格式.以及良好的书写风格,使小伙伴对c语言有个初步认识. 例1:计算两个整数之和的c程序: #include main() { ...

  10. js基础知识--BOM

    之前说过,在js的 运行环境为浏览器时,js就主要有三部分组成: ECMAScript核心语法.BOM.DOM.今天就和大家详细说一下BOM的一些基础知识. BOM BOM通常被称为浏览器对象模型,主 ...

随机推荐

  1. NC14352 旅行

    题目链接 题目 题目描述 小z放假了,准备到R城市旅行,其中这个城市有N个旅游景点.小z时间有限,只能在三个旅行景点进行游玩.小明租了辆车,司机很善良,说咱不计路程,只要你一次性缴费足够,我就带你走遍 ...

  2. NVME(学习笔记二)—CMB

    什么是CMB 在NVMe Express 1.2 Spec中开始支持一个特性,那就是CMB(Controller Memory Buffer),是指SSD控制器内部的读写存储缓冲区,与HMB(Host ...

  3. java 从零开始手写 redis(11)clock时钟淘汰算法详解及实现

    前言 java从零手写实现redis(一)如何实现固定大小的缓存? java从零手写实现redis(三)redis expire 过期原理 java从零手写实现redis(三)内存数据如何重启不丢失? ...

  4. OpenWrt的dnsmasq, ipset和iptables配置

    说明 这篇文章主要用于介绍在运行OpenWrt的MT7621系列路由器上, 如果安装v2rxy并开启自动出园功能. 这里介绍的是最佳实践, 不同于常见的代理方法. 通过ipset和iptables配合 ...

  5. 【Unity3D】动态路障导航

    1 NavMeshObstacle组件 ​ 导航系统.分离路面导航中路障都是静态的,程序运行过程中烘焙的导航网格一直不变,本文将进一步讲解动态路障场景下导航的实现. ​ 对于动态路障游戏对象,除了要设 ...

  6. eclipse项目右击找不到build path

    右击项目–>properties–>Project Facets–>勾选右侧的Java,然后保存. 此时再操作就有了.

  7. 图文并茂之AES加密

    本文改编自:http://www.sohu.com/a/198681357_505794 假设有一个发送方在向接收方发送消息.如果没有任何加密算法,接收方发送的是一个明文消息:"我是小灰&q ...

  8. 【Docker】使用 Docker 部署 .Net Core 项目 (四)

    系列目录: [Docker] CentOS7 安装 Docker 及其使用方法 ( 一 ) [Docker] 使用Docker 在阿里云 Centos7 部署 MySQL 和 Redis (二) [D ...

  9. VUE 腾讯云 web端上传视频SDK 上传进度无法显示

    上传视频官方文档:https://cloud.tencent.com/document/product/266/9239 错误信息 在本地调试可以显示视频上传进度,也可以打印到浏览器控制台.但是,发布 ...

  10. 《HelloGitHub》第 95 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...