Day04---Web前端基础
定时器的实际应用
开发者，我们基于定时器结合js操作css样式或者html代码，就可以实现各种的酷炫的动态交互效果了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 150px;
height: 150px;
background: red;
}
.box2{
position: absolute;
}
</style>
</head>
<body>
<!-- <div class="box1"></div>-->
<!-- <script>-->
<!-- document.querySelector(".box1").onclick = function(){-->
<!-- console.log(this); // 在方法中，可以通过this获取当前对象-->
<!-- var num = 0;-->
<!-- // 使用定时器集合css样式实现动画的核心就是让整个过程中涉及到的数值在定时器中进行计算-->
<!-- setInterval(()=>{-->
<!-- this.style.borderRadius = `${num++}px`;-->
<!-- }, 24);-->
<!-- }-->
<!-- </script>-->
<!-- <div class="box2"></div>-->
<!-- <script>-->
<!-- var box2 = document.querySelector(".box2")-->
<!-- box2.style.left = 0;-->
<!-- var num = 1;-->
<!-- var t;-->
<!-- box2.onclick = ()=>{-->
<!-- clearInterval(t);-->
<!-- t = setInterval(()=>{-->
<!-- num *= 1.1; // 实现先慢后块（ease-in）-->
<!-- console.log(num);-->
<!-- box2.style.left = `${num}px`;-->
<!-- if(num>=1200){-->
<!-- clearInterval(t);-->
<!-- }-->
<!-- }, 24);-->
<!-- }-->
<!-- </script>-->
<div class="box3"></div>
<script>
var box3 = document.querySelector(".box3");
box3.style.opacity = 1; // 设置不透明
var t;
box3.onclick = ()=>{
clearInterval(t);
t = setInterval(()=>{
box3.style.opacity-=0.01;
if(box3.style.opacity < 0){
box3.style.display = "none";
clearInterval(t);
}
},24);
}
</script>
<div></div>
</body>
</html>
模态框添加动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{margin: 0; padding: 0;}
.messagebox{
width:100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: rgba(0, 0, 0,.3);
display: none;
}
.messagebox .warp{
width: 600px;
height: 350px;
background: #fff;
position: absolute; /* 子元素相对于父定位元素做绝对定位 */
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-radius: 10px;
box-shadow: 0 15px 30px 0 rgb(0,0,0);
display: none;
}
.messagebox .btn{
width: 120px;
height: 42px;
line-height: 42px;
text-align: center;
color: #fff;
font-size: 16px;
background: #337ecc;
border: none;
outline: none;
border-radius: 4px;
cursor: pointer;
transition: all .3s linear;
}
.messagebox .btn:hover{
background: #409eff;
}
.messagebox .close{
width: 25px;
height: 25px;
display: block;
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
}
.messagebox .close svg{
max-width: 100%;
max-height: 100%;
transition: all .3s linear;
}
.messagebox .close:hover svg{
color: #409eff;
}
.messagebox .title{
height: 42px;
line-height: 42px;
font-size: 24px;
margin-top: 15px;
padding-left: 15px;
color: #333;
border-bottom: 1px solid rgba(0, 0, 0, .3);
}
.messagebox .message{
margin: 15px;
max-height: 180px;
overflow: auto;
}
.messagebox .footer{
position: absolute;
right: 25px;
bottom: 25px;
}
</style>
</head>
<body>
<button class="login-btn">登录</button>
<div class="messagebox">
<div class="warp">
<span class="close">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
</svg>
</span>
<p class="title">弹窗标题</p>
<div class="message">
弹窗的内容弹窗的内容弹窗的内容弹窗的内容弹窗的内容弹
</div>
<div class="footer">
<button class="btn confirm">确定</button>
<button class="btn cancel">取消</button>
</div>
</div>
</div>
<script>
var btn = document.querySelector(".login-btn");
var confirmbtn = document.querySelector(".messagebox .confirm");
var cancelbtn = document.querySelector(".messagebox .cancel");
var closebtn = document.querySelector(".messagebox .close");
var messagebox = document.querySelector(".messagebox");
var warp = document.querySelector(".messagebox .warp");
var bg_timer;
confirmbtn.onclick = function(){
alert("您点击了确定");
}
btn.onclick = show // 此处，只是赋值函数而已，真正要执行的函数的时候，是在用户点击时，所以show不能加上小括号
cancelbtn.onclick = hide
closebtn.onclick = hide
function show(){
// 显示窗口
let opacity = 0;
messagebox.style.opacity = opacity;
messagebox.style.display = "block";
// 定时器，显示背景
clearInterval(bg_timer);
bg_timer = setInterval(()=>{
opacity+=0.1;
messagebox.style.opacity = opacity;
if(opacity>=1){
clearInterval(bg_timer);
}
},24);
warp.style.display = "block";
}
function hide(){
// 隐藏窗口
let opacity = 1;
// 定时器，显示背景
clearInterval(bg_timer);
bg_timer = setInterval(()=>{
opacity-=0.1;
messagebox.style.opacity = opacity;
if(opacity<=0){
clearInterval(bg_timer);
messagebox.style.display = "none";
warp.style.display = "none";
}
},24);
}
</script>
</body>
</html>
eval内置解释器函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea name="code" cols="30" rows="10"></textarea>
<br>
<button>运行</button>
<script>
var code = document.querySelector('textarea[name="code"]')
var btn = document.querySelector('button')
btn.onclick = ()=>{
try {
eval(code.value);
}catch (e) {
console.log(e.message);
}
}
</script>
</body>
</html>
URL地址栏参数的编码处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// content = "内置函数+/"
// // 编码
// url_content = encodeURI(content)
// console.log(url_content)
// // 解码
// result = decodeURI(url_content)
// console.log(result)
// 上面的encodeURI与decodeURI仅仅能对普通内容进行编码转换，但是不能对特殊符号进行内容转换。
content = btoa("+=")
url_content = encodeURIComponent(content)
console.log(url_content)
// 解码
result = decodeURIComponent(url_content)
console.log(result)
</script>
</body>
</html>
打开与关闭窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="closecurrent">关闭当前页面</button>
<br>
<input type="text" name="baidu"><button class="search">搜索</button><button class="closepage">关闭页面</button>
<script>
var baidu = document.querySelector('input[name="baidu"]')
var search = document.querySelector('.search')
var closepage = document.querySelector('.closepage')
var closecurrent = document.querySelector('.closecurrent')
var w;
search.onclick = ()=>{
console.log(baidu.value);
// 替换当前窗口url，访问对应页面
// location.href=`https://www.baidu.com/s?wd=${baidu.value}`
// 新建窗口再打开url地址
w = open(`https://www.baidu.com/s?wd=${baidu.value}`, '_blank')
// open(`https://www.baidu.com/s?wd=${baidu.value}`, '_self')
// open(`https://www.baidu.com/s?wd=${baidu.value}`, '_top')
}
/**
* open(url=URL地址，target=打开方式, windowname=窗口名称)
* URL地址，新页面的地址
* 打开方式，就是a标签的target属性值
* _self 在当前页面窗口中打开url地址
* _blank 在新建浏览器标签页中打开url地址
* _top 在顶级页面窗口中打开url地址
* 窗口名称，就是新开浏览器窗口，绑定该窗口为指定名称，绑定后续所有的浏览器操作
*
* 返回值就是新页面的window对象
*/
closepage.onclick = ()=>{
// w就是上面open打开的浏览器页面的窗口对象，通过窗口对象就可以关闭指定窗口
w.close()
}
closecurrent.onclick = ()=>{
close(); // 相当于 window.close()，默认情况下window代表的就是当前页面窗口对象
}
</script>
</body>
</html>
base64编码处理函数
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// base64是一个网络数据传输的数据转码函数，主要目的是为了避免在网络数据传输过程中，二进制数据与多字节数据的丢失。
// python中也有内置模块base64模块提供了 base64.b64encode()、base64.b64decode()
data = '{"name": "xiaoming","age": 17}'
content = btoa(data) // base64编码函数
// console.log(content) // "eyJuYW1lIjogInhpYW9taW5nIiwiYWdlIjogMTd9"
// content = "eyJuYW1lIjogInhpYW9taW5nIiwiYWdlIjogMTd9"
// data = atob(content) // 解码函数
// console.log(data) // {"name": "xiaoming","age": 17}
// // base64不是加密，而是一种编码处理而已。
</script>
</body>
</html>
对象
js中，虽然是函数优先的编程语言，但是使用上也是基于对象的，所以在js中也存在万物皆为对象的情况。
对象的创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/**
* 对象的创建
*/
// 1. 通过字面量{}创建
var xiaoming1 = {}; // 空对象
var xiaoming2 = { // 有属性有方法的对象
age: 18,
sex: true,
desc(){
console.log("js对象的方法");
console.log(this.age, this.sex); // this表示当前对象
}
}
console.log(xiaoming1);
console.log(xiaoming2);
// 对象的属性调用
console.log(xiaoming2.age)
// 对象的方法调用
xiaoming2.desc()
// 2. 通过系统对象Object来创建
var xiaoming3 = new Object(); // 空对象
var xiaoming4 = Object(); // 空对象
// Object是javascript提供给开发者创建空对象使用的.
// Object内部基本都是一些不对外开放的方法属性
// Object是javascript内部的一切对象的基本对象[构造函数]
console.log(xiaoming3);
console.log(xiaoming4);
// 3. 通过构造函数来创建对象
function Humen(name="匿名对象",age=0){
this.name = name;
this.age = age;
this.say = function(){
console.log("我是Humen里面的代码");
}
}
var xiaoming5 = new Humen("小明", 17);
console.log(xiaoming5);
//4. 通过类创建对象
// 类名 后面必须跟着花括号，花括号内部就是类里面的代码
// 原生js中的类只存在实例方法或实例属性，没有类属性或类方法
class Person{
// 构造函数，方法名必须叫constructor，等同于 python的类中的__init__方法
constructor(name, age) {
this.name = name;
// 等同于python里面的 self.age = age
this.age = age;
}
say(){
// 对象的方法，将来在类被实例化的时候，可以让对象调用
console.log(`我叫${this.name}，我今年${this.age}岁！`)
}
}
var xiaoming6 = new Person("小明",18)
xiaoming6.say();
</script>
</body>
</html>
对象的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var xiaoming = { // 有属性有方法的对象
age: 18,
sex: true,
desc(){
console.log("js对象");
}
}
// 可以给对象追加新属性或新方法，也可以针对原有的属性值或方法进行修改
xiaoming.name = "小明";
// 给对象追加方法，在对象的外部，追加方法，不能使用箭头函数
xiaoming.say = function(){
console.log(`我叫${this.name},我今年${this.age}岁!`);
}
console.log(xiaoming);
// 访问对象的属性
console.log(xiaoming.name);
console.log(xiaoming.age);
// 访问对象的方法
xiaoming.say();
</script>
</body>
</html>
this伪对象
默认情况下，在对象的方法中，this代表的就是当前对象，在函数或者函数外界，this代表的是当前页面的超全局对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 在函数外界，this就是window对象
// console.log(this);
// console.log(window);
// console.log(this === window);
// // 在对象的方法中，this代表的就是当前对象
// class Humen{
// constructor(name, age) {
// this.name = name;
// this.age = age;
// }
// say(){
// return `你好，我叫${this.name}!`
// }
// }
//
// var xiaohong = new Humen("小红", 18);
// console.log(xiaohong);
// console.log( xiaohong.say() ); // // say是xiaohong的方法，所以this代表小红
//
// var xiaoming = new Humen("小明", 13);
// console.log(xiaoming);
// console.log( xiaoming.say() ); // // say是xiaoming的方法，所以this代表小明
// 所以要看清楚，方法或函数在调用时，左边的变量是谁？
var name = "window下的变量";
function desc(){
return this.name;
}
class Company{
constructor(name) {
this.name = name;
}
}
var c = new Company("小明科技有限科技公司")
c.desc = desc;
console.log(c.desc()); // 小明科技有限科技公司
class Person{
constructor(name) {
this.name = name;
}
}
var p = new Person("张三丰");
p.desc = desc;
console.log( p.desc() ); // 张三丰
console.log(p.desc === c.desc); // true
// 请问这里会显示什么呢？
console.log( desc() ); // desc调用时左边时没有任何的变量的，所以默认是window调用，因此在desc函数中，this代表的就是window对象
</script>
</body>
</html>
函数或方法与作用域的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// // js属于解释器语言，所以针对代码的运行实际上分了2个阶段：词法解析 与 代码执行。
// // 普通函数与匿名函数除了在代码的运行阶段上分配空间的时间不一样以外，其他的操作都是一样的。
// // 普通函数分配空间是在词法解析阶段分配的。
// // 匿名函数分配空间是在代码执行阶段分配的。
// function abc(){
// console.log("hello")
// }
// var func = abc // 在js中实际上分2部执行的， 词法解析阶段先执行 var func; 代码执行阶段后执行 func = abc;
// func();
// abc();
//
//
// // 箭头函数实际上并不是匿名函数的简写，而是一种特殊的匿名函数。
// // 箭头函数分配空间也是在代码执行阶段分配的。
// let fn = (a,b) => { // 箭头函数的参数列表，在只有一个形参的情况下， let fn = a => {}
// return a+b
// }
// console.log( fn(10,20) );
//
// // 简写效果：
// let fn2 = (a,b) => a+b; // 如果箭头函数的代码段中只有一行代码，可以省略return
// console.log( fn2(10,20) );
// // 三种函数实际上都可以作为函数的参数使用，在这种情况下，实际上就会存在一些细微的区别。
// var arr1 = ['a', '1', '10', '102', 11,51,31,32,33,40, 'w', 'c']
// // 1. 把普通函数作为参数传递
// function fn(a,b){
// return a-b // 正序
// // return b-a // 倒序
// }
//
// // 数组排序，按数字大小排序，忽略字母
// arr1.sort(fn)
// console.log(arr1);
// // 2. 把普通匿名函数作为参数传递
// var arr1 = ['a', '1', '10', '102', 11,51,31,32,33,40, 'w', 'c']
// arr1.sort(function(a, b){
// // return a-b;
// return b-a;
// })
// console.log(arr1)
// // 3. 把箭头函数作为参数传递
// var arr1 = ['a', '1', '10', '102', 11,51,31,32,33,40, 'w', 'c']
// arr1.sort((a, b)=>a-b); // 正序
// // arr1.sort((a, b)=>b-a); // 倒序
// console.log(arr1)
/**
* 箭头函数与匿名函数的区别
*/
// // 案例1：
// class Bloom{
// constructor(time) {
// this.time = time;
// this.t = null;
// }
// has_time(){
// // 倒计时功能
// if(this.time>0){
// clearInterval(this.t);
// // this.t = setInterval(function(){ // 匿名函数中，this代表的window，当前匿名函数实际上是被setInterval调用的，而setInterval实际上时window对象提供的，所以this代表的window对象
// this.t = setInterval(()=>{ // 箭头函数中，this.代表的是Bloom的实例对象，箭头函数会复刻父级作用域下的this
// console.log(`this.time=${this.time}`, this);
// this.time = this.time - 1;
// if(this.time < 1){
// console.log("爆炸！！！");
// }
// }, 1000);
// }
// }
// }
//
// var b = new Bloom(3600)
// b.has_time()
// // 案例2：
// var xiaoming = {
// age: 18,
// name: "小明",
// }
//
// // xiaoming.say = ()=>{ // 使用箭头函数，箭头函数会把父级作用域下的this复刻到函数内部，则this指向window对象 ===> 我叫,我今年undefined岁!
// xiaoming.say = function(){ // 使用匿名函数，会把this指向调用当前方法的对象，则this当前对象 ===> 我叫小明,我今年18岁!
// console.log('this=',this);
// console.log(`我叫${this.name},我今年${this.age}岁!`);
// }
// console.log(xiaoming);
// xiaoming.say();
/**
* 箭头函数与匿名函数在作用域上表现不同。
* 匿名函数，会this指向到调用当前方法的对象，
* 箭头函数，会把this指向到父级作用域上的this。
*/
// js中的作用域分全局作用域与局部作用域。
// 其中，函数外就属于全局作用域，而函数内就属于局部作用域。
// 全局作用域下的变量，可以在任意位置上使用，叫全局变量，一旦定义以后，直到当前网页代码执行结束以后才会被浏览器回收。
// 局部作用域下的变量，只能在当前函数中使用，叫局部变量，在函数运行时创建，函数运行结束以后被浏览器回收，下一次函数被调用，则会被再次创建。
/**
* 全局变量具有穿透性，可以直接在函数内部调用或修改值
* @type {number}
*/
// var num = 10; // 在函数外的变量可以直接使用到函数内部
// function fn1(){
// console.log(num); // 10
// num = 20; // 对全局变量进行重新赋值
// function fn2(){
// console.log(num); // 20
// }
// fn2();
// }
// fn1();
// console.log(num); // 20
// var num = 10; // 在函数外的变量属于全局变量，但是当全局变量与局部变量一样时，函数内会优先使用局部变量
// function fn1(){
// console.log(num); // undefined
// var num = 20; // 这句代码与上面的不一样的时，多了一个var关键字
// function fn2(){
// console.log(num); // 20
// }
// fn2();
// }
// fn1();
// console.log(num); // 10
// var num = 10; // 在函数外的变量属于全局变量，但是当全局变量与局部变量一样时，函数内会优先使用局部变量
// function fn1(){
// console.log(num); // undefined
// // 这句代码与上面的不一样的是，var换成了let关键字，
// // let与var一样也是可以声明变量，但是不一样的是2点：
// // 1. let的作用域范围时花括号，var的作用域范围时函数
// // 2. 在局部作用域下，let关键字声明的变量，必须严格按照先声明后调用来执行的。
// let num = 20;
// function fn2(){
// console.log(num); // 20
// }
// fn2();
// }
// fn1();
// console.log(num); // 10
</script>
</body>
</html>
全局变量与局部变量的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/**
* js中的变量查找，是从内往外按作用域逐层查找的: 当前作用域->父级作用域->顶级作用域
* 查找过程中，如果找到则取值，停止查找流程。如果直到顶级作用域下还是没有对应的变量，则报错。
* 注意：js中，函数名、类名、变量名都是变量，最终在内存中存储的方式都是函数。
*
*
*/
// var num = 0;
// // 全局作用域[顶级作用域]
// function fn1(){ // fn1作用域
// console.log(num); // 查找到当前作用域下，已经存在了num，只是没有赋值，所以是undefined
// var num = 10;
// function fn2(){ // fn2作用域，fn1是fn2的父级作用域
// let num = 20;
// console.log(num);
// }
// fn2();
// }
// fn1();
// 面试题，一套非常坑人的题目
function fn1(){
// console.log(num); // 为什么31与32存在时，31行会报错呢？因为32中的num没有使用var或者let，所以在词法阶段，根本没有分配到空间，也没有创建对应的变量。
// num = 2;
function fn2(){
num = 2; // 此处num首次出现却不使用var声明时，这该变量会默认作为window对象的属性存在，js中调用window的属性或方法，是不需要写上window的。
console.log(num); // 2
}
fn2();
console.log(num); // 2
}
fn1();
console.log(num); // 2
</script>
</body>
</html>
内置对象
build-in Object，也叫内建对象，由浏览器提供给开发者直接使用的。
文档地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects
Number
数值对象，在js中一切的数值类型数据,都附带Number对象的属性方法，可以直接使用Number而不需要单独创建对象。
| 方法 | 描述 |
|---|---|
toFixed(n) |
保留n个小数位 |
| toLocaleString() | 千分位数字格式化，逗号分隔符格式 |
| toPrecision(n) | 格式化数值的显示长度（n的取值范围在[1,21]）。 |
Math
数学对象, 是一个静态对象，所以直接使用Math对象即可，不需要使用new创建对象，所谓静态对象，可以理解为python中的单例对象。
| 方法/属性 | 描述 |
|---|---|
Math.round(num) |
对数值num进行四舍五入取整。 |
Math.ceil(num) |
对数值num进行向上取整，也叫进一法取整。 |
Math.floor(num) |
对数值num进行向下取整，保留整数部分，去除小数部分，也叫地板取整或舍一法取整。 |
| Math.abs(num) | 去数值num的绝对值 |
| Math.max(a,b,c,d...) | 求最大值 |
| Math.min(a,b,c,d...) | 求最小值 |
Math.random() |
获取范围在[0,1)内的随机数值。 |
| Math.PI | 圆周率 |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// var num1 = -10
// console.log(Math.abs(num1)); // 绝对值，非负数的绝对值是自身，负数的绝对值是去除-号后的数值
// var num2 = 3.14
// console.log(Math.round(num2)); // 3
// console.log(Math.ceil(num2)); // 4
// var num3 = 3.5
// console.log(Math.round(num3)); // 4
// console.log(Math.floor(num3)); // 3
// // 参数可以有0~多个
// console.log(Math.max(3,33,4)); // 最大值
// console.log(Math.min(3,33,4)); // 最大值
// console.log(Math.pow(3,3)); // 幂运算
// console.log( 3 ** 3); //上一句的简写
/**
* 生成随机数
*/
// console.log( Math.random() );
// 生成0~100之间的随机数
// console.log(Math.random() * 100);
// 生成0~100之间的随机整数
// console.log(parseInt(Math.random() * 100));
// // 生成一个指定范围的整数
// function randint(min, max){
// return parseInt(Math.random() * (max+1-min)) + min;
// }
// console.log( randint(50,55) );
console.log(Math.PI); // 圆周率，3.141592653589793
</script>
</body>
</html>
Date
日期对象，获取浏览器所在系统的时间相关信息。
基本使用
// 获取当前时间的时间日期对象
var d = new Date();
// 获取指定日期时间的时间日期对象
var d = new Date("2022-06-17 12:30:30");
| 方法/属性 | 描述 |
|---|---|
getFullYear() |
从 Date 对象以四位数字返回年份。 |
getMonth() |
从 Date 对象返回月份 (0 ~ 11)。 |
getDate() |
从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() |
从 Date 对象返回一周中的某一天 (0 ~ 6)。周日为0 |
getHours() |
返回 Date 对象的小时 (0 ~ 23)。 |
getMinutes() |
返回 Date 对象的分钟 (0 ~ 59)。 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getSeconds() |
返回 Date 对象的秒数 (0 ~ 59)。 |
getTime() |
返回 1970 年 1 月 1 日至今的毫秒数。 |
| toDateString() | 把 Date 对象的日期部分转换为字符串。 |
toJSON() |
以 JSON 数据格式返回日期字符串。 |
| toLocaleDateString() | 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 |
| toLocaleTimeString() | 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 |
| toLocaleString() | 根据本地时间格式，把 Date 对象转换为字符串。 |
| toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var d = new Date(); // 获取当前客户端系统的当前时间
// console.log(d,typeof d); // Thu Jun 23 2022 20:02:01 GMT+0800 (中国标准时间) "object"
// // 直接打印日期时间对象，会默认执行对象的toString方法，这个方法类似python中的__str__方法或者__repr__方法。
// // 直接基于隐式类型转换，获取毫秒时间戳
// console.log(d - 0);
// console.log(parseInt((d - 0)/1000)); // 获取秒时间戳
// // 获取毫秒时间戳的方法
// console.log(d.getTime()); // 获取时间戳[单位:毫秒,ms]
// console.log(Date.now()); // 获取时间戳[单位:毫秒,ms]
// // 获取年-月-日
// console.log(d.getFullYear()); // 获取4位数字表单的年份
// console.log(d.getMonth()+1); // 获取一年的第几个月
// console.log(d.getDate()); // 一个月中的第几天
// console.log(d.getDay()); // 一个星期中的第几天,星期几
// // 补0函数
// let fillzero = (num) => num<10?'0'+num:num;
// // 格式化输出日期字符串
// console.log(`${d.getFullYear()}-${fillzero(d.getMonth()+1)}-${fillzero(d.getDate())}`)
// // 获取时分秒
// console.log(d.getHours());
// console.log(d.getMinutes());
// console.log(d.getSeconds());
// console.log(d.getMilliseconds()); // 毫秒,1000ms = 1s
//
// // 获取字符串格式的日期时间
// let fillzero = (num) => num<10?'0'+num:num;
// var t = `${d.getFullYear()}-${fillzero(d.getMonth()+1)}-${fillzero(d.getDate())} ${fillzero(d.getHours())}:${fillzero(d.getMinutes())}:${fillzero(d.getSeconds())}`
// console.log(t);
// // Date本身提供的其他格式化日期时间
// console.log(d.toLocaleDateString()); // 2020/10/17
// console.log(d.toLocaleTimeString()); // 上午11:38:13
// console.log(d.toLocaleString()); // 2020/10/17 上午11:38:32
console.log(d.toJSON()); // 2022-06-23T12:12:48.930Z
// 快速格式化一个日期时间字符串
let ret = d.toJSON().replaceAll(/[ZT]/g, " ")
console.log(ret)
// 计算2个时间的相差的毫米数
var date1 = "2020-10-01 12:00:00";
var date2 = "2020-10-11 12:00:00";
timer1 = new Date(date1); // 此处是代表指定的一个时间对象,并非当前时间的对象
timer2 = new Date(date2);
console.log( timer2-timer1 );
console.log( Math.abs(parseInt((timer2-timer1)/1000)) ); // 获取两个时间的秒差
</script>
</body>
</html>
String
| 方法 | 描述 |
|---|---|
concat() |
拼接两个或更多字符串，并返回新的字符串。 |
fromCharCode() |
将 Unicode 编码转为字符，支持ASCII编码转换字符。 |
indexOf() |
返回某个指定的字符串值在字符串中首次出现的下标位置。 |
| lastIndexOf() | 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置 |
| repeat() | 复制字符串指定次数，并将它们连接在一起返回。 |
search() |
查找与正则表达式相匹配的下标。 |
match() |
查找找到一个或多个正则表达式的匹配。 |
replace() |
在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。 |
replaceAll() |
在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。 |
split() |
把字符串分割为字符串数组，支持按正则表达式进行模糊分割 |
startsWith() |
查看字符串是否以指定的子字符串开头。 |
endsWith() |
判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。 |
includes() |
查找字符串中是否包含指定的子字符串。 |
slice() |
提取字符串的片断，并在新的字符串中返回被提取的部分。 |
substr() |
从起始索引号提取字符串中指定数目的字符。 |
substring() |
提取字符串中两个指定的索引号之间的字符。 |
toLowerCase() |
把字符串转换为小写。 |
toUpperCase() |
把字符串转换为大写。 |
trim() |
去除字符串两边的空白。 |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// var str = "abcdef中文"
// // 获取字符串长度
// console.log(str.length); // 8 中文算1个长度
//
// // 获取字符串中的字符，可以通过下标操作，从0开始，不支持切片，也不支持负数下标
// console.log(str[0]) // 获取第一个字符
// console.log(str[str.length-1]) // 获取最后一个字符
// js中的字符串与python一样，是字符类型，不支持修改部分字符的操作
// console.log(str.includes("abc")); // true, 判断指定的子串是否是属于当前字符串的一部分
// console.log(str.endsWith("ef")); // false, 判断结尾
// console.log(str.startsWith("abc")); // true, 判断开头
// var str1 = "abcdef abce"
// console.log(str1.indexOf("c")); // 2 首次出现的位置下标
// console.log(str1.lastIndexOf("c")); // 9 最后一次出现的位置下标
// 转换编码[根据编码值获取字符]
// console.log(String.fromCharCode(0x4e2d, 0x6587));
// console.log(String.fromCharCode(65, 97));
// repeat填充
// console.log("abc".repeat(3)); // abcabcabc
// // search查找指定字符首次出现的下标位置
// console.log("hello".search("o"));
//
// // match匹配指定字符
// console.log("13312345678".match(/1[3-9]\d{9}/))
// // split 分割，把字符串分割成数组
// console.log("湖南省-长沙市-xx区".split("-")) // ["湖南省", "长沙市", "xx区"]
// console.log("我是中国人".split("")); // ["我", "是", "中", "国", "人"]
//
// // 替换一次
// console.log("我是中国人".replace("我", "大家都")); // 大家都是中国人
// console.log("hello python，hello, javascript".replace("hello", "你好")); // 你好 python，hello, javascript
//
// // 替换多次
// console.log("hello python，hello, javascript".replaceAll("hello", "你好")); // 你好 python，你好, javascript
// // slice(开始下标，结束下标) 切片操作，切取范围是 (开始下标, 结束下标] 左闭(包含)右开(不包含)
// // slice 支持负数下标操作，所以slice与python中的切片几乎是一样的操作，但只支持2个参数
// mobile = "13312345678";
// console.log(mobile.slice(0, -3)); // 133
//
// // substr(开始下标，截取长度)
// mobile = "13312345678";
// console.log(mobile.substr(3, 4)); // 1234
//
// // substring(开始下标，结束下标)
// mobile = "13312345678"
// console.log(mobile.substring(3)); // 12345678, 从开始下标，一直截取到最后
// console.log(mobile.substring(3, 7)); // 1234, 从开始下标，一直截取到指定下标
// 字母转换大/小写
// console.log("hello，小明".toUpperCase()); // HELLO，小明
// console.log("HELLO，小明".toLowerCase()); // hello，小明
// 清除字符窜两边的空格或空白字符
var str3 = " hello "
var res = str3.trim();
console.log(res, res.length);
</script>
</body>
</html>
