JavaScript-day0812

最新推荐文章于 2024-08-22 14:32:34 发布

goto_w

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量77

点赞数

分类专栏： js基础语法文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_52696618/article/details/126320478

版权

js基础语法专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1、Math 使用方式 :Math.方法/属性
    1、ceil 向上取整
    2、floor向下取整
    3、random  生成随机数
2、Date
    1、获取到对象 new Date()
        参数：不传递 表示以当前时间
            传递多个数字 指定的年月日、时分秒
            传递字符串
    2、获取时间
        getFullYear 获取年份
        getMonth 获取月份
        。。。所有以get开头的方法都是获取的意思
    3、日期时间与时间戳的转换
        1、日期时间转换时间戳
            Date.parse(日期)
        2、时间戳转换日期时间
            var d = new Date()
            d.setTime(时间戳)  d对象表示的就是时间戳对应的时间

BOM

BOM介绍

BOM全称browser object model 也就是浏览器对象模型

目前js是运行在浏览器上。所以js代码需要可以控制到整个浏览器的功能。对于JS而言ES只有语法规范，不能控制

到浏览器的功能。所以浏览器在处理js代码时，就提供了BOM功能使用(BOM就是浏览器内置提供的window对象)

每一个页面浏览器在解析时，内置就提供了window对象。window对象下的属性、方法(API)

window对象下有很多很多的属性，有的还是对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GhpYuTfS-1660375131772)(/1660272441112.png)]

navigator对象（不用记）

// 记录着系统相关的信息
console.log(window.navigator);
// 由于window是顶级对象 可以省略
// cookieEnabled 浏览器端cookie的使用是否不被禁用
console.log(navigator.cookieEnabled);
// 浏览器的版本信息
console.log(navigator.userAgent);

location对象

1、location对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MZOkpSd0-1660375131773)(/1660273780179.png)]

2、location对象获取当前URL地址

<button id="getUrl">获取URL</button>
    <script>
        // console.log(location);
        getUrl.onclick = function(){
            console.log(location.href);
        }
    </script>

3、跳转地址

jump.onclick = function(){
    // 只要给href属性赋值 浏览器会自动的进行跳转
    location.href = 'http://www.baidu.com';
    // location.replace('http://www.baidu.com')
}

4、刷新

flush.onclick = function(){
    location.reload();
}

5、模拟百度搜索

<input type="text" id="keyword"><input type="button" id="search" value="搜索"/>
<script>
search.onclick = function(){
    // 获取输入框的值
    var k = keyword.value;
    var url = 'https://www.baidu.com/s?wd='+k;
    location.href = url;
}
</script>

history对象

<h1>第二个页面</h1>
    <a href="3.html">下一页</a>
    <button id="go">前进</button>
    <button id="back">后退</button>
    <script>
        go.onclick = function(){
            // history.forward();
            // go可以实现 前进或者后退 参数正数表示前面多少个页面 负数表示后退多少个页面
            history.go(1);
        }
        back.onclick = function(){
            // history.back();
            history.go(-1);
        }
    </script>

定时器

定时器基本使用

1、语法

定时器控制反复执行某一项操作

1、设置定时器
var 变量 = setInterval(函数,时间)
函数：用于通知定时器做什么，可以使用匿名函数或者函数名称
时间：毫秒值
变量在接受定时器的标识符号
2、清除定时器
clearInterval(标识)

2、使用示例

 <button id="end">停止</button>
<script>
    // 1、使用有名称的函数
    // function fn(){
    //     console.log(+new Date())
    // }
    // setInterval(fn,1000);
    // 2、使用匿名函数
    var timer = setInterval(function () {
        console.log(+new Date())
    }, 1000);
    // 停止定时器
    end.onclick = function(){
        console.log(1111)
        clearInterval(timer)
    }
</script>

随机点名案例

<!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>
    <style>
        #content {
            width: 600px;
            height: 400px;
            background: #000;
            margin: 100px auto;
            text-align: center;
            position: relative;
            line-height: 300px;
            color: dodgerblue;
            font-size: 70px;
        }

        #btn1 {
            background: #ccc;
            width: 180px;
            height: 80px;
            font-size: 30px;
            color: #f40;
            border-radius: 12px;
            position: absolute;
            bottom: 30px;
            left: 50%;
            margin-left: -90px;

        }
    </style>
</head>

<body>
    <div id="content">
        <span id="span1">
            点击开始
        </span>
        <button id="btn1">
            start
        </button>

    </div>
    <script src="common.js"></script>
    <script>
        /*
            思路：
                当用户第一次点击时 按钮文字被设置为stop 并且名字再反复改变
                    按钮文字被设置为stop 找到按钮 使用innerHTML实现
                    名字再反复改变 使用定时器 在函数中设置修改名字(随机数取到下标 从数组中取出名字)
                当用户第二次点击是 按钮文字被设置为start 并且停止修改名字
                    按钮文字被设置为start
                    停止修改名字 清除定时器

        */
        var arr = ['孙悟空', '亚索', '嘉文', '赵信', '盖伦'];
        var timer;
        btn1.onclick = function () {
            // 判断是要开始修改名字还是停止
            if (btn1.innerHTML.trim() == 'start') {
                btn1.innerHTML = 'stop';
                timer = setInterval(function () {
                    span1.innerHTML = arr[makeRandom(0, arr.length, false)];
                }, 100);
            } else {
                btn1.innerHTML = 'start';
                clearInterval(timer);
            }
        }
    </script>

</body>

</html>

时间案例

<!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>
    <div id="app">2019-09-09 </div>
    <script>

        function format(number){
           return number>10 ? number :'0'+number;
        }
        function time() {
            var d = new Date();
            var year = d.getFullYear();
            var month = format(d.getMonth() + 1);
            var day = format(d.getDate());
            var h = format(d.getHours());
            var m = format(d.getMinutes());
            var s = format(d.getSeconds());
            // 模板字符串 `(是反引号) 在反引号中可以直接写变量  ${变量名称}
            // str = `aaa  ${month} aa`
            str = `${year}-${month}-${day} ${h}:${m}:${s}`;
            app.innerHTML = str;
        }
        setInterval(time, 1000);
        time();
    </script>
</body>

</html>

验证码倒计时

<input type="button" value="发送验证码" id="send">
    <script>
        /*
            思路
            当用户点击按钮 
                1、将按钮设置  不可以点击状态 send.disabled = true;
                2、实现按钮的内容每秒钟改变一次 send.value = 值  一旦时间到达 按钮重新可以点击
        */
        var timer; //保存定时器标识
        var number = 4; //保存倒计时的时间
        send.onclick = function () {
            timer = setInterval(function () {
                if (number > 1) {
                    number--;
                    // 禁用按钮
                    send.disabled = true;
                    send.value = number + 's重新获取'
                } else {
                    // 设置按钮还可以继续点击
                    send.disabled = false;
                    send.value = '重新获取';
                    // 关闭定时器
                    clearInterval(timer);
                    // 重置number变量
                    number = 10;
                }

            }, 1000);

        }
    </script>

延时器

/*
	延时器只会执行一次
	1、创建延时器
	var 变量 = setTimeout(函数,时间)
	2、清除延时器
	clearTimeout(标识)
*/

<button id="end">停止</button>
<script>
    // 2、使用匿名函数
    var timer = setTimeout(function () {
        console.log(+new Date())
    }, 10000);
    // 停止定时器
    end.onclick = function(){
        console.log(1111)
        clearTimeout(timer)
    }
</script>

同步与异步

同步：代码从上向下执行，当某一行代码没有执行完毕，后面的代码等待

异步：代码还是继续向下执行，当前没做完的其他来处理。目前可以接触 setInterval、setTimeout 都是异步代码

setTimeout(function(){
    console.log('2s后执行')
},2000);
setTimeout(function(){
    console.log('延时器中')
},0)
console.log('end');

/*
    浏览器属于单线程(主线程)。所以浏览器只能做一件事件
    js引擎主线程在执行js代码时，遇到同步代码正常执行，碰到异步代码，将异步代码的任务交给浏览器中的任务队列(宏任务队列、微任务队列)
    主线程代码继续向下执行 当执行完毕了，将任务队列中的任务取出来进行执行(按照时间先后顺序执行)
*/

DOM

浏览器主要任务是控制页面上各种元素显示。对于页面上每一个元素都存在一个对象(dom对象)对应。按照浏览器

的规则需要找到这个对象之后再按照使用说明去使用

操作页面上元素永远是 dom对象.属性/方法名称控制。dom对象是浏览器提供的

<ul>
    <li class="one">第一个li</li>
    <li id="two">第二个li</li>
</ul>
<input type="text" name="user">
<script>
    // 1、getElementById 根据标签中id值找到标签的dom对象  返回的结果就是dom对象
    // var id = document.getElementById('two');
    // console.log(id);//单个dom对象 控制台输出时是直接显示的标签
    // 2、getElementsByClassName 按照标签上的class值寻找dom对象  返回结果是伪数组，数组中每一个元素都是dom对象
    // console.log(document.getElementsByClassName('one'))
    // 3、getElementsByTagName根据标签名称寻找对应的dom对象 返回也是伪数组
    // console.log(document.getElementsByTagName('li'));
    // 4、按照标签上name属性值寻找dom对象,返回还是伪数组 但是可以使用forEach方法
    // console.log(document.getElementsByName('user'))


    // 5、querySelector根据css规则匹配满足的第一个标签的dom对象 返回结果就是dom对象
    // 参数 就是css规则写法
    // console.log(document.querySelector('.one'));
    // 6、querySelectorAll根据css规则匹配满足所有标签的dom对象，返回结果是伪数组，数组中每个元素才是真正的dom对象
    console.log(document.querySelectorAll('li'));

    // document.querySelector('.one').innerHTML = 'change'
    // document.querySelectorAll('li').innerHTML = 'change' 错误

</script>

事件

事件四要素

就是用户的行为触发导致了某种结果，这种行为叫做事件

1、事件源事件产生的标签

2、事件名称浏览器内置所规定的一些行为

3、事件处理程序就是一个函数事件一旦触发浏览器就会自动的将处理程序运行起来

4、事件对象事件触发之后用于记录或者实现某些功能的对象，系统所分配

事件绑定方式

页面上一个普通标签，直接显示在页面上，不论用户做什么行为操作都不会有对应的结果。事件绑定，就是将事

件源、事件名称、事件处理程序三者合并到一起

行内绑定

<!-- 直接在标签上设置以on开头的属性 只要对应的行为触发 系统会自动执行对应的代码 -->
<button onclick="console.log('保时捷')">行内绑定</button>
<button onclick="fn()">行内绑定配合函数使用</button>
<script>
function fn() {
    console.log('奔驰C200L');
}
// 行内绑定方式 没有讲结构与行为分离 所以行内绑定方式一般不会使用
</script>

动态绑定

1、动态绑定

<button>按钮</button>
    <script>
        // 行内绑定事件语法 dom对象.事件名称=函数
        document.querySelector('button').onclick = function(){
            console.log('雅阁');
            // 当前事件源的dom对象
            console.log(this);
        }
    </script>

<button>按钮</button>
<button>按钮</button>
<script>
    //  document.querySelectorAll('button')确实是对象 但是不是dom对象 语法上不会报错 执行肯定没有效果
    // 这个写法错误
    // document.querySelectorAll('button').onclick = function(){
    //     console.log(this);
    // }
    // 多个相同元素要绑定事件 一定要做循环
    document.querySelectorAll('button').forEach(function(dom){
        dom.onclick = function(){
            console.log('fn')
        }
    })
</script>

goto_w

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript-day0812

BOM全称browser object model 也就是浏览器对象模型目前js是运行在浏览器上。所以js代码需要可以控制到整个浏览器的功能。对于JS而言ES只有语法规范，不能控制到浏览器的功能。所以浏览器在处理js代码时，就提供了BOM功能使用(BOM就是浏览器内置提供的window对象)每一个页面浏览器在解析时，内置就提供了window对象。window对象下的属性、方法(API)window对象下有很多很多的属性，有的还是对象。...
复制链接

扫一扫