一、查询字符串
queryString一种字符串格式
JS 把字符串分为几种格式
1. 普通字符串 ‘adsfasfasksdfhaiu’
2. 数字字符串 ‘234234234’
3. html字符串
4. 查询字符串 ‘key=value&key1=value1&key2=value2’
- 一条信息 key=value
- 多条信息 用&链接
案例一：把查询字符串转为对象类型
// 1. 把 查询字符串 转为 对象类型
var str = "username=小花&phone=123456";
function parseQueryString(str) {
// 1-1. 准备一个空对象
var obj = {};
// 1-2. 把str数据解析出来放在obj中 有几条数据放几 按照 & 拆分
var r1 = str.split("&");
// 1-3. 把数组r1里面的内容依次放到obj中 遍历
r1.forEach(function (item) {
// 1-4 把每一条信息按照=分割
var t = item.split("=");
// 1-5 = 左边的就是 key , = 右边的是value
var key = t[0];
var value = t[1];
obj[key] = value;
});
return obj;
}
var res = parseQueryString(str);
案例二：把 对象转为查询字符串
// username=小花&phone=123456
var obj = {
username: "小花",
phone: 123456,
};
function queryStringify(obj) {
// 1. 准备一个空字符串
var str = "";
for (var k in obj) {
// k 是啥
console.log(k, obj[k]);
// username='小花'&
str += `${k}=${obj[k]}&`;
}
// 最后多一个&， 截取掉
str = str.slice(0, -1);
console.log(str);
return str;
}
var str = queryStringify(obj);
二、JSON字符串
json格式字符串
-> ‘{“username”: “小花”, “phone”: “123456”}’
-> ‘[ {“username”: “小花”} , {“username”: “小明”} ]’
特点
1. 对象中的key value都要用双引号包裹起来
2. 数字 和 布尔 可以不包裹
3. 不接受函数
案例一：把 json格式转为 js格式
‘{“username”: “小花”, “phone”: “123456”}’
语法 JSON.parse(json格式字符串)
var str = '{"username": "小花", "phone": "123456"}';
var res = JSON.parse(str);
console.log(res);
案例二：把 js格式 转为 json 格式字符串
语法 JSON.stringify(js数据结构)
var obj = { name: "小花", age: 18 };
var str = JSON.stringify(obj);
console.log(str);
三、时间对象
1. 时间对象的创建
构造函数方式创建
var 变量名 = new Date()
2. 指定日期的创建
1) new Date() 只写一个数字
表示 从格林威治时间 往后顺延的毫秒数
2) new Date() 写多个数字
按照顺序 表示 年 月 日 时 分 秒 毫秒
- 月 从0开始 0表示1月
- 毫秒不展示
3) new Date 写字符串
new Date('YYYY-MM-DD HH:mm:ss')
new Date('YYYY/MM/DD HH:mm:ss')
// var date = new Date();
// console.log(date);
// 只写一个数字
// var date = new Date(1000);
// console.log(date);
// 设置多个数字
// var date = new Date(2021, 10, 10, 1);
// console.log(date);
// 写字符串
var date = new Date("2008-8-8 10:00:10");
var date = new Date("2008/8/8 10:00:10");
console.log(date);
onsole.log(date.toLocaleString());
3.时间对象的方法
基础单词
get 获取
set 设置
year 年
month 月
date 日
week 周
hour 小时
minutes 分钟
seconds 秒
get时间对象的获取方法
- getFullYear() 获取年
- getMonth() 获取月
- getDate() 获取日期
- getDay() 获取星期
- getHours() 获取小时
- getMinutes() 获取分钟
- getSeconds() 获取秒
var date = new Date();
console.log(date.getFullYear());
console.log(date.getMonth());
console.log(date.getDate());
console.log(date.getDay());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
set时间对象的设置方法
- setFullYear() 获取年
- setMonth() 获取月
- setDate() 获取日期
- setHours() 获取小时
- setMinutes() 获取分钟
- setSeconds() 获取秒
💡注意设置方法里面没有设置星期
var date = new Date();
/*
1. setFullYear() 设置年
*/
date.setFullYear(2008);
console.log(date);
/*
2. setMonth() 设置月
月 从0开始 最大是11
*/
date.setMonth(9);
console.log(date.toLocaleString());
/*
3. setDate() 设置日期
*/
date.setDate(1);
console.log(date);
/*
4. setHours 设置时
*/
date.setHours(8);
console.log(date);
/*
5. setMinutes 设置分
*/
date.setMinutes(1);
console.log(date);
/*
6. setSeconds() 设置秒
*/
date.setSeconds(1);
console.log(date);
4.时间戳
时间戳
从 格林威治时间 到现在的毫秒数
获取
日期对象.getTime()
设置
日期对象.setTime()
var date = new Date();
// console.log(date.getTime());
// 设置
date.setTime(1000);
console.log(date);
四.定时器
1. 定时器分类
- 延迟定时器
- 语法 setTimeout(function(){}, 毫秒数)
- 作用 隔一段时间之后执行
- 间隔定时器
- 语法 setInterval(function(){}, 毫秒数)
- 作用 每隔一段时间执行一次
// 1. 延迟定时器
setTimeout(function () {
console.log("执行了。。。");
}, 2000);
// 2. 间隔定时器
setInterval(function () {
console.log("执行了...");
}, 2000);
2. 定时器的返回值
- 返回值 数字
- 作用 用来关闭定时器
// 定时器的返回值
var t1 = setTimeout(function () {
console.log("执行了延迟定时器");
}, 1000);
var t2 = setInterval(function () {
console.log("执行了间隔定时器");
}, 1000);
console.log(t1, "t1");
console.log(t2, "t2");
3. 关闭定时器
语法
- clearTimeout(定时器)
- clearInterval(定时器)
<body>
<button id="btn">关闭</button>
</body>
<script>
// 关闭定时器
var t1 = setTimeout(function () {
console.log("执行了延迟定时器");
}, 1000);
var t2 = setInterval(function () {
console.log("执行了间隔定时器");
}, 1000);
btn.onclick = function () {
// 关闭定时器
// clearTimeout(t1);
// clearTimeout(t2);
clearInterval(t1);
clearInterval(t2);
};
</script>
案例一：页面时钟
/* 要求：
在页面上展示一个时钟 隔1s更新一次
效果：
xx年xx月xx日 星期x xx:xx:xx
*/
// 封装一个函数， 数字是一位数的时候，前面补0
function format(num) {
return num > 10 ? num : "0" + num;
}
function dateStr() {
var str = "";
// 获取日期
var date = new Date();
// 解析 获取每一个部分
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var week = date.getDay();
var weekStr = "日一二三四五六";
week = "星期" + weekStr[week];
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
str = `${year}年${month}月${day}日 ${week} ${format(h)}:${format(
m
)}:${format(s)}`;
return str;
}
box.innerHTML = dateStr();
setInterval(function () {
box.innerHTML = dateStr();
}, 1000);
案例二：倒计时
/*
设置未来时间 1.14
距离 1. 14还有 x日x时x分x秒
分析：
时间戳相减
*/
/*
function countDay() {
var str = "";
var futureTime = new Date("2023/1/14");
var currentTime = new Date();
var time = parseInt((futureTime - currentTime) / 1000);
var day = parseInt(time / (24 * 60 * 60));
var h = parseInt((time % (24 * 60 * 60)) / (60 * 60));
var m = parseInt((time % (60 * 60)) / 60);
var s = time % 60;
// str = `${day}天${h}时${m}分${s}秒`;
str = day + "天" + h + "时" + m + "分" + s + "秒";
return str;
}
box.innerHTML = countDay();
setInterval(function () {
box.innerHTML = countDay();
}, 1000);
案例三：抽奖案例
<style>
div {
width: 500px;
height: 100px;
border: 5px solid red;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
}
body {
text-align: center;
}
</style>
<body>
<div id="box">开始抽奖</div>
<button id="start">开始</button>
<button id="end">结束</button>
</body>
<script>
var arr = [
"谢谢惠顾",
"再来一次",
"身体健康",
"试卷一套",
"想屁吃",
"彩票一张",
"沙县小吃",
"劳斯莱斯五元优惠券",
"别墅一套",
"袜子一双",
"霸王洗发水",
];
// 需求 点击 box开始抽奖 再次点击停止抽奖
// 开始抽奖 ---- 不断的从arr中随机产生一项，放到box中
// 1. 定时器
// 2. 生成一个随机数 0 ~ 9
// 3. 放到box box.innerHTML
// 生成随机数
function randNum(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
var flag = false; // 当前抽奖的状态
var t = null; // 准备一个变量 ，接受定时器结果
box.onclick = function () {
if (!flag) {
// 开始抽奖
t = setInterval(function () {
// 生成一个0 ~ 9的随机数
var num = randNum(0, 9);
var text = arr[num];
box.innerHTML = text;
}, 200);
// 把抽奖的状态改成正在抽奖
flag = true;
} else {
// 停止抽奖 做的是什么事情
flag = false;
clearInterval(t);
}
};
</script>
案例四：抽奖案例按钮版
<style>
div {
width: 500px;
height: 100px;
border: 5px solid red;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
}
body {
text-align: center;
}
</style>
<body>
<div id="box">开始抽奖</div>
<button id="start">开始</button>
<button id="end">结束</button>
</body>
<script>
var arr = [
"谢谢惠顾",
"再来一次",
"身体健康",
"试卷一套",
"想屁吃",
"彩票一张",
"沙县小吃",
"劳斯莱斯五元优惠券",
"别墅一套",
"袜子一双",
"霸王洗发水",
];
// 点击开始按钮 开始抽奖
// 点击结束按钮 结束抽奖
var t = null; // 用来接受 定时器的结果
// 生成随机数
function randNum(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
start.onclick = function () {
// 根据t判断是否应该生成一个定时器
if (t) {
return;
}
t = setInterval(function () {
// 生成一个0 ~ 9的随机数
var num = randNum(0, 9);
var text = arr[num];
box.innerHTML = text;
}, 200);
};
end.onclick = function () {
clearInterval(t);
t = null;
};
</script>
五.初识同步异步
代码的异步执行
- 什么是非异步执行代码
- 按照从上到下的顺序， 从左到右顺序
- 如果上一句没有执行完，那么下一句代码等待
- 什么是异步代码
- 当代码执行遇到异步的时候，会把该代码放到 异步队列 中等待
- 等所有的同步代码代码完毕，开始执行 异步队列 的代码
- 两个定时器都是异步代码
- 两个定时器
- 都是异步代码
- 都是先执行定时器外面的代码，后执行定时器里面的代码
// console.log(1);
// for (var i = 1; i < 100000; i++) {}
// console.log(2);
// console.log(1);
// setTimeout(() => {
// console.log("异步代码");
// }, 2000);
// console.log(2);
console.log(1);
setTimeout(() => {
console.log("异步代码");
}, 0);
console.log(2);
六.BOM介绍
BOM Browser Object Modal
- 统一语法 window.xx
window介绍
- 浏览器内置的一个对象，包含操作浏览器的方法
x , window可以不写
示例 alert() window.alert() - 特点
1. 在各个浏览器表现不一
2. 不能用css控制
console.log(window.innerHeight);
console.log(window.innerWidth);
文档窗口的尺寸
宽度 document.documentElement.clientWidth
高度 document.documentElement.clientHight
注意 获取的尺寸不包含滚动条的，滚动条是浏览器的内容
console.log(document.documentElement.clientHeight);
console.log(document.documentElement.clientWidth);
console.log("========");
console.log(window.innerHeight);
console.log(window.innerWidth);
浏览器的弹出层
浏览器的弹出层
1. 提示框
- 语法 window.alert('提示文本')
- 形式 一个提示文本 + 一个确认
2. 询问看
- 语法 window.confirm('提示文本')
- 形式 一个提示文本 + 确认 + 取消
- 返回值
认
false 点击取消
3. 输入框
- 语法 window.prompt('提示文本')
- 形式 一个输入框 + 确认 + 取消
- 返回值
内容的字符串格式
点击取消 null
// var res = window.confirm("提示文本");
// console.log(res);
var res = window.prompt("提示文本");
console.log(res);
浏览器的常见事件
- load
- 语法 window.onload = function() {}
- 作用 当页面所有外部资源（img js 音频 视频）加载完毕之后触发
- resize
- 语法 window.onresize = function() {}
- 作用 页面尺寸发生修改的时候触发
- scroll
- 语法 window.onscroll = function() {}
- 作用 页面滚动条发生改变的时候触发
window.onload = function () {
console.log("资源加载完毕");
};
window.onresize = function () {
console.log("尺寸改变了");
};
window.onscroll = function () {
console.log("滚");
};
浏览器的地址栏组成
- 协议 两台电脑通信，必须添加协议(http https file ftp), 浏览器会自动补全协议
- 域名(ip) 电脑的唯一表示，由于ip地址不方便记忆，产生了域名
- 端口
端口可以自由分配， 只要没有占用，就可以使用
http 默认端口 80
https 默认端口443 - 路径 找到文件的地址 用/分割
- 数据 地址栏可以携带内容， 携带的内容用?拼接在地址栏后面，如果有多条数据，用&符号进行链接
- 哈希值(hash) 地址栏后面可以携带哈希值(#拼接在后面)，用来进行单页面跳转
操作地址栏 - location对象
- href属性 读写浏览器地址栏的内容
- 读
-> 语法 window.location.href
-> 得到是该页面在地址栏完整的地址
- 写
-> 语法 window.location.href = ‘地址’
-> 作用 修改地址栏的地址 跳转 - search属性 获取地址栏上面的数据(查询字符串的内容), 包含问号
- window.location.search - hash属性 获取地址栏上面的hash值 包含#
- window.location.hash - reload方法
- 语法 window.location.reload
- 作用 重新加载页面(刷新)
// console.log(window.location.href);
// box.onclick = function () {
// window.location.href = "http://www.baidu.com";
// };
// search
// console.log(window.location.search);
// hash
// console.log(window.location.hash);
// reload
reload.onclick = function () {
window.location.reload();
};
扫一扫
639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
