javascript

html5 javascript 网页响应式设计方案,网页适配方案

网页的设计的样式都由css控制,  我们的css大小单位,一般用 px,或rem,或vw,vh.

由px控制的大小是固定的,不具有响度式的.

响应式设计一般由两种方案实现.

一.rem方案.

实现方法 :

1.head中加 

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2.引入flexible.js
内容如下
(function flexible(window, document) {
  function resetFontSize() {
    const size = (document.documentElement.clientWidth / 1920) * 37.5;//1920为设计稿宽度 
    document.documentElement.style.fontSize = size + 'px';
  }

  // reset root 
                

使用 Multi-Screen Window Placement API 管理多个显示器

Multi-Screen Window Placement API 允许您枚举连接到您的机器的显示器并将窗口放置在特定的屏幕上。

建议用例 #

可能使用此 API 的网站示例包括:

  • à la Gimp 多窗口图形编辑器可以在精确定位的窗口中放置各种编辑工具。
  • 虚拟交易台可以在多个窗口中显示市场趋势,其中任何一个都可以在全屏模式下查看。
  • 幻灯片应用可以在内部主屏幕上显示演讲者备注,在外部投影仪上显示演示文稿。

javascript 异步操作的6种方法

异步操作的模式:

1 回调函数:callback
2 事件监听:onXxxx,addEventListener.
3 发布/订阅(设计模式)

4 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象

5 Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同,Generator 函数将 JavaScript 异步编程带入了一个全新的阶段。

6 async 函数:ES2017 标准引入了 async 函数,使得异步操作变得更加方便。 async 函数是什么?一句话,它就是 Generator 函数的语法糖。

 

当然 .定时器和ajax也可以看作是.

更多请查看

https://www.php.cn/website-design-ask-488572.html

https://blog.csdn.net/ZYS10000/article/details/104601839/

他来了!性能吊打 Node.js 和 Deno 的新一代 javaScript 运行时!

今天跟大家介绍一个最新开源的 javaScript 运行时:Bun.js

他来了!性能吊打 Node.js 和 Deno 的新一代 javaScript 运行时!_第1张图片

刚开源不到一个月就获得了 19.5k star!看起来马上就会成为 Node.js 和 Deno 的一大竞争对手了!

和传统的 Node.js 这种传统的 javaScript 运行时不同,Bun.js 直接内置了打包器、转译器、任务运行器和 npm 客户端,这意味着你不再需要 Webpack/Rollup/esbuild/Snowpack/Parcel/Rome/swc/babel 就可以直接运行 TypeScript、JSX!…

        

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();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } 

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]