51-75

つ微凉徒眸挚半

已于 2023-01-10 18:42:42 修改

阅读量1k

点赞数

文章标签： json javascript 前端

于 2023-01-10 18:39:38 首次发布

本文链接：https://blog.csdn.net/weixin_73696461/article/details/128634556

版权

字符串

有六种数据类型
其中前五种为基本数据类型，而Object属于引用类型.


String	字符串
Number	布尔值
Boolean	空值
Undefined	未定义
Object	对象

string字符串：

需要用引号引起来
使用单双引号都可以，但不要混用
同类型引号不能嵌套
在字符串中可以用“\”作为转义字符

Number

在JS当中所有的数值都是Number类型，包括整数和浮点数（小数）
可以使用typeof来检查变量类型
Number.MAX_VALUE表示最大值
Infinity表示正，-infinity表示负
NAN指不是Number，返回值也是number

布尔值
Boolean 布尔值，只有两个：true，false
“”和‘’中间为空或空格也是表示false
null、NaN和undefined也表示false
null和undefined
Null类型值只有一个：null
null这个值专门用来表示一个为空的对象
使用typeof检查一个null值时，会返回odject
Undefined类型的值只有一个：undefined，使用typeof检查只会返回undefined

强制类型转换：主要转换成String，Number，Boolean

转化为String：

方法一：调用被转换数据类型的toString（）方法
该方法不会影响到原变量，他会将转换结果返回
注意：null和nudefinded这两个值没有toString的方法，如果调用会报错

方法二：调用String（）函数，并将被转换的类型作为参数传递给函数，需要另一个变量储存。
对于Number和Boolean实际上就是调用的toString（）的方法
但是对与null和undefined，就不会调用toString（）的方法
他会将null直接转成“null”，undefined转成“undefined”
使用Number（）函数

字符串—>数字

方法一：

字符纯数字，则转数字
非全数字，则转NaN
如果为空格则为“0”
布尔值：true–1；false–0；
null–>数字 0
undefined–>数字NaN
方法二：

专门对付字符串
parseInt可以将字符串中的整数取出来，然后转换为number
parseFloat取小数
非String使用parseint（）或parseFloat（），会先转成String然后再操作

转换为布尔值:

数字转布尔值：除了NuN和0，其余都是true
字符串，除了空串，其余都是true
null和undefined都是false
对象也会转换成true

JOSN

JSON是一种特殊的字符串，可以被其他的语言识别，并且可以转换成其他语言，用于开发的数据交互
JSON和JS的其他对象一样，不过是JSON字符串的属性名必须加双引号，其他语法和JS一致。

分类：

对象{}
数组[]

JSON中允许的值：

字符串
数值
布尔值
null
对象
数组

eval()
这个函数可以将字符串转化为代码进行执行，如果使用该函数时字符串中含有{}
则外部使用（）var obj=eval（"("+str+")"）;
该函数的功能很强大，尽量不要使用，因为有一定的安全风险。
JSON.stringify()可以将JS对象转换成JSON字符串，需要一个js对象作为参数，会返回一个JSON字符串，IE7以下不支持

滚动事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box1{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<script>
    window.onload=function(){
         var box1=document.getElementById("box1");
        //onmousewheel火狐不支持
        //火狐需要用到DOMMouseScroll来绑定滚动事件，需要通过addEventlistener（）函数来绑定
        box1.onmousewheel=function(event){
            //event.wheelDelta火狐不支持
            //上正下负
            //火狐event.detail
            //上负下正
            if(event.wheelDelta<0 ||event.detail>0){
                box1.style.height=box1.clientHeight+10+"px";
            }
            else{
                box1.style.height=box1.clientHeight-10+"px";
            }

            event.preventDefault && event.preventDefault();//火狐消除方法，IE8不能使用
            return false;//消除默认浏览器滚动条随着滚动，其他的浏览器
            
        }
        bind(box1,"DOMMouseScroll",function(){

        })
        function bind(obj,eventstr,callback){
            if(obj.addEvevntlistener){
                obj.addEvevntlistener(eventstr,callback,false);
            }
            else
            {
                obj.attachEvent("on"+eventstr,function(){
                    callback.call(obj);
                });
            }
        }
        
    }
</script>
<body style="height: 2000px;">
    <div id="box1"></div>
</body>
</html>

BOM

浏览器对象模型
BOM可以使我们通过JS来操作浏览器
BOM对象：
window：代表整个浏览器窗口，同时使网页中的全局对象
Navigator：代表当前浏览器的信息，可以来识别不同浏览器，由于历史原因，该方法不能用来识别浏览器了，一般用userAgent来判断浏览器的信息，userAgent是一个字符串，还可以用ActiveXObject来判断，只能IE使用
Location：代表浏览器的地址栏信息，通过这个可以获取地址栏信息，并实现跳转
History：代表浏览器的历史，由于隐私原因，不能具体获取，只能操作前后翻页
Screen：代表用户的屏幕信息，可以获取用户的显示器的相关信息
这些都是作为window对象的属性保存的，可以用window来调用，也可以直接使用

History：
History.length:代表链接数量
History.back()向后退回一个页面
History.forward()向前跳转一个页面
HIstory.go()正值向前，负值向后
Location

location=“”；用于修改地址，并跳转,会有历史记录
location.assign()方法类似上面的
location.reload()重新加载页面//ture值可以消除缓存清空
location.replace（）跳转页面但是不会有历史记录

Date

<script>
var date = new Date();
   console.log(date);//此时获取的是实际时间

   var date = new Date("12/09/2023 12:20:00");//格式：（“月/日/年   时间”）
   console.log(date);//Sat Dec 09 2023 12:20:00 GMT+0800 (中国标准时间)

   var time = date.getTime();
   console.log(time);//1702095600000 
   </script>

getTime()
获取当前日期的时间戳
时间戳指的是是从格林威治标准时间的1970年1月1日，0时0分0秒，到当前日期的毫秒数（1秒=1000毫秒）

定时器

setInterval（要调用的函数，间隔的时间（以毫秒为单位））会有一个数字返回值，这个返回值使=是定时器的唯一标识。
clearInterval（）需要一个定时器的标识，才能关闭定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var num=1;
            var cou=document.getElementById("cou");
            var time=setInterval(function(){
                
                cou.innerHTML=num++;
                if(num==11){
                    clearInterval(time);
                 }
            }, 10);
            
           
        }
    </script>
</head>
<body>
    <h1 id="cou">1</h1>
</body>
</html>

延时函数

  setInterval(function(){
            console.log("1");
            },1)//可以执行多次
           
            setTimeout(function(){
                console.log("1");
            },3000)//只能执行一次
        }//两者可以相互代替

定时器的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var btn1=document.getElementById("btn1");
            var btn2=document.getElementById("btn2");
            var btn3=document.getElementById("btn3");
            
            var box=document.getElementById("box");
            function getstyle(obj,name){
                if(window.getComputedStyle){
                    return getComputedStyle(obj,null)[name];
                }
                else{
                    return obj.currentStyle[name];
                }
            }
            
            function move(obj,attr,target,speed,callback){
                clearInterval(obj.time);
                var x=parseInt(getstyle(obj,attr));
                if(x>=target){
                    speed=-speed;
                }
                else{
                    speed=speed;
                }
                obj.time=setInterval(function(){//消除同时进行不了的问题
                var x=parseInt(getstyle(obj,attr));
                var newx=x+speed;
                if((speed<0 && newx<target)||(speed>0 && newx>target)){
                        newx=target;
                }
                obj.style[attr]=newx+"px";
                   
                 if(x==target){
                        clearInterval(obj.time);
                        callback && callback();
                        
                    }
                },30);

            }
            btn1.onclick=function(){
                move(box1,"left",800,10);
            }
            btn2.onclick=function(){
                move(box1,"left",0,10);
            }
            btn3.onclick=function(){
                move(box2,"left",800,10,function(){
                    move(box2,"width",800,50,function(){
                        alert();
                    })
                });
            }
            
        }
            
    </script>
    <style>
        body{
            position: relative;
        }
        #box1{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 200px;
            background-color: red;
        }
        #box2{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 500px;
            background-color: greenyellow;
        }
        button{
            display: block;
            width: 100px;
            height: 40px;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <button id="btn1"></button>
    <button id="btn2"></button>
    <button id="btn3"></button>
</body>
</html>