JavaScript
程序员文章站
2022-03-20 19:21:16
索引 1.JavaScript介绍 2.JavaScript嵌入页面的方式 3.变量 4.获取元素方法一 5.操作元素属性 6.函数 7.条件语句 8.数组及操作方法 9.循环语句 10.获取元素方法二 11.Javascript组成 12.字符串处理方法 13.类型转换 14.定时器 15.变量作 ......
索引
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)
赞 (0)
打赏
微信扫一扫
相关文章:
-
-
阅读目录 一、文件操作 1、介绍 计算机系统分为：计算机硬件，操作系统，应用程序三部分。 我们用python或其他语言编写的应用程序若想要把数据永久... [阅读全文]
-
我们今天继续学习一下Numpy库 接着前面几次讲的，Numpy中还有一些标准运算 exp表示求e的幂次方，比如上面看到的，e的0次方为1，e的2次方... [阅读全文] -
有些时候项目中并未有什么问题 但项目前会有一个X号报错且无法运行项目 我们不妨从jre和Tomcat的一些配置中找原因 1，首先查看jre的安装是否... [阅读全文]
-
1. 理清楚游戏思路 实现功能:2个洞穴选择,一个洞穴是好龙,一个洞穴是坏龙,坏龙可以概率屠龙或者概率逃跑选项(后续难度需要增加宝藏获取装备,随机遇... [阅读全文]
-
Python之路【第六篇】:Python迭代器、生成器、面向过程编程
阅读目录 一、迭代器 1、迭代的概念 #迭代器即迭代的工具，那什么是迭代呢？ #迭代是一个重复的过程，每次重复即一次迭代，并且每次迭代的结果都是下一... [阅读全文] -
版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。
下一篇： 一文理解JS的节流、防抖及使用场景
发表评论