JavaScript
索引
javascript是运行在浏览器端的脚步语言,javascript主要解决的是前端与用户交互的问题,包括使用交互与数据交互。 javascript是浏览器解释执行的,前端脚本语言还有jscript(微软,ie独有),actionscript( adobe公司,需要插件)等。
前端三大块
1、html:页面结构
2、css:页面表现:元素大小、颜色、位置、隐藏或显示、部分动画效果
3、javascript:页面行为:部分动画效果、页面与用户的交互、页面功能
1、行间事件(主要用于事件)
<input type="button" name="" onclick="alert('ok!');">
2、页面script标签嵌入
<script type="text/javascript"> alert('ok!'); </script>
3、外部引入
<script type="text/javascript" src="js/index.js"></script>
3.变量
javascript 是一种弱类型语言,javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var'
var inum = 123; var str = 'asd'; //同时定义多个变量可以用","隔开,公用一个‘var’关键字 var inum = 45,str='qwe',scount='68';
变量类型
5种基本数据类型:
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型,变量声明未初始化,它的值就是undefined
5、null null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为null,在页面上获取不到对象,返回的值就是null
1种复合类型:
object
javascript语句与注释
1、一条javascript语句应该以“;”结尾
<script type="text/javascript"> var inum = 123; var str = 'abc123'; function fnalert(){ alert(str); }; fnalert(); </script>
2、javascript注释
<script type="text/javascript"> // 单行注释 var inum = 123; /* 多行注释 1、... 2、... */ var str = 'abc123'; </script>
变量、函数、属性、函数参数命名规范
1、区分大小写
2、第一个字符必须是字母、下划线(_)或者美元符号($)
3、其他字符可以是字母、下划线、美元符或数字
匈牙利命名风格:
对象o object 比如:odiv
数组a array 比如:aitems
字符串s string 比如:susername
整数i integer 比如:iitemcount
布尔值b boolean 比如:biscomplete
浮点数f float 比如:fprice
函数fn function 比如:fnhandler
正则表达式re regexp 比如:reemailcheck
4.获取元素方法一
可以使用内置对象document上的getelementbyid方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如:
<script type="text/javascript"> var odiv = document.getelementbyid('div1'); </script> .... <div id="div1">这是一个div元素</div>
上面的语句,如果把javascript写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript去页面上获取元素div1的时候,元素div1还没有加载,解决方法有两种:
第一种方法:将javascript放到页面最下边
.... <div id="div1">这是一个div元素</div> .... <script type="text/javascript"> var odiv = document.getelementbyid('div1'); </script> </body>
第二种方法:将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行,就不会出错了。
<script type="text/javascript"> window.onload = function(){ var odiv = document.getelementbyid('div1'); } </script> .... <div id="div1">这是一个div元素</div>
5.操作元素属性
获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。
操作属性的方法
1、“.” 操作
2、“[ ]”操作
属性写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “classname”
3、“style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontsize”
通过“.”操作属性:
<script type="text/javascript"> window.onload = function(){ var oinput = document.getelementbyid('input1'); var oa = document.getelementbyid('link1'); // 读取属性值 var svalue = oinput.value; var stype = oinput.type; var sname = oinput.name; var slinks = oa.href; // 写(设置)属性 oa.style.color = 'red'; oa.style.fontsize = svalue; } </script> ...... <input type="text" name="setsize" id="input1" value="20px"> <a href="http://www.163.com" id="link1">网易</a>
通过“[ ]”操作属性:
<script type="text/javascript"> window.onload = function(){ var oinput1 = document.getelementbyid('input1'); var oinput2 = document.getelementbyid('input2'); var oa = document.getelementbyid('link1'); // 读取属性 var sval1 = oinput1.value; var sval2 = oinput2.value; // 写(设置)属性 // oa.style.val1 = val2; 没反应 oa.style[sval1] = sval2; } </script> ...... <input type="text" name="setattr" id="input1" value="fontsize"> <input type="text" name="setnum" id="input2" value="30px"> <a href="http://www.163.com" id="link1">网易</a>
innerhtml
innerhtml可以读取或者写入标签包裹的内容
<script type="text/javascript"> window.onload = function(){ var odiv = document.getelementbyid('div1'); //读取 var stxt = odiv.innerhtml; alert(stxt); //写入 odiv.innerhtml = '<a href="http://www.163.com">网易<a/>'; } </script> ...... <div id="div1">这是一个div元素</div>
6.函数
函数就是重复执行的代码片。
函数定义与执行
<script type="text/javascript"> // 函数定义 function fnalert(){ alert('hello!'); } // 函数执行 fnalert(); </script>
变量与函数预解析
javascript解析过程分为两个阶段,先是编译阶段,然后执行阶段,在编译阶段会将function定义的函数提前,并且将var定义的变量声明提前,将它赋值为undefined。
<script type="text/javascript"> fnalert(); // 弹出 hello! alert(inum); // 弹出 undefined function fnalert(){ alert('hello!'); } var inum = 123; </script>
提取行间事件
在html行间调用的事件可以提取到javascript中调用,从而做到结构与行为分离。
<!--行间事件调用函数 --> <script type="text/javascript"> function fnalert(){ alert('ok!'); } </script> ...... <input type="button" name="" value="弹出" onclick="fnalert()"> <!-- 提取行间事件 --> <script type="text/javascript"> window.onload = function(){ var obtn = document.getelementbyid('btn1'); obtn.onclick = fnalert; function fnalert(){ alert('ok!'); } } </script> ...... <input type="button" name="" value="弹出" id="btn1">
匿名函数
定义的函数可以不给名称,这个叫做匿名函数,可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
<script type="text/javascript"> window.onload = function(){ var obtn = document.getelementbyid('btn1'); /* obtn.onclick = myalert; function myalert(){ alert('ok!'); } */ // 直接将匿名函数赋值给绑定的事件 obtn.onclick = function (){ alert('ok!'); } } </script>
例子:网页换肤
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <link rel="stylesheet" type="text/css" href="css/skin01.css" id="link01"> <script type="text/javascript"> window.onload = function(){ var obtn01 = document.getelementbyid('btn01'); var obtn02 = document.getelementbyid('btn02'); var olink = document.getelementbyid('link01'); obtn01.onclick = function(){ olink.href = "css/skin01.css"; } obtn02.onclick = function(){ olink.href = "css/skin02.css"; } } </script> </head> <body> <input type="button" name="" value="皮肤一" id="btn01"> <input type="button" name="" value="皮肤二" id="btn02"> </body> </html>
函数传参
<script type="text/javascript"> function fnalert(a){ alert(a); } fnalert(12345); </script>
函数'return'关键字
函数中'return'关键字的作用:
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为
<script type="text/javascript"> function fnadd(inum01,inum02){ var irs = inum01 + inum02; return irs; alert('here!'); } var icount = fnadd(3,4); alert(icount); //弹出7 </script>
7.条件语句
通过条件来控制程序的走向,就需要用到条件语句。
运算符
1、算术运算符: +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符:=、 +=、 -=、 *=、 /=、 %=
3、条件运算符:==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
if else
var inum01 = 3; var inum02 = 5; var str; if(inum01>inum02){ str = '大于'; } else { str = '小于'; } alert(str);
例子:制作单个按钮点击切换元素的显示和隐藏效果
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript"> window.onload = function(){ var obtn = document.getelementbyid('btn01'); var odiv = document.getelementbyid('box01'); // odiv.style.display 是读取的标签里写的display属性值,如果没有写,这个值为空 obtn.onclick = function(){ if(odiv.style.display=='block'||odiv.style.display=='') { odiv.style.display = 'none'; } else { odiv.style.display = 'block'; } } } </script> <style type="text/css"> .box{ width:200px; height:400px; background-color:gold; } </style> </head> <body> <input type="button" name="" value="切换" id="btn01"> <div class="box" id="box01"></div> </body> </html>
多重if else语句
var inow = 1; if(inow==1) { ... ; } else if(inow==2) { ... ; } else { ... ; }
switch语句
多重if else语句可以换成性能更高的switch语句
var inow = 1; switch (inow){ case 1: ...; break; case 2: ...; break; default: ...; }
例子:制作随着星期换背景的页面
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript"> window.onload = function(){ var iweek = 2; var obody = document.getelementbyid('body01'); if(iweek==1){ obody.style.backgroundcolor = 'gold'; } else if(iweek==2) { obody.style.backgroundcolor = 'green'; } else if(iweek==3){ obody.style.backgroundcolor = 'pink'; } else if(iweek==4){ obody.style.backgroundcolor = 'yellowgreen'; } else if(iweek==5){ obody.style.backgroundcolor = 'lightblue'; } else{ obody.style.backgroundcolor = 'lightgreen'; } } </script> </head> <body id="body01"> </body> </html>
8.数组及操作方法
数组就是一组数据的集合,javascript中,数组里面的数据可以是不同类型的。
定义数组的方法
//对象的实例创建 var alist = new array(1,2,3); //直接量创建 var alist2 = [1,2,3,'asd'];
操作数组中数据的方法
1、获取数组的长度:alist.length;
var alist = [1,2,3,4]; alert(alist.length); // 弹出4
2、用下标操作数组的某个数据:alist[0];
var alist = [1,2,3,4]; alert(alist[0]); // 弹出1
3、join() 将数组成员通过一个分隔符合并成字符串
var alist = [1,2,3,4]; alert(alist.join('-')); // 弹出 1-2-3-4
4、push() 和 pop() 从数组最后增加成员或删除成员
var alist = [1,2,3,4]; alist.push(5); alert(alist); //弹出1,2,3,4,5 alist.pop(); alert(alist); // 弹出1,2,3,4
5、unshift()和 shift() 从数组前面增加成员或删除成员
var alist = [1,2,3,4]; alist.unshift(5); alert(alist); //弹出5,1,2,3,4 alist.shift(); alert(alist); // 弹出1,2,3,4
6、reverse() 将数组反转
var alist = [1,2,3,4]; alist.reverse(); alert(alist); // 弹出4,3,2,1
7、indexof() 返回数组中元素第一次出现的索引值
var alist = [1,2,3,4,1,3,4]; alert(alist.indexof(1));
8、splice() 在数组中增加或删除成员
var alist = [1,2,3,4]; alist.splice(2,1,7,8,9); //从第2个元素开始,删除1个元素,然后在此位置增加'7,8,9'三个元素 alert(alist); //弹出 1,2,7,8,9,4
多维数组
多维数组指的是数组的成员也是数组的数组。
var alist = [[1,2,3],['a','b','c']]; alert(alist[0][1]); //弹出2;
批量操作数组中的数据,需要用到循环语句
9.循环语句
程序中进行有规律的重复性操作,需要用到循环语句。
for循环
for(var i=0;i<len;i++) { ...... }
例子1:将数组中的数据分别用弹框弹出
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript"> /* for(var i=0;i<5;i++) { alert('ok!'); }*/ var alist = ['a','b','c','d']; var ilen = alist.length; for(var i=0;i<ilen;i++) { alert(alist[i]); } </script> </head> <body> </body> </html>
例子2:将数组中的数据放入到页面中的列表中
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript"> window.onload = function(){ var oul = document.getelementbyid('list'); var alist = ['美人鱼','疯狂动物城','魔兽','美国队长3','湄公河行动']; var ilen = alist.length; var str = ''; for(var i=0;i<ilen;i++) { str += '<li>'+ alist[i]+ '</li>'; } oul.innerhtml = str; } </script> <style type="text/css"> .list{ list-style:none; margin:50px auto 0; padding:0; width:300px; height:305px; } .list li{ height:60px; border-bottom:1px dotted #000; line-height:60px; font-size:16px; } </style> </head> <body> <ul class="list" id="list"> <!-- <li>美人鱼</li> <li>美人鱼</li> <li>美人鱼</li> <li>美人鱼</li> <li>美人鱼</li> --> </ul> </body> </html>
while循环
var i=0; while(i<8){ ...... i++; }
数组去重
var alist = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1]; var alist2 = []; for(var i=0;i<alist.length;i++) { if(alist.indexof(alist[i])==i) { alist2.push(alist[i]); } } alert(alist2);
10.获取元素方法二
可以使用内置对象document上的getelementsbytagname方法来获取页面上的某一种标签,获取的是一个选择集,不是数组,但是可以用下标的方式操作选择集里面的标签元素。
<script type="text/javascript"> window.onload = function(){ var ali = document.getelementsbytagname('li'); // ali.style.backgroundcolor = 'gold'; // 出错!不能同时设置多个li alert(ali.length); ali[0].style.backgroundcolor = 'gold'; } </script> .... <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>
例子:使用循环操作列表中的每个元素
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>通过标签获取元素</title> <script type="text/javascript"> window.onload = function(){ // 通过标签名称获取li元素,生成一个选择集,赋值给ali var ali = document.getelementsbytagname('li'); // 读取选择集内元素的个数 //alert(ali.length); // 弹出13 var ilen = ali.length; //给一个li设置背景色 //ali[0].style.backgroundcolor = 'gold'; // 不能给选择集设置样式属性 //ali.style.backgroundcolor = 'gold'; /* 同时给所有的li加背景色 for(var i=0;i<ilen;i++) { ali[i].style.backgroundcolor = 'gold'; } */ var oul = document.getelementbyid('list1'); var ali2 = oul.getelementsbytagname('li'); var ilen2 = ali2.length; for(var i=0;i<ilen2;i++) { if(i%2==0) { ali2[i].style.backgroundcolor = 'gold'; } } } </script> </head> <body> <ul id="list1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <ul id="list2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
11.javascript组成
1、ecmascript javascript的语法(变量、函数、循环语句等语法)
2、dom 文档对象模型 操作html和css的方法
3、bom 浏览器对象模型 操作浏览器的一些方法
12.字符串处理方法
1、字符串合并操作:“ + ”
var inum01 = 12; var inum02 = 24; var snum03 = '12'; var str = 'abc'; alert(inum01+inum02); //弹出36 alert(inum01+snum03); //弹出1212 数字和字符串相加等同于字符串相加 alert(snum03+str); // 弹出12abc
2、parseint() 将数字字符串转化为整数
var snum01 = '12'; var snum02 = '24'; var snum03 = '12.32'; alert(snum01+snum02); //弹出1224 alert(parseint(snum01)+parseint(snum02)) //弹出36 alert(snum03) //弹出数字12 将字符串小数转化为数字整数
3、parsefloat() 将数字字符串转化为小数
var snum03 = '12.32' alert(parsefloat(snum03)); //弹出 12.32 将字符串小数转化为数字小数
4、split() 把一个字符串分隔成字符串组成的数组
var str = '2017-4-22'; var arr = str.split("-"); var arr2= str.split(""); alert(arr); //弹出['2017','4','2'] alert(arr2); //弹出['2','0','1','7','-','4','-','2','2']
5、charat() 获取字符串中的某一个字符
var sid = "#div1"; var str = sid.charat(0); alert(str); //弹出 #
6、indexof() 查找字符串是否含有某字符
var str = "abcdefgh"; var inum = str.indexof("c"); alert(inum); //弹出2
7、substring() 截取字符串 用法: substring(start,end)(不包括end)
var str = "abcdefghijkl"; var str2 = str.substring(3,5); var str3 = str.substring(1); alert(str2); //弹出 de alert(str3); //弹出 bcdefghijkl
8、touppercase() 字符串转大写
var str = "abcdef"; var str2 = str.touppercase(); alert(str2); //弹出abcdef
9、tolowercase() 字符串转小写
var str = "abcdef"; var str2 = str.tolowercase(); alert(str2); //弹出abcdef
10、字符串反转
var str = 'asdfj12jlsdkf098'; var str2 = str.split('').reverse().join(''); alert(str2);
13.类型转换
1、直接转换 parseint() 与 parsefloat()
alert('12'+7); //弹出127 alert( parseint('12') + 7 ); //弹出19 alert( parseint(5.6)); // 弹出5 alert('5.6'+2.3); // 弹出5.62.3 alert(parsefloat('5.6')+2.3); // 弹出7.8999999999999995 alert(0.1+0.2); //弹出 0.3000000000000004 alert((0.1*100+0.2*100)/100); //弹出0.3 alert((parsefloat('5.6')*100+2.3*100)/100); //弹出7.9
2、隐式转换 “==” 和 “-”
if('3'==3) { alert('相等'); } // 弹出'相等' alert('10'-3); // 弹出7
3、nan 和 isnan
alert( parseint('123abc') ); // 弹出123 alert( parseint('abc123') ); // 弹出nan
例子:制作一个计算器,可以计算加、减、乘、除,用户输入非数字或者置空可以提示
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript"> window.onload =function(){ var oinput01 = document.getelementbyid('input01'); var oinput02 = document.getelementbyid('input02'); var obtn = document.getelementbyid('btn'); obtn.onclick = function(){ var ival01 = parseint(oinput01.value); var ival02 = parseint(oinput02.value); alert(ival01+ival02); } } </script> </head> <body> <input type="text" name="" id="input01"> + <input type="text" name="" id="input02"> <input type="button" name="" value="相加" id="btn"> </body> </html>
14.定时器
定时器在javascript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流
定时器类型及语法
/* 定时器: settimeout 只执行一次的定时器 cleartimeout 关闭只执行一次的定时器 setinterval 反复执行的定时器 clearinterval 关闭反复执行的定时器 */ var time1 = settimeout(myalert,2000); var time2 = setinterval(myalert,2000); /* cleartimeout(time1); clearinterval(time2); */ function myalert(){ alert('ok!'); }
1、定时器制作移动动画
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript"> window.onload = function(){ var odiv = document.getelementbyid('div1'); var ileft = 0; var ispeed = 3; /* var timer = setinterval(moving,30); function moving(){ ileft += 3; odiv.style.left = ileft + 'px'; } */ var timer = setinterval(function(){ ileft += ispeed; odiv.style.left = ileft + 'px'; if(ileft>700) { ispeed=-3; } if(ileft<0) { ispeed = 3; } },20); } </script> <style type="text/css"> .box{ width:200px; height:200px; background-color:gold; position:absolute; left:0; top:100px; } </style> </head> <body> <div id="div1" class="box"></div> </body> </html>
2、定时器制作无缝滚动
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>无缝滚动</title> <style type="text/css"> *{ margin:0; padding:0; } .list_con{ width:1000px; height:200px; border:1px solid #000; margin:10px auto 0; background-color:#f0f0f0; position:relative; overflow:hidden; } .list_con ul{ list-style:none; width:2000px; height:200px; position:absolute; left:0; top:0; } .list_con li{ width:180px; height:180px; float:left; margin:10px; } .btns_con{ width:1000px; height:30px; margin:50px auto 0; position:relative; } .left,.right{ width:30px; height:30px; background-color:gold; position:absolute; left:-40px; top:124px; font-size:30px; line-height:30px; color:#000; font-family: 'arial'; text-align:center; cursor:pointer; border-radius:15px; opacity:0.5; } .right{ left:1010px; top:124px; } </style> <script type="text/javascript"> window.onload = function(){ var odiv = document.getelementbyid('slide'); var obtn01 = document.getelementbyid('btn01'); var obtn02 = document.getelementbyid('btn02'); //通过标签获取元素,获取的是选择集,加上下标才能获取到元素 var oul = odiv.getelementsbytagname('ul')[0]; var ileft = 0; var ispeed = -2; var inowspeed = 0; //将ul里面的内容复制一份,整个ul里面就包含了10个li oul.innerhtml = oul.innerhtml + oul.innerhtml; function moving(){ ileft += ispeed; // 当ul向左滚动到第5个li时,瞬间将整个ul拉回到初始位置 if(ileft<-1000) { ileft=0; } //当ul在起始位置往右滚动时候,瞬间将整个ul拉回到往左的第5个li的位置 if(ileft>0) { ileft = -1000; } oul.style.left = ileft + 'px'; } var timer = setinterval(moving,30); obtn01.onclick = function(){ ispeed = -2; } obtn02.onclick = function(){ ispeed = 2; } // 当鼠标移入的时候 odiv.onmouseover = function(){ inowspeed = ispeed; ispeed = 0; } // 当鼠标移出的时候 odiv.onmouseout = function(){ ispeed = inowspeed; } } </script> </head> <body> <div class="btns_con"> <div class="left" id="btn01"><</div> <div class="right" id="btn02">></div> </div> <div class="list_con" id="slide"> <ul> <li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li> <li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li> <li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li> <li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li> <li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li> </ul> </div> </body> </html>
3、定时器制作时钟
<script type="text/javascript"> window.onload = function(){ var odiv = document.getelementbyid('div1'); function timego(){ var now = new date(); var year = now.getfullyear(); var month = now.getmonth()+1; var date = now.getdate(); var week = now.getday(); var hour = now.gethours(); var minute = now.getminutes(); var second = now.getseconds(); var str = '当前时间是:'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second); odiv.innerhtml = str; } timego(); setinterval(timego,1000); } function toweek(n){ if(n==0) { return '星期日'; } else if(n==1) { return '星期一'; } else if(n==2) { return '星期二'; } else if(n==3) { return '星期三'; } else if(n==4) { return '星期四'; } else if(n==5) { return '星期五'; } else { return '星期六'; } } function todou(n){ if(n<10) { return '0'+n; } else { return n; } } </script> ...... <div id="div1"></div>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript"> window.onload = function(){ var odiv = document.getelementbyid('div1'); function fntimego(){ var snow = new date(); // 获取年份 var iyear = snow.getfullyear(); // 获取月份,月份是从0到11,0表示一月,11表示十二月 var imonth = snow.getmonth()+1; var idate = snow.getdate(); // 星期是从0到6,0表示星期天 var iweek = snow.getday(); var ihour = snow.gethours(); var iminute = snow.getminutes(); var isecond = snow.getseconds(); var str = '当前时间是:'+ iyear + '年'+ imonth + '月'+ idate+'日 ' + fntoweek(iweek) + ' ' +fntodou(ihour) + ':' + fntodou(iminute) + ':' + fntodou(isecond); odiv.innerhtml = str; } // 刚开始调用一次,解决刚开始1秒钟空白的问题 fntimego(); setinterval(fntimego,1000); function fntoweek(n){ if(n==0) { return '星期日'; } else if(n==1){ return '星期一'; } else if(n==2){ return '星期二'; } else if(n==3){ return '星期三'; } else if(n==4){ return '星期四'; } else if(n==5){ return '星期五'; } else{ return '星期六'; } } function fntodou(n){ if(n<10) { return '0'+n; } else { return n; } } } </script> <style type="text/css"> div{ text-align:center; font-size:30px; color:pink; } </style> </head> <body> <div id="div1"></div> </body> </html>
4、定时器制作倒计时
<script type="text/javascript"> window.onload = function(){ var odiv = document.getelementbyid('div1'); function timeleft(){ var now = new date(); var future = new date(2016,8,12,24,0,0); var lefts = parseint((future-now)/1000); var day = parseint(lefts/86400); var hour = parseint(lefts%86400/3600); var min = parseint(lefts%86400%3600/60); var sec = lefts%60; str = '距离2016年9月12日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒'; odiv.innerhtml = str; } timeleft(); setinterval(timeleft,1000); } </script> ...... <div id="div1"></div>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script type="text/javascript"> window.onload = function(){ var odiv = document.getelementbyid('div1'); function fntimeleft(){ //实际开发中需要读取后台的时间,可以通过ajax来读取 var snow = new date(); // 未来时间:4月30日晚24点 var sfuture = new date(2017,3,30,24,0,0); //计算还有多少秒 var sleft = parseint((sfuture-snow)/1000); //计算还剩多少天 var idays = parseint(sleft/86400); // 计算还剩多少小时 var ihours = parseint((sleft%86400)/3600); // 计算还剩多少分 var iminutes = parseint(((sleft%86400)%3600)/60); // 计算还剩多少秒 var iseconds = sleft%60; var str = '距离5月1日还剩:'+ idays + '天' + fntodou(ihours) + '时' + fntodou(iminutes) + '分'+ fntodou(iseconds) + '秒'; odiv.innerhtml = str; } fntimeleft(); setinterval(fntimeleft,1000); function fntodou(n){ if(n<10)
相关文章:
-
-
1. 枚举类定义 在某些情况下,一个类的对象是有限而且固定的,比如季节类,它只有4个对象,这种实例有限而且固定的类,在Java里被称为枚举类。 2.... [阅读全文]
-
1.基本数据类型比较用:== 2.引用数据类型比较用:equals方法 如果引用数据类型使用==比较的话,比较的是地址值 toString类 对象调... [阅读全文]
-
Beginning Python Games Development
Like music and movies, video games are rapidly becoming an integral part o... [阅读全文] -
1. 构造猜数字核心函数 2. 构造用户外壳函数 3. 构造输入判断函数 方法1 方法2 4. 调用执行 ... [阅读全文]
-
CentOS6升级Python2.6到3.7,错误处理[No module named '_ctypes']
CentOS6升级Python2.6到3.7,错误处理[No module named '_ctypes'] 因开发需要,在CentOS 6 服务器... [阅读全文] -
版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。
发表评论