小米页面，时间倒计时，所有笔记

于 2024-04-12 17:10:34 发布
阅读量674 收藏 17
点赞数 23
文章标签： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75327256/article/details/137685801
版权

小米页面：

框架： 

<!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>
    <link rel="stylesheet" href="../xiaomi2.css"
</head>
<body>
    <div class="zong">
    <div class="header">
        <div class="content">
            <div class="header-left">
                <a href="#">小米官网</a>
                <span class="sep">|</span>
                <a href="#">小米商城</a>
                <span class="sep">|</span>
                <a href="#">小米澎湃OS</a>
                <span class="sep">|</span>
                <a href="#">loT</a>
                <span class="sep">|</span>
                <a href="#">云服务</a>
                <span class="sep">|</span>
                <a href="#">天星数科</a>
                <span class="sep">|</span>
                <a href="#">有品</a>
                <span class="sep">|</span>
                <a href="#">小爱开放平台</a>
                <span class="sep">|</span>
                <a href="#">资质执照</a>
                <span class="sep">|</span>
                <a href="#">协议规则</a>
                <span class="sep">|</span>
                <a href="#">下载app</a>
                <span class="sep">|</span>
                <a href="#">SelectLocal</a>
               

            </div>
            <div class="header-right">
                <a href="#">登录</a>
                <span class="sep">|</span>
                <a href="#">注册</a>
                <span class="sep">|</span>
                <a href="#">消息通知</a>
                <span class="sep">|</span>
                <span class="shopping"><a href="#">购物车
                    <script src="../xmxm/iconfont.js"></script>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwuche"></use>
                      </svg>
                </a></span>
            </div>
        </div>
    </div> 

    <div class="top-nav">
        <div class="content">
            <div class="top-nav-left"></div>
            <div class="top-nav-mid">
                <ul>
                    <li><a href="#">xiaomi手机</a></li>
                    <li><a href="#">redmi手机</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">平板</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">服务中心</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="top-nav-right">
                <form action="#">
                    <input type="text">
                    <span><script src="../xmxm/iconfont.js"></script>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                      </svg></span>
                </form>
            </div>
        </div>
    </div>

    <div class="dakuang">
        <div class="left">
            <a href="#">手机</a>
            <a href="#">电视</a>
            <a href="#">家电</a>
            <a href="#">笔记本</a>
            <a href="#">平板</a>
            <a href="#">出行 穿戴</a>
            <a href="#">健康 儿童</a>
            <a href="#">生活 箱包</a>
            <a href="#">智能 路由器</a>
            <a href="#">电源 配件</a>
            
        </div>
        <div class="lunbo">
           <a href="#" target="_blank"><img src="../素材/555.webp"></a> 
           <a href="#" target="_blank"><img src="../素材/222.webp"></a> 
           <a href="#" target="_blank"><img src="../素材/333.webp"></a> 
           <a href="#" target="_blank"><img src="../素材/444.webp"></a> 
           
        </div>
        <div class="zuojian"></div>
        <div class="youjian"></div>
        <div class="xiaoyuandian"></div>

    </div>
<div class="xia">
        <ul>
            <li><a href="#"><img src="../素材/1.png">保障业务</a></li>
            <li><a href="#"><img src="../素材/2.png">企业团购</a></li>
            <li><a href="#"><img src="../素材/3.png">F码通道</a></li>
            <li><a href="#"><img src="../素材/4.png">米粉卡</a></li>
            <li><a href="#"><img src="../素材/5.png">以旧换新</a></li>
            <li><a href="#"><img src="../素材/6.png">话费充值</a></li>
        </ul>
        <div class="xiayou">
            <div class="xia2"></div>
            <div class="xia3"></div>
            <div class="xia4"></div>
    </div>
</div>
<div class="youdaohang">
    <div class="he1"><a href="#"><img src="../素材/11.png">手机APP</a></div>
    <div class="he2"><a href="#"><img src="../素材/22.png">个人中心</a></div>
    <div class="he3"><a href="#"><img src="../素材/33.png">售后服务</a></div>
    <div class="he4"><a href="#"><img src="../素材/44.png">人工客服</a></div>
    <div class="he5"><a href="#"><img src="../素材/55.png">购物车</a></div>
</div>
</div>
</html>

css： 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.content {
    width: 1226px;
    margin: 0 auto;
}

.header {
    height: 40px;
    background-color: #333;
    color: #B0B0B0;
    font-size: 12px;
}

.header .content {
    display: flex;
    justify-content: space-between;
}

.header-left {
    width: 769px;
}

.header-right {
    width: 250px;
}



.header .content a {
    font-size: 12px;
    color: #B0B0B0;
    line-height: 40px;


}

.header .sep {
    margin: 0 3.6px;
}

.header .shopping {
    margin-left: 20px;
}
.top-nav{
    height: 100px;
    background-color: white;
    overflow: hidden;

        }
.top-nav .content{
    display: flex;
    justify-content: space-between;
    }
.top-nav-left{
    width: 56px;
    height: 56px;
    background-image: url(https://inews.gtimg.com/newsapp_ls/0/13772180398/0/640);
    background-size: 56px;
    background-repeat: no-repeat;
    margin-top: 20px;
        }
.top-nav-mid ul{
    display: flex;
    justify-content: space-between;
    width: 700px;
    height: 100px;
    line-height: 100px;
        
     }
.top-nav-mid ul a{
    color: #333;
     }
.top-nav-right{
    padding-top: 25px;
    width: 296px;
    height: 100px;
    line-height: 100px;
    }
.top-nav-right form{
    position: relative;
    width: 296px;
    height: 50px;
     }
.top-nav-right input{
    position: absolute;
    left: 0;
    top: 0;
    width: 245px;
    height: 50px;
    vertical-align: middle;
    outline: none;
     }
.top-nav-right span{
        
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    width: 52px;
    height: 50px;
    line-height: 50px;
    border: 1px solid black;
    text-align: center;
    font-size: 24px
    
        }
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
     overflow: hidden;
  }
  .dakuang{
      margin-left: 146px;
      margin-right: 146px;
      margin-top: 14px;
      margin-bottom: 35px;
      width: 1226px;
      height: 460px;
      overflow:hidden;
      display: flex;
      float: left;
  
  }
.dakuang .lunbo{
      width: 4904px;
      height: 460px;
      animation: move 15s infinite;
      float: left;
 
}
.dakuang .lunbo img{
    width: 1226px;
    height: 460px;
    float: left;
    border: 0;
}
@keyframes move{
    0%,20%{
        margin-left: 0px;
    }
    25%,45%{
        margin-left: -1226px;
    }
    50%,70%{
        margin-left: -2452px;
    }
    75%,100%{
        margin-left: -3678px;
    }
}
.dakuang .left{
    width: 234px;
    height: 460px;
    background-color: rgba(105, 101, 101, .6);
    margin: 0;
    padding: 20px 0;
    display: block;
    
}
.left a{
    position: relative;
    display: block;
    padding-left: 30px;
    height: 42px;
    line-height: 42px;
    color: #FFFFFF;
    font-size: 14px;
}
.left a:hover{
    background-color:#FF6700;
}

.xia{
    margin:0 auto;
    width: 1240px;
    height: 170px;
    display: flex;
    justify-content:space-around;
}
.xia ul{
    width: 234px;
    height: 170px;
    background-color: #5F5750;
    left: 0;

}
.xia li{
    position: relative;
    float: left;
    width: 76px;
    height: 82px;
    padding: 0px 3px;
    display: flex;
   
    
}
.xia li a{
    display: block;
    font-size: 12px;
    color: #FFFFFF;
    padding: 18px 0px 0px;
    margin: 0 auto;
    text-decoration: none;
    opacity: 0.5;
}
.xia li a:hover{
    opacity: 1;
}
img{
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 4px;
}

.xiayou{
    width: 978px;
    height: 170px;
    display: flex;
    justify-content: space-between;
}
.xiayou .xia2{
    width: 316px;
    height: 170px;
    background-image: url(../素材/8dede2520f8dfff9c9b690af498cafe8.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
}

.xiayou .xia3{
    width: 316px;
    height: 170px;
    background-image: url(../素材/6b67117bc92924fb2ff0e7ad2be86084.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
} 

.xiayou .xia4{
    width: 316px;
    height: 170px;
    background-image: url(../素材/1ac77590368ff636d0b4f6a988133f55.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.youdaohang{
    position: fixed;
    width: 85px;
    height: 450px;
    background-color:#FFFFFF;
    top: 210px;
    right: 0px;
    border-collapse: collapse;

}

.youdaohang a{
    display: block;
    font-size: 15px;
    color:#B0B0B0;
    padding: 18px 0px 0px;
    margin: 0 auto;
    text-decoration: none;
}
.youdaohang .he1{
width: 85px;
height: 90px;
display: flex;
border:0.5px solid lightgray;
}
.youdaohang .he2{
    width: 85px;
    height: 90px;
    display: flex;
    border:0.5px solid lightgray;
}
.youdaohang .he3{
    width: 85px;
    height: 90px;
    display: flex;
    border:0.5px solid lightgray;
}
.youdaohang .he4{
    width: 85px;
    height: 90px;
    display: flex;
    border:0.5px solid lightgray;
}
.youdaohang .he5{
    width: 85px;
    height: 90px;
    display: flex;
    border:0.5px solid lightgray;
}

成果图：

倒计时：

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

<body>

    <h1>距离2024年7月3日暑假倒计时</h1>

    <h2 id="info"></h2>

    <script>

        setInterval(function () {

            let d = new Date();
        
            let dd = new Date(2024, 7, 3);

            let diff = dd - d;

            let time = new Date(diff);

            let p=new Date(0);

            let year = time.getFullYear() - 1970;

            let month = time.getMonth() - 1 ;

            let date = time.getDate() - 1;

            let hours = time.getHours() - 8;

            let minutes = time.getMinutes();

            let seconds = time.getSeconds();

            let info = document.getElementById('info');

            days_left = parseInt(diff / (1000 * 24 * 60 * 60));

            info.innerHTML = "还剩下" +year+"年"+ month + "个月" + date + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒" ;

        }, 1000);

    </script>

</body>

</html>

效果图：

全部笔记：
定位
默认有margin和padding
静态定位：static 不能使用偏移
相对定位（保留原来位置）：relative 相对于本身位置进行定位
绝对定位（不会保留原来位置）：absolute 如果离最近的上级具有相对定位，则相对于上级进行定位，如果上级没有相对定位，就相对于有相对定位的上级进行定位，如果一直没有上级有相对定位，则相对于浏览器进行定位（子绝父相）
固定定位（不会保留原来位置）：fixed 相对于浏览器可视窗口进行定位，不会随着页面的滚动而进行滚动
粘性定位：sticky 相对于浏览器可视区域进行定位
默认情况下z-index是0，数值越大，越优先显示
内边距：padding（会影盒子的大小）：内部内容与框的距离
一个值时，表示上下左右的距离
两个值时，分别表示上下 左右
三个值时，分别表示上 左右 下
四个值时，分别表示上 右 下 左（顺时针）
外边距（margin）：框与框外边的距离
一个值，上下左右
两个值，上下 左右
三个值，上 左右 下
四个值，上 右 下 左
margin：0 auto：让块元素自动水平居中
边框：border（会影响盒子的大小）：1px solid（实线） color
box-sizing：border-box（让padding和border不再影响盒子的大小）
内容溢出（overflow）内容隐藏（hidden）
伪类选择：.父项 子项 第几个child
3.25
边框弧度（border-radius）：有弧度的边框
一个：四角
两个：两个对对角
三个：左上，右上加左下，右下
四个：顺时针
盒子阴影（box-shadow）：盒子的阴影
15px（X轴的偏移量） 20px（Y轴的偏移量） 10px（模糊的半径，数据越大越模糊）后面接颜色 再后面加inset可以改为内部阴影
文字阴影（text-shadow）：和上述盒子阴影应用差不多
列表属性
resize：none，文本域不可拖拽
浮动（float：）：
1.顶部对齐
2.加了就飘浮起来了（脱离标准流）
3.受父级盒子约束
4.浮动时无高度的父盒子会塌陷，解决方法:
1.给父盒子高度
2.给父盒子浮动（不可取，会造成不好后果）
3.clear：both清除浮动影响
*｛默认
list-style：none去除排列小点
flex布局：弹性活动布局
display：flex（用在ul里，ul变成弹性容器，li会变成弹性盒子，子项会默认在一行排列）
主轴：默认在水平方向
侧轴：默认在垂直方向
子元素可以自动挤压和延伸
主轴上的对齐方式：
在弹性容器中：
justify-content：flex-end贴后排列
justify-content：space-between两边贴边，中间平分剩余空间
justify-content：space-around平分空间
justify-content：space-evenly平分空间与边框距离相同
justify-content：center居中
侧轴的对齐方式：
在弹性容器中：
align-items：center
align-items：end
align-items：start
修改主轴方向：
弹性容器：
flex-direction：column；改成垂直方向，从上到下
flex-direction：row-reverse；改成反方向
其他
flex：1整数：占用父级剩余的尺寸份数
flex-wrap：wrap默认不换行改成换行
grid：
display：grid
repeat（重复几次，值）
3.26
透明度（opacity）：越靠近0越透明。
元素的显示和隐藏：
visibility：hidden，在页面中仍然占有位置。
visibility：visible
a hover p大括号
光标的样式（cursor）：text工字型。pointer小手型。move十字箭头。default默认箭头。copy箭头右上角有个小括号。
轮廓样式（outline-）outline-width
outline-color    outline-style    
outline：10px solid red
outline：none
获取焦点状态：
input：focus大括号outline：10px solid red
hover对所有属性都有效（鼠标经过时发生什么反应）
.father hover .son（鼠标放在father上让son执行）
过渡（transition）：过渡属性 花费的时间
给元素本身进行设置
transition：width 2s，height 2s，background-color 4s
transition：all 时间（所有属性用多少时间过渡媒体查询（@media）：看截图
字体（@font-face）大括号font-family：自定名字     scr：url（导入路径）
平面转换（transform）：translateX（X轴）
百分比是参照盒子自身的尺寸
transform：translateY（Y轴）注意不能同时出现，因为属性名相同会覆盖，可以这样做：
transform：translate（200px，400px）
transform：translateX（）空格translateY（）
旋转（transform：rotate）rotateZ（30deg）deg是度数，Z是沿着转的轴，X，Y也可以
默认是Z轴顺时针旋转。
改变原点：transform-origin：水平方向原点位置 空格 垂直方向原点位置。可以给方向名词，还可以给像素
平移旋转进行（先平移再选择）：
transform：translate（）空格 rotate（）
缩放：transform：scale（X轴的缩放倍数，Y轴的缩放倍数）若是有个数则是整体缩放倍数。
倾斜：transform：skewX（）单位也是角overflow：hidden超出部分隐藏
空间转换：
transform：translate3d（x，y，z）
（父盒子）视距：persspective：1000px
（父盒子）transform：preserve-3d
动画：
定义动画：
@keyframes 自定名字 ｛
from｛起始宽高颜色｝
to｛目的宽高颜色｝
｝（from  to 可以用百分号表示进程）
div｛animation：自定名 花费时间｝
也可以复合表达
animation-后接
自定名（name） 花费时间（duration）推迟（delay） 
执行完毕时的状态：-fill-mode：forwards
速度曲线-timing-function：steps（12）帧数
重复次数-iteration-count：次数（Infinite无限循环）
暂停：-play-state：paused（和hover配合使用）
只有名字和花费时间是必有的，其他属性都可有可无
3.30
上午
相邻边框合并：border-collapse：collapse（给table加的（父级加））
字体图标：去iconfont找
解决图片底部空白：vertical-align：middle之类的
下午：
JavaScript：一门弱数据类型的编程语言，实现的是人机交互的效果
JavaScript的书写位置：
内部js：写在HTML里面用script标签包住。写在body结束标签的前面
外部js：代码写在.js结尾的文件中，通过‹script src=“”›‹/script›
js的注释：//单行注释 Ctrl➕/
/* 多行注释 */
js的结束符：分号；默认会将换行符识别为一个结束符，；可写可不写，但是要保证代码的风格统一，要不写，要不就不写
js的输入输出语法：
输入：prompt（“提示语”）
输出：1.document.write（“要输出的内容”），向body中输出内容，能够识别标签，解析成为网页元素
2.警示语法：alert（“要输入的内容”）弹出警告框
3.控制台输出：console.log（“控制台打印”）程序员调试时使用
变量：
声明变量：let 变量名
变量赋值：变量名＝变量值
例如：let password
          password＝“123456”
直接赋值：let uname ＝ “zhangsan”
多次声明：let age1=21，age2=23
let 声明的变量不允许重复声明
var和let的区别：
1.VAR可以重复声明变量
2.let声明的变量不能在声明之前进行使用。var存在变量提升问题，但不合理。
3.var不存在块级作用域的概念
后面声明变量使用let
变量的命名规范：
1.只能用数字，字母，下划线，$组成，并且不用数字开头。
2.不能使用关键字，保留字。
3.js严格区分字母的大小写。
4.起名是最好具有意义的。
5.遵循小驼峰命名法：findAgeUsername。
数据类型：
基本数据类型：
number：整型 浮点型 负数
string：通过“”＇＇反引号包起来的，都是字符串。单引号双引号同时使用可以用来嵌套，也可以用反斜杠来转义，反引号包起来的字符串可以进行换行
字符串的拼接：+
document.write（“你是”+“张三”+str1）
模板字符串可以拼接字符串和变量
bool：true/false
 undefined 
null：值为空
typeof：检查类型
引用数据类型：object function array
js是弱数据类型语言，它的变量类型只有在赋值之后才能确定。也就是说变量赋予的变量值是什么数据类型，变量就是什么数据类型。
数据类型的转换：
隐式转换：系统自动转换
加号两边存在一遍是字符串，则另外一边会被转换成字符串。
除了加号，其他的算术运算符都会把字符串转换成数字类型。
字符串前面添加加号就会被转换成数字类型。
显式转换：
转换为数字：Number（）。如果参数中出现字符串，最终结果会是NaN，NaN属于number类型的，不是一个数字no a number。
paresInt（）会尽可能的把参数转换成整型
paresFloat（）会尽可能的把参数转换成浮点型
转换成字符串：String（）
变量toString（进制）
运算符：
算术运算符：+ - * / %
赋值运算符：= += -= *= /=  %=
a+=3就是a= a+3
自增自减运算符：
i++ ++i之类的，赋值运算符的优先级大于后加加，先进行赋值运算。
前加加的优先级高于赋值运算符，先进行前加加再进行赋值运算。
比较运算符：大于，小于，等于，大于等于，小于等于，等于＝=，===，!==。返回布尔值。一个等于是赋值，两个等于才算等于。
==：只会判断值是否相同
===：会判断值和数据类型是否都相同
NaN不等于任何值，包括他自身
逻辑运算符：&& 与，||或，！非
与：两真才真
或：一真则真
非：取反
4.1
转移运算符：基于二进制的运算
1byte（字节）＝8bit
解决负数运算存在的问题：原码，反码，补码
符号位：用最高的一位表示符号位
1表示-，0表示+。
原码：十进制对应的二进制
反码：除了符号位之外，其余取反
补码：反码+1
负数运算-2➕3
-2的原码为1000 0010
反码1111 1101
补码1111 1110
3的原码为0000 0011
反码0111 1100
补码0111 1101
补码相加即可
异或^：相同为0不同为1
表达式和语句：
表达式是一组代码的集合，例：
let x=7
3+4
x++
语句：JS的命令。例：alert（）
代码的三大组成：顺序，选择，循环
分支语句（选择）
条件只要最终返回的是布尔值就可以
1.双分支：
if （条件）｛满足条件时执行的代码｝
｝else｛不满足条件时执行的代码｝
2.多分支：
if （条件）｛满足条件时执行的代码｝
｝else if ｛｝else｛｝
三元运算符：条件？满足条件时执行的代码：不满足时执行的代码
Switch语句：
Switch（数据）
｛
case值1：
代码
case值2：
代码
break（跳出，否则会一直执行直到结束）
default（其他）：
代码
｝
例看截图
循环：某一段代码重复执行
while（循环条件）｛
循环体
｝
组成：初始值，终止条件，初始值的变化
break，continue
break：终止掉离自己最近的一层循环
continue：跳出
4.2
do.....while循环
for循环：for（声明临时变量；循环条件；变化值）｛循环体｝
循环嵌套：
例：
for（let i = 1；i＜=7；i++）｛
console.log（今天是第$｛i｝天）
for（）｛｝
｝
数组：存储多条数据
let arr1=new array（）
字面量
let arr2=[1，2，3，“zhang”，true]
查询数组长度（arr1.length）
查找里面的元素
arr2[3]（数组下标从零开始）
循环加强
数组的操作
改：arr1[0]=“zhang”
增：一次把一个或多个加到数组的后面：arr1.push（“zhangsan”，“lisi”）
前面加：arr1.unshift（“1111”，“2222”）
删：pop（）从数组中删除最后一个元素，把元素返回出来：arr1.pop()
arr1.shift（）删除首部
指定删除：
splice（start，删除几个元素，加什么）
函数：一段实现某一功能的代码的集合，本质是实现了代码的高度复用
function 函数名（[参数]）{函数体}
括号里面的是形参，后面引用时括号里面的是实参
return返回
值传递和引用传递
箭头函数能省则省 主要用于作为其他函数的参数进行使用
function test2(fn){
a=fn(1)
console.log(a)
}
test2(x，y)=→{
}
默认值参数
可变参数（arguments）
作用域：名称在某一个范围内生效，这个范围就是他的作用域
全局作用域
局部作用域：function
块级作用域：for if
对象：属性和方法组成
查看：
zhangsan.uname
对象名[“字符串”]
document.querySelectorALL()即使获取元素只有一个，也依旧是用伪数组进行返回

元素内容

1.获取元素对象

const box1 = document.querySelector("div")

2.innerText获取元素文本内容(不识别标签)

console.log(box1.innerText)

3.innerHTML(可获取，识别标签)

4.textContent(不识别标签)

对象.属性 = 值

ipt.type = "password"

更改style样式

1.对象.style.样式 = ""

box.style.width = "100px"

box.style.height = "100px"

box.style.backgroundColor = "pink"(碰见带-的符合属性，采用小驼峰的方式规避使用)

className 不保留原来的类名

box.classList.add()追加新的类名到元素对象上

box.classList.remove("box1") 移除元素对象的类名

box.classList.toggle("box1")如果类名存在则移除，如果不存在则添加

注意：函数小括号不需要携带

button.addEventListener("click",text,true)

增加事件监听

button.removeEventListener("click",text,true)

移除事件监听

... 剩余参数，接到的是除了位置参数外其余的参数，返回的是真数组

展开运算符console.log（...arr1）

console.log(Math.max(...arr1))

对象

1.可以通过对象下面的名称引用

2.console.log（obj1["age"])

3.for(let i in obj1){
console.log(obj1[i])

}

垃圾回收机制

内存中的生命周期 js代码最终会到内存中

1.内存分配（声明函数，声明对象）

2.内存使用（读数据）

3.内存回收，数据使用完毕之后（局部变量），不再使用了要回收，垃圾回收器来完成此操作

内存泄漏：该被回收的由于未知因素导致没有被成功回收从而泄露

js中的垃圾回收方法：

1.引用计数法（现在不常用，有弊端）

如果一个对象已经没有指向它的引用了，那么就认为不再需要，然后就会被释放掉

记录引用次数 ++ ——

引用次数为0时，释放内存

2.标记清除法

从根部查找内存的对象，凡是能找到的都是需要使用的，剩下的就是不需要使用的

闭包：外部访问函数内部的变量

内层函数+外层函数的变量

内层函数使用了外层函数的变量

console.log(Math.E)

console.log(Math.PI)

let a = 4.999

let b = 3.11

向下取整

console.log(Math.floor(a))

向上取整

console.log(Math.ceil(b))

绝对值

console.log(Math.abs(-111))

随机数(只能取【0，1）)

console.log(Math.random())

如下能取到【0，10】

console.log(Math.floor(Math.random()*10+1))

最大值最小值

console.log(Math.max(1,2,3))

console.log(Math.min(1,2,3))

四舍五入

console.log(Math.round(3.51))

开平方根

console.log(Math.sqrt(9))

幂次方

console.log(Math.pow(2,3))

date实例化时间对象

let date = new Date()

console.log(date)

年

let year = date.getFullyear()

console.log(year)

月

let m = date.getMonth()+1

console.log(m)

日

let day = date.getDate()

console.log(day)

时分秒

let hh = date.getHours()

let mm = date.getMinutes()

let ss = date.getSeconds()

console.log(hh)

console.log(mm)

console.log(ss)

星期

let w = date.getDay()

console.log(w)

获取毫秒数

let mins = date.getMilliseconds()

console.log(mins)

时间戳(此刻距离19700101 00：00：00的毫秒数)

let timechuo = date.getTime()

console.log(timechuo)

zyt8258
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值