字符串
- 有六种数据类型
- 其中前五种为基本数据类型，而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>
2645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
