码迷，mamicode.com
首页 > 编程语言 > 详细

04-JavaScript的操作

时间：2018-08-18 14:22:04      阅读：158      评论：0      收藏：0      [点我收藏+]

标签：none   i++   css   页面   dom   ret   rect   索引   image   

 

　　本篇主要介绍获取元素的方法、操作元素、数组和字符串的操作方法、定时器和封闭函数、以及贪吃蛇案例；

一、获取元素的方法

　　1、document.getElementById：可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

<script type="text/javascript">
    var oDiv = document.getElementById(‘div1‘);
</script>
....
<div id="div1">这是一个div元素</div>

　　2、document.getElementByTagName：获取页面上的标签节点元素，获取一个数组对象；

    <script>
        window.onload = function() {
            //通过标签名来获取对象
            var divObj = document.getElementsByTagName(‘div‘);

            //对divObj这个数组对象集合进行遍历  可以使用for循环来实现
            //[div1Obj,div2Obj,div3Obj....]
            var divObj_length = divObj.length;
            for(var i=0;i<divObj_length;i++){
                //alert(divObj[i])
                alert(divObj[i].innerHTML);
            }
       }
    </script>
    ................
    <div>黑马程序员1</div>
    <div>黑马程序员2</div>
    <div>黑马程序员3</div>
    <div>黑马程序员4</div>
    <div>黑马程序员5</div>

　　3、document.getElementsByName：主要针对于表单，要获取到input 标签的对象(数组对象集合)；

    <script>
        //document.getElementsByName 主要针对于表单
        window.onload = function() {
            //第一步：要获取到input 标签的对象(数组对象集合)
            var input_obj = document.getElementsByName("user")[0];
            alert(input_obj.value);
        }    
    </script>
        .................
    <input type="text" name="user" value="hello">

 

 

二、事件属性

　元素上除了有样式，id等属性外，还有事件属性，常用的事件属性有

　　鼠标点击事件属性      (onclick)，

　　鼠标移入事件属性      (mouseover),

　　鼠标移出事件属性      (mouseout),

　将函数名称赋值给元素事件属性，可以将事件和函数关联起来。以下便是所有的时间属性：

　　技术分享图片

 

三、操作元素属性

　　获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。

　2.1 操作元素属性 
　　var 变量 = 元素.属性名 读取属性
　　元素.属性名 = 新属性值 改写属性

 

　2.2 属性名在js中的写法 
　　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;

        // 写(设置)属性---样式属性前加上 style
        oA.style.color = ‘red‘;
        oA.style.fontSize = sValue;
    }
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">Helloween</a>

 

　2.3 操作标签内的值 -- 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.itcast.cn">传智播客<a/>‘;
    }
</script>

......

<div id="div1">这是一个div元素</div>

　　通常使用innerHTML，通过字符串的拼接的方式，来修改标签内的值；

 

四、数组及操作方法

　　数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。

　4.1  定义数组的方法

//对象的实例创建
var aList = new Array(1,2,3);

//直接量创建
var aList2 = [1,2,3,‘asd‘];

 

　4.2  操作数组中数据的方法 

　　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、reverse() 将数组反转

var aList = [1,2,3,4];
aList.reverse();
alert(aList);  // 弹出4,3,2,1

　　6、indexOf() 返回数组中元素第一次出现的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

　　7、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

 

　4.3 多维数组

　　多维数组指的是数组的成员也是数组的数组。

var aList = [[1,2,3],[‘a‘,‘b‘,‘c‘]];

alert(aList[0][1]); //弹出2;

　　批量操作数组中的数据，需要用到循环语句；

 

五、字符串的操作方法

　　1、字符串合并操作：“ + ”，通常可以将 int+‘‘ 来将整型转为字符串类型；

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(parseInt(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、indexOf() 查找字符串是否含有某字符

var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2

　　6、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

　　7、字符串反转

var str = ‘asdfj12jlsdkf098‘;
var str2 = str.split(‘‘).reverse().join(‘‘);

alert(str2);

　　关于字符串的操作，上面是常见的方法；若要了解更多关于字符串的，可以参考 W3school手册。

 

6、定时器

　　定时器在javascript中的作用  ：1、定时调用函数    2、制作动画

/*
    定时器：
    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert(‘ok!‘);
}

 

7、贪吃蛇案例

html+javascript

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>贪吃蛇</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div class="all">
        <div class="map">
            <div class="snake" id="a1">
                <div class="snake_head" id="0"></div>
                <div class="snake_body" id="1"></div>
                <div class="snake_body" id="2"></div>    
            </div>
            <div class="food" id="food"></div>
        </div>
        <div class="count">
            <img src="images/snake.png">
            <p>您当前的分数为：<br><span>0</span></p>
        </div>
    </div>
</body>
<script type="text/javascript">
    
    var box=document.getElementById("a1");
    
    var oFood = document.getElementById("food");
    
    var a=2;
    
    var b=[];
    
    chushi_left=40;
    
    chushi_top=0;
    
    left_list=[];
    
    top_list=[];
    
    
    // 将蛇块对象存入
    function aa(){
        
        for(i=0;i<a+1;i++){
        
        var c=document.getElementById(i+"");
        
        b.push(c);
                        }
                    }
    aa();

    // 初始化蛇的位置
    for (i=0;i<a+1;i++){
        
        b[i].style.left=40-i*20+"px";
        
        b[i].style.top=0+"px";
    }


    // 让食物随机移动
    function fnFmove(){
        // alert("11");
    
        oXfood = Math.floor(Math.random(1,5)*20)*20; 
        
        oYfood = Math.floor(Math.random(1,5)*20)*20; 
        
        oFood.style.top = oYfood + "px";
        
        oFood.style.left = oXfood + "px";
    
    }
    
    fnFmove()

    // 定义一个蛇移动函数，参数1以为速度，参数2为方向
    function move(speed,d){

        x=b[0].style.left;
        
        y=b[0].style.top;
        // alert(top_list);z
        
        // alert()
        cuchu();
    
        // 判定蛇的是否撞上食物
        if (x==oFood.style.left&&y==oFood.style.top){
            
            ab=parseInt(left_list[a])-20; // 获取最后一个蛇块的位置并减20
            
            ba=parseInt(top_list[a]);
            
            a+=1;
            
            box.innerHTML +=    ‘<div class="snake_body" id="‘+a+‘" style="left:‘+ab+‘px; top:‘+ba+‘px;"></div>‘;
            
            b.splice(0,a);
            
            for(i=0;i<a+1;i++){
                
                // 重新获取对象，并且存入
                xinyuansu=document.getElementById(i+"");
                
                b.push(xinyuansu);
                }    
             
            // a+=1

            // ab=left_list[a-2];
            
            // ab=parseInt(ab)-40;
            // alert(ab);
            // ba=parseInt(top_list[a-2]);
            // box.innerHTML+=‘<div class="snake_body" id="‘+a+‘" style="left:‘+ab+‘px; top:‘+ba+‘px;"></div>‘;
            // return;

            // xx=document.getElementById(a+"");
            
            
            
            // b.push(xx);
            // alert(xx);
            // alert(b[0]);
            
            // // alert(box.innerHTML);
            fnFmove();
            
            
        }
        function panding(){
        
        for (i=1;i<a+1;i++){
        
            x1=parseInt(b[0].style.left);
            
            y1=parseInt(b[0].style.top);
            
            z1=parseInt(b[i].style.left);
            
            h1=parseInt(b[i].style.top);
            
            if (z1==x1&&h1==y1){
                box.innerHTML="";
                alert("死掉了");
        }
            }
        }
        
        
        if (d==1){chushi_left+=speed;b[0].style.left=chushi_left+"px";}
        
        if (d==2){chushi_left+=speed;b[0].style.left=chushi_left+"px";}
        
        if (d==3){chushi_top+=speed;b[0].style.top=chushi_top+"px";}
        
        if (d==4){chushi_top+=speed;b[0].style.top=chushi_top+"px";}
        
        panding();
        
        x=parseInt(b[0].style.left);
        
        y=parseInt(b[0].style.top);
        
        if(x>800||x<0||y>560||y<0){
            box.innerHTML="";
            alert("死掉了");
        }
        tihuan();
        
    }

    function tihuan(){
        
        for(i=1;i<a+1;i++){
            
            b[i].style.left=left_list[i-1];
            
            b[i].style.top=top_list[i-1];
        }
        
        left_list.splice(0,a+1); 
        top_list.splice(0,a+1);
    }

    function cuchu(){
        
        for (i=0;i<a+1;i++){
            
            left_list.push(b[i].style.left);
            
            top_list.push(b[i].style.top);
        }
    }
    
    function move_right(speed,fangxiang){
        
        move(20,2);
    }
    
    function move_left(speed,fangxiang){
        
        move(-20,1);
    }
    
    function move_top1(speed,fangxiang){
        
        move(-20,3);
    }
    
    function move_top2(speed,fangxiang){
        
        move(20,4);
    }
    
    hhh=setInterval(move_right,150);
    
    window.onkeydown=function(ent){
        
        var event=ent;
        
        switch(event.keyCode){
            
            case 37:
                
                clearInterval(hhh);
                
                hhh=setInterval(move_left,170);
                
                break;
            case 38:
                
                clearInterval(hhh);
                
                hhh=setInterval(move_top1,170);
                
                break;
            case 39:
                
                clearInterval(hhh);
                
                hhh=setInterval(move_right,170);
                
                break
            case 40: 
                
                clearInterval(hhh);
                
                hhh=setInterval(move_top2,170);
                
                break;
        }

}
</script>
</html>
贪吃蛇案例--我写的

css样式：

技术分享图片 
.all{
    width: 1100px;
    height: 600px;
    background-color: #666;
    margin: 100px auto;
}
/*计分部分*/
.count{
    width: 200px;
    height: 600px;
    /*background-color: white;*/
    float: right;
    border-left: 1px solid white;
}
.count img{
    margin-top: 200px;
    margin-left: 40px;
}
.count p{
    font-size: 18px;
    color: white;
    text-align: center;
}
.count span{
    font-size: 40px;
}

/*地图部分*/
.map{
    width:800px;
    height: 560px;
    margin: 20px 40px;
    background-color: #333333;
    float: left; 
    position: relative;
}
.food{
    width: 18px;
    height: 18px;
    background: red;
    border:1px solid white;
    position: absolute;
    top: 300px;
    left: 600px;
}
.snake{

    height: 20px;
    background-color:white; 
    position: absolute;
    top: 0px;
    left: 0px;
}

.snake_head{
    width: 18px;
    height: 18px; 
    background-color: blue;
    border:1px solid white;
    position: absolute;
    
}
.snake_body{
    width: 18px;
    height: 18px; 
    background-color: yellow;
    border:1px solid white;
    position:absolute; 
}
/*#body01{
    left: 40px;
    top: 0px;
}
#body02{
    top: 0px;
    left: 20px;
}
#body03{
    top: 0px;
    left: 0
}
*/
贪吃蛇样式

 

别人写的：

技术分享图片 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<script>
    var map; //地图类对象
    var snake; //蛇类对象
    var food; //食物类对象
    var timer; //定时器对象
    var sum=0; //分数
    
    //地图类
    function Map()
    {
        this.width=800; //地图宽度
        this.height=400; //地图高度
        this.position=‘absolute‘; //定位方式
        this.color=‘#cccccc‘; //地图颜色
        this._map=null; //保存地图dom元素
        
        this.show=function()
        {
            //用于显示地图
            //创建地图div元素
            this._map = document.createElement(‘div‘);
            //设置地图样式
            this._map.style.width = this.width + ‘px‘;
            this._map.style.height = this.height + ‘px‘;
            this._map.style.position = this.position ;
            this._map.style.backgroundColor = this.color ;
            
            //将地图div元素追加到body标签之间
            document.getElementsByTagName(‘body‘)[0].appendChild(this._map);
        };
    }
    
    //食物类
    function Food()
    {
        this.width=20; //宽度
        this.height=20; //高度
        this.position=‘absolute‘; //定位方式
        this.color=‘#00ff00‘; //食物颜色
        this._food=null; //用于保存食物dom元素
        this.x=0; //横向第几个格
        this.y=0; //纵向第几个格
        
        this.show=function()
        {
            //用于显示食物
            if(this._food==null)
            {
                this._food=document.createElement(‘div‘);
                
                //设置食物样式
                this._food.style.width = this.width + ‘px‘;
                this._food.style.height = this.height + ‘px‘;
                this._food.style.position = this.position ;
                this._food.style.backgroundColor = this.color ;
                
                map._map.appendChild(this._food);
            }
            //如果之前创建过，只需要重新设置坐标
            this.x=Math.floor(Math.random()*40);
            this.y=Math.floor(Math.random()*20);
            this._food.style.left = this.x*this.width+‘px‘;
            this._food.style.top = this.y*this.height+‘px‘;
        };
    }
    
    //蛇类
    function Snake()
    {
        this.width=20;    //蛇节宽度
        this.height=20;    //蛇节高度
        this.position=‘absolute‘; //蛇节定位方式
        this.direct=‘‘; //蛇的移动方向
        //所有蛇节全部信息
        this.body=[[3,2,‘red‘,null],[2,2,‘blue‘,null],[1,2,‘blue‘,null]];
        
        this.setDirect = function(code)
        {
            switch(code)
            {
                case 37:
                    this.direct=‘left‘;
                    break;
                case 38:
                    this.direct=‘up‘;
                    break;
                case 39:
                    this.direct=‘right‘;
                    break;
                case 40:
                    this.direct=‘down‘;
                    break;
            }
        }
        
        this.show=function()
        {
            //用于显示蛇
            for(var i=0;i<this.body.length;i++)
            {
                if(this.body[i][3]==null)
                {
                    this.body[i][3] = document.createElement(‘div‘);
                    this.body[i][3].style.width = this.width +‘px‘;
                    this.body[i][3].style.height = this.height +‘px‘;
                    this.body[i][3].style.position = this.position;
                    this.body[i][3].style.backgroundColor = this.body[i][2];
                    map._map.appendChild(this.body[i][3]);
                }
                //设置蛇节的横纵坐标
                this.body[i][3].style.left=this.body[i][0]*this.width+‘px‘;
                this.body[i][3].style.top=this.body[i][1]*this.height+‘px‘;
            }
        }
        
        this.move = function()
        {
            //移动蛇身
            var length = this.body.length-1;
            for(var i=length;i>0;i--)
            {
                //让后面的蛇节的坐标等于前面蛇节的坐标
                this.body[i][0]=this.body[i-1][0]; //横坐标
                this.body[i][1]=this.body[i-1][1]; //纵坐标
                
            }
            switch(this.direct)
            {
                case ‘right‘:
                    this.body[0][0]=this.body[0][0]+1;
                    break;
                case ‘down‘:
                    this.body[0][1]=this.body[0][1]+1;
                    break;
                case ‘left‘:
                    this.body[0][0]=this.body[0][0]-1;
                    break;
                case ‘up‘:
                    this.body[0][1]=this.body[0][1]-1;
                    break;
                default:
                    return;
            }
            
            //判断蛇吃到食物
            if(this.body[0][0]==food.x&&this.body[0][1]==food.y)
            {
                var x=this.body[length][0];
                var y=this.body[length][1];
                sum++;
                document.title=‘分数:‘+sum+‘分‘;
                this.body.push([x,y,‘blue‘,null]);
                food.show();
            }
            
            //判断撞墙死
            if(this.body[0][0]<0 || this.body[0][0]>39 ||this.body[0][1]<0 ||this.body[0][1]>19)
            {
                alert(‘撞墙死‘);
                clearTimeout(timer);
                return;
            }
            
            //吃到自己死
            for(var i=1;i<this.body.length;i++)
            {
                if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1])
                {
                    alert(‘吃到自己死‘);
                    clearTimeout(timer);
                    return;
                }
            }
            
            this.show();
        }
    }
    
    window.onload = function()
    {
        map = new Map(); //实例化地图类对象
        map.show();    //显示地图
        
        
        food=new Food(); //实例化食物类对象
        food.show(); //显示食物
        
        snake = new Snake(); //实例化蛇类对象
        snake.show();
        timer = setInterval(‘snake.move()‘,100);
        
        document.onkeydown = function()
        {
            var code;
            if(window.event)
            {
                code=window.event.keyCode;
            }else
            {
                code = event.keyCode;
            }
            snake.setDirect(code);
        };
        
        
    }
</script>
</head>
<body>

</body>
</html>
View Code

 

　　Qver~~~要想了解更多JavaScript的~~ 可参考 http://www.w3school.com.cn/js/index.asp

 

04-JavaScript的操作

标签：none   i++   css   页面   dom   ret   rect   索引   image   

原文地址：https://www.cnblogs.com/littlefivebolg/p/9497133.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！