javascript

js让页面某个元素全屏(比如视频)的方法

<video src="a.mp4" muted autoplay></video>

    <a onclick="openFullscreen();">full</a>
    <script>

var elem = document.getElementsByTagName("video")[0];

function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen().then(() => {
        //after fullscreen do someting

    }).catch((err) => {
        //alert(`Error attempting to enable fullscreen mode: ${err.message} (${err.name})`);
      });
  } else if (elem.mozRequestFullScreen) 

22个ES6知识点汇总,爆肝了

一、问:ES6是什么,为什么要学习它,不学习ES6会怎么样?

答: ES6是新一代的JS语言标准,对分JS语言核心内容做了升级优化,规范了JS使用标准,新增了JS原生方法,使得JS使用更加规范,更加优雅,更适合大型应用的开发。学习ES6是成为专业前端正规军的必经之路。不学习ES6也可以写代码打鬼子,但是最多只能当个游击队长。

二、问:ES5、ES6和ES2015有什么区别?

答: ES2015特指在2015年发布的新一代JS语言标准,ES6泛指下一代JS语言标准,包含ES2015、ES2016、ES2017、ES2018等。现阶段在绝大部分场景下,ES2015默认等同ES6。ES5泛指上一代语言标准。ES2015可以理解为ES5和ES6的时间分界线。

三、问:babel是什么,有什么作用?

答:babel是一个 ES6 转码器,可以将 ES6 代码转为 ES5 代码,以便兼容那些还没支持ES6的平台。

四、问:let有什么用,有了var为什么还要用let?

答: 在ES6之前,声明变量只能用var,var方式声明变量其实是很不合理的,准确的说,是因为ES5里面没有块级作用域是很不合理的,甚至可以说是一个语言层面的bug(这也是很多c++、java开发人员看不懂,也瞧不起JS语言的劣势之一)。没有块级作用域会带来很多难以理解的问题,比如for循环var变量泄露,变量覆盖等问题。let 声明的变量拥有自己的块级作用域,且修复了var声明变量带来的变量提升问题

五、问:举一些ES6对String字符串类型做的常用升级优化?

答:

1、优化部分:

ES6新增了字符串模板,在拼接大段字符串时,用反斜杠(`)取代以往的字符串相加的形式,能保留所有空格和换行,使得字符串拼接看起来更加直观,更加优雅。

2、升级部分:

ES6在String原型上新增了includes()方法,用于取代传统的只能用indexOf查找包含字符的方法(indexOf返回-1表示没查到不如includes方法返回false更明确,语义更清晰), 此外还新增了startsWith(), endsWith(), padStart(),padEnd(),repeat()等方法,可方便的用于查找,补全字符串。

六、问:举一些ES6对Array数组类型做的常用升级优化?

答:

1、优化部分:

a. 数组解构赋值。ES6可以直接以let [a,b,c] = [1,2,3]

    

Javascript Fetch API 教程

fetch()是 XMLHttpRequest 的升级版,用于在 JavaScript 脚本里面发出 HTTP 请求。

浏览器原生提供这个对象。本章详细介绍它的用法。

目录 [隐藏]

基本用法

fetch()

使用javascript Page Visibility API,判断用户是否关闭了浏览器窗口(html页面)

Page Visibility API

 

简介

有时候,开发者需要知道,用户正在离开页面。常用的方法是监听下面三个事件。

  • pagehide
  • beforeunload
  • unload

但是,这些事件在手机上可能不会触发,页面就直接关闭了。因为手机系统可以将一个进程直接转入后台,然后杀死。

  • 用户点击了一条系统通知,切换到另一个 App。
  • 用户进入任务切换窗口,切换到另一个 App。
  • 用户点击了 Home 按钮,切换回主屏幕。
  • 操作系统自动切换到另一个 App(比如,收到一个电话)。

上面这些情况,都会导致手机将浏览器进程切换到后台,然后为了节省资源,可能就会杀死浏览器进程。

以前,页面被系统切换,以及系统清除浏览器进程,是无法监听到的。开发者想要指定,任何一种页面卸载情况下都会执行的代码,也是无法做到的。为了解决这个问题,就诞生了 Page Visibility API。不管手机或桌面电脑,所有情况下,这个 API 都会监听到页面的可见性发生变化。

这个新的 API 的意义在于,通过监听网页的可见性,可以预判网页的卸载,还可以用来节省资源,减缓电能的消耗。比如,一旦用户不看网页,下面这些网页行为都是可以暂停的。

  • 对服务器的轮询
  • 网页动画
  • 正在播放的音频或视频

document.visibilityState

这个 API 主要在document对象上,新增了一个document.visibilityState属性。该属性返回一个字符串,表示页面当前的可见性状态,共有三个可能的值。

js如何在一个日期上面加上几小时 几分钟 几秒

1. 打开任一浏览器,本文以chrome浏览器为例,打开后,按F12,进入开发者模式,点击【Console】标签

2. 在【Console】页签中,书写js代码,首先将当前日期时间赋值给一个js变量curTime,代码如下:

var curTime = new Date();

3.在当前时间curTime变量上加上1个小时,并将结果赋值给addHour变量,代码如下:

var addHour = curTime.setHours(curTime.getHours() 1);

4.从运行效果可以看到,addHour变量的值不是一个日期时间格式,需要使用new Date(),将其转换为日期时间格式,代码如下:

new Date(addHour);

5.在当前时间curTime变量上加上10分钟,再转换为日期时间格式,代码如下:

new Date(curTime.setMinutes(curTime.getMinutes() 10));

6.在当前时间curTime变量上加上10秒钟,再转换为日期时间格式,代码如下:

new Date(curTime.setSeconds(curTime.getSeconds() 10));

7.在当前时间curTime变量上加上1分40秒,其实也就相当于加100秒,代码如下:

new Date(curTime.setSeconds(curTime.getSeconds() 100));

+new Date()是什么意思

js在某个数据类型前使用‘+’,这个操作目的是为了将该数据类型转换为Number类型,如果转换失败,则返回NaN;
例如:

+'2'+1 // 3
+[1]   // NaN

+new Date() 会调用Date.prototype 上面的 valueOf方法,根据
new Date().getTime() === new Date().valueOf() //true
下面的例子返回效果等同:

      console.log(+new Date());
      console.log

js foreach循环使用return跳出循环及返回值无效 for循环使用有效

一次项目中使用forEach进行遍历,达到某一条件,希望跳出循环,代码不继续执行。

this.tableData.forEach((item, index)=>{
    if (item.value=== 1) {
       return
    }

for循环使用return可以跳出循环

<script>
 let a=[1,2,3];
  let b=[4,5,6,7,8];
   function test(){
        for(var i=0;i<a.length;i++){
            for(var j=0;j<b.length;j++){
                if(b[j]===5){
                    // break
                    return false;
                }else{
                    console.log('13');
                }
            }
            
            console.log('12');
        }
        console.log('14');
    }
    

    test();//打印结果为:13,第一次是b[4]等于4,不等于5,所以输出13,第二次b[1]等于5,所以return结束

</script>

我们再分别使用for循环和forEach方法来验证:

(function() {
    let 

JavaScript 读取Cookie的方法

读取Cookie

可以通过document.cookie直接读取cookie的内容:


  1. var strCookie = document.cookie; 

此时,strCookie是一个由该域名下的所有cookie的名/值对所组成的字符串,名/值对间以“分号加空格”分隔。为了方便查看,可以使用split()方法将cookie中的名/值对解析出来,得到一个cookie的列表。然后,再使用相应的解码方式,把cookie的值还原出来。

cookie值的解码方式,取决于之前存储cookie时所采用的编码方式。比如使用encodeComponent()函数对值进行编码,则要使用decodeComponent()函数对其值进行解码。代码如下:


  1. function getCookie(name) {
  2. var cookies = document.cookie;
  3. var list = cookies.split("; ");     // 解析出名/值对列表
  4.       
  5. for(var i