欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript

程序员文章站 2022-07-05 15:19:02
索引 1.JavaScript介绍 2.JavaScript嵌入页面的方式 3.变量 4.获取元素方法一 5.操作元素属性 6.函数 7.条件语句 8.数组及操作方法 9.循环语句 10.获取元素方法二 11.Javascript组成 12.字符串处理方法 13.类型转换 14.定时器 15.变量作 ......

索引

        1.javascript介绍

        2.javascript嵌入页面的方式

        

        

        

        

        

        

        

        

        11.javascript组成

        

        

        

        

        

        

 

 

1.javascript介绍

javascript是运行在浏览器端的脚步语言,javascript主要解决的是前端与用户交互的问题,包括使用交互与数据交互。 javascript是浏览器解释执行的,前端脚本语言还有jscript(微软,ie独有),actionscript( adobe公司,需要插件)等。

前端三大块 
1、html:页面结构
2、css:页面表现:元素大小、颜色、位置、隐藏或显示、部分动画效果
3、javascript:页面行为:部分动画效果、页面与用户的交互、页面功能

 

2.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">&lt;</div>
        <div class="right" id="btn02">&gt;</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)
打赏 JavaScript 微信扫一扫

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

JavaScript
验证码: JavaScript