vscode 制作html5页面屏幕width 和height

转载

mob64ca13ff5b03 2024-10-31 23:14:09

文章标签 javascript jquery 前端数组迭代 文章分类 HTML5 移动开发

全局搜索快捷键

ctrl+shift +F

vscode 直接键入html模板快捷键

$vscode 制作html5页面屏幕width 和height_迭代$

vscode 制作html5页面屏幕width 和height_迭代_02

vscode 制作html5页面屏幕width 和height_javascript_03

其他相关： js笔记暂记1 数据类型+var的变量提升+闭包+console调试技巧+jQuery的隐式迭代

数据类型

检测数据类型的函数 instanceof :检测实例是否属于某个类 constructor Object.prototype.toString.call()
基本数据类型：undefined、null、boolean、number、string、object（ES6新增第七种Symbol数据类型，它的实例是唯一且不可改变的类型的值）。
类型转换：各种类型转为数字的比较

空字符串	0
Numer(ture)=1	//这个是浏览器的底层方法
parseFloat(true)=NaN
parseFloat(‘12.5px’)=12.5

//面试题
let a=10+null+true+[]+undefined+'zhufeng'+null++[]+10+false;
console.log(a)
let a=10+null+true+[12]+undefined+'zhufeng'+null++[]+10+false;
0，nan,'',null,unefined转为false

引用数据类型：
普通对象：（用法和python差不多） {[key]:[value],…} let person={ name:‘a’, lfjs: b psjcfps:‘c’ 1:3};//如果key为数字person.1是错误的 delete person[1] 数组对象（数组是特殊的对象类型）： let ary=[12,‘haha’,ture,13] console.log(ary.length) [{},{},{}] :http://www.360doc.com/content/14/0306/21/5054188_358344136.shtml https://www.jb51.net/article/27119.htm

{ } 大括号，表示定义一个对象，大部分情况下要有成对的属性和值，或是函数。

如：var LangShen = {“Name”:“Langshen”,“AGE”:“28”}; 上面声明了一个名为“LangShen”的对象，多个属性或函数用,（逗号）隔开，因为是对象的属性，所以访问时，应该用.（点）来层层访问：LangShen.Name、LangShen.AGE，当然我们也可以用数组的方式来访问，如：LangShen[“Name”]、LangShen[“AGE”]，结果是一样的。

[ ]中括号，表示一个数组，也可以理解为一个数组对象。

{ } 和[ ] 一起使用，我们前面说到，{ } 是一个对象，[ ] 是一个数组，我们可以组成一个对象数组，

…[]数组的展开语法

new Array().fill():借助new Array()生成指定数组数组的更多方法

vscode 制作html5页面屏幕width 和height_数组_04

- var存在变量提升：相当于会提前声明

变量提升

let 有临时性死区尽量声明以避免全局污染或严格模式 var没有块作用域 let重复也没事 window对象保存了一些窗口的信息（但自己声明的变量如果和window的重复会污染例如 window.screenLeft）用let声明则不会污染 var 同一作用域重复声明不报错

全局：var声明的变量和用window.a添加的变量差别

15：Object.freeze 冻结变量 Object.freeze(变量)“use strict”
16：传值和传地址：

- 闭包：

在内存中保存数据：var x = '变量'

function f(){ 
	console.log(x)
}

例子二：

function foo() {
    var xuyaohuoqudeshuju = 123
    function bar() {
        console.log(xuyaohuoqudeshuju)
    }
    return bar
}

var shili = foo()
shili()           // 123

this作用域问题

堆栈底层机制：

栈内存（stack）：执行代码用（变量存储空间，值存储空间，代码执行空间）分配一个主线程：用来自上而下一行行执行代码进栈执行执行完出栈下一行进栈执行（一个主线程）
复杂值堆内存（heap）引用类型值把对象中的简直对一次存到heap内存把地址存到值存储区再把地址和变量管连起来

let n =[10,20]
let m=n;
let x=m;
m[0]=100;
x = [30,40];
x[0] = 200;
m=x;
m[1]=300;
m[2]=400;
console.log(n,m,x);

setTimeout 和 setInterval

function fun(name){

alert('hello'+' '+name);

}

setTimeout (function(){

fun('Tom');

},1000);//参数是函数名


setInterval (function(){

fun('Tom');

},1000);//循环执行，window.clearInterval()停止

jQuery

// import jQuery 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

选择器

<p> 元素	$(“p”)
同理<a> 元素	$(“a”) 类似于 document.getElementsByTagName(‘a’)
类	$(“.test”)
id	$(“#test”)

function getHref(){ var hrefArr = document.getElementsByTagName(‘a’); //**这个页面的所有A标签 for( var i=0; i<hrefArr.length; i++ ){ hrefURL = hrefArr[i].href; console.log(hrefURL); }}

jQuery的隐式迭代

jQuery的隐式迭代：我想把ul下的每个li都加个样式 jquery写法就是:$(“ul li”).addClass(“test”); 这个意思就是把ul下的每一个li都加了test的样式，我们并没有去取得所有li然后循环加样式，这就是隐式迭代。如果你用原生的js就要取得所有li然后循环，然后操作了。

节流阀:防止轮播图按钮连续点击造成播放过快节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发核心实现思路:

同步异步

var sleep = function (time) {
                    return new Promise(function (resolve, reject) {
                        setTimeout(function () {
                            resolve(console.log('999'));
                        }, time);
                    })
                };
                let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                var start = function () {
                    arr.forEach(async () => {
                        console.log(arr)
                        await sleep(5000)
                    })
                }
                start();// http://t.zoukankan.com/lonhon-p-7518231.html

一种讨巧的方式(设置全局变量，迭代执行，执行完只后用window.clearInterval()关闭迭代)：

var i = 0
    setInterval(function () {
                    console.log(i)
                    i = i+1
                }, 2500);

使用featch

console.log('Downloading lorem ipsum image to simulate a file from user input')

fetch('https://i.picsum.photos/id/846/1920/1080.jpg?hmac=rx55XDjKPLjmW5WdHBRqOphU4wZkLT5W3TC_WBdvyVY')
.then(res => res.blob())
.then(blob => {
  const img = new Image()
  img.src = URL.createObjectURL(blob)

  console.log(`Original image size (at 1920x1080) is: ${blob.size} bytes`)
  console.log('URL to original image:', img.src)
  
  img.onload = () => resize(img, 'jpeg').then(blob => {
    console.log('Final blob size', blob.size)
    console.log('Final blob url:', URL.createObjectURL(blob))

    console.log('\nNow with webp\n')

    resize(img, 'webp').then(blob => {
      console.log('Final blob size', blob.size)
      console.log('Final blob url:', URL.createObjectURL(blob))
    })
  })
}) 


const MAX_WIDTH = 1280
const MAX_HEIGHT = 720
const MAX_SIZE = 100000 // 100kb

async function resize(img, type = 'jpeg') {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  
  ctx.drawImage(img, 0, 0)
  
  let width = img.width
  let height = img.height
  let start = 0
  let end = 1
  let last, accepted, blob
  
  // keep portration
  if (width > height) {
    if (width > MAX_WIDTH) {
      height *= MAX_WIDTH / width
      width = MAX_WIDTH
    }
  } else {
    if (height > MAX_HEIGHT) {
      width *= MAX_HEIGHT / height
      height = MAX_HEIGHT
    }
  }
  canvas.width = width
  canvas.height = height
  console.log('Scaling image down to max 1280x720 while keeping aspect ratio')
  ctx.drawImage(img, 0, 0, width, height)
  
  accepted = blob = await new Promise(rs => canvas.toBlob(rs, 'image/'+type, 1))
  
  if (blob.size < MAX_SIZE) {
    console.log('No quality change needed')
    return blob
  } else {
    console.log(`Image size after scaling ${blob.size} bytes`)
    console.log('Image sample after resizeing with losseless compression:', URL.createObjectURL(blob))
  }
  
  // Binary search for the right size
  while (true) {
    const mid = Math.round( ((start + end) / 2) * 100 ) / 100
    if (mid === last) break
    last = mid
    blob = await new Promise(rs => canvas.toBlob(rs, 'image/'+type, mid))
        console.log(`Quality set to ${mid} gave a Blob size of ${blob.size} bytes`)
    if (blob.size > MAX_SIZE) { end = mid }
    if (blob.size < MAX_SIZE) { start = mid; accepted = blob }
  }

  return accepted
}

谈一谈 Fetch API 中的 “res.blob()”如果failtofetch就在图片的界面运行此代码

将user-select属性设置为none，实现页面内容不被选中效果。

vscode中！或 html 5 直接键入模板
当按f12进行调试时，部分元素消失（例如图片）可能是因为显示比例的问题

HTML显示

图片居中

div并排显示

<div class="ddd" style="display: inline;"><img src="./image/2.png" alt=" logo" style="height: 300px; margin: 0 auto 4rem auto; background: transparent;" class="demo-logo"></div> 
<div class="ddd" style="display: inline;">学习CSS DIV技术上CSS5！</div>

<div id="left" style="width:25%;float:left;">…此处添加你要展示的内容…</div>

<div id="right" style="width:75%;float:left;">…此处添加你要展示的内容…</div>

如何在HTML中插入空格

<table> <tr><td style="width: 100%;height: 30px; font-weight:700;">加粗字体</td> <td></td></tr> </table>

https://www.w3school.com.cn/tiy/t.asp?f=eg_html_table_rules

标签可定义预格式化的文本。被包围在

标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

# 条件注释判断浏览器版本

```bash

<![endif]–>

```bash
[exports构建自定义模块](https://blog.huati365.com/c873a02397639d07)

正则表达式

var x = document.getElementById("readEndDiv");
if (x != null)
    x.remove();
var x = document.getElementById("gg_7");
if (x != null)
    x.remove();
var x = document.getElementById("bookbox");
if (x != null)
    x.remove();
var x = document.getElementById("boxright");
if (x != null)
    x.remove();
var x = document.getElementById("box1");
if (x != null)
    x.remove();
var x = document.getElementById("header");
if (x != null)
    x.remove();
var x = document.getElementById("toolbar");
if (x != null)
    x.remove();

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。