JS小知识

陌上小孩纸

已于 2024-05-11 17:55:09 修改

阅读量685

点赞数

分类专栏：基础知识文章标签： javascript 开发语言 ecmascript

于 2023-02-15 17:14:04 首次发布

本文链接：https://blog.csdn.net/qq_27630263/article/details/127492138

版权

基础知识专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

Chrome设置
- 1 Chrome设置跨域和允许https网站中发送http请求
1 产生随机数
3 数组、字符串操作
4 ajax
5 捕获异常
6 延时操作、定时操作
7 iframe 父子之间获取元素
8 websocket
9 自定义事件的使用与触发
10 前端方法
11 js工具

Chrome设置

1 Chrome设置跨域和允许https网站中发送http请求

允许跨域
--disable-web-security --user-data-dir="C:/ChromeDevSession"
允许使用非安全请求
--allow-running-insecure-content
示例
在Chrome快捷方式上右键-》属性-》目标，加入上述参数
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --args --disable-web-security --user-data-dir="C:/ChromeDevSession" --allow-running-insecure-content

1 产生随机数

返回指定范围随机数(m~n)之间的范围的公式为：Math.random()*(n-m)+m

3 数组、字符串操作

3.1 互相转换

var arr = [1,2,3];
var str = JSON.stringify(arr);
var arr1 = JSON.parse(str);

var arr2 = [
	{'name':'hhhh','age':12},
	{'name':'宝玉','age':18}
];
var str1 = JSON.stringify(arr2);
var arr3 = JSON.parse(str1);

3.2 在数组头部插入数据

var jiekouList = [1,2,3];
//从开头添加
jiekouList.unshift(4); // [4,1,2,3]

//Java List 倒叙
List list = [1,2,3];
Collections.reverse(list); // [3,2,1]

3.3 尾部插入数据concat

//用concat方法
//concat()把两个或者多个数组链接在一起，但是不改变已经存在的数组
//而是返回一个链接之后的新数组
var a = [1, 2, 3];
a.concat([4, 5]);
console.log(a);
//此处输出为 [1, 2, 3]
 
var a = [1, 2, 3];
a = a.concat([4, 5]);
console.log(a);//此处输出为 [1, 2, 3 ,4 ,5]

4 ajax

		var jiekou = {
            //应用模块
            mokuai: this.input_mokuai,
            //接口描述
            des: this.input_des,
        }
		$.ajax({
            url: 'http://41.228.1.109:8090/jiekou/saveJiekou',
            type: 'post',
            headers: {
                 'Authorization': localStorage.getItem('token')
            },
            // data 设置的是请求参数
            data: JSON.stringify(jiekou),
            contentType: 'application/json;charset=utf-8',
            beforeSend: function (xhr) {
                // 在所有发送请求的操作（open, send）之前执行
                console.log('beforeSend', xhr);
            },
            success: function (res) {
                // 只有请求成功（状态码为200）才会执行这个函数
                console.log(res);
            },
            error: function (xhr) {
                // 只有请求不正常（状态码不为200）才会执行
                console.log('error', xhr);
            },
            complete: function (xhr) {
                // 不管是成功还是失败都是完成，都会执行这个 complete 函数(一般成功与失败都需要执行的操作写在这里)
                console.log('complete', xhr);
            }
        });

package com.example.projectmanager.controller;

import com.alibaba.fastjson.JSONObject;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping("/jiekou")
public class JiekouController {

    @PostMapping("/saveJiekou")
    public int saveJiekou(@RequestBody JSONObject jiekou){
        System.out.println(jiekou);
        return 1;
    }
}

5 捕获异常

try{
	//代码块
}catch(e){
	console.log(e);
}

6 延时操作、定时操作

function fn(){
	console.log(2);
}

// 延迟器操作
setTimeout(fn, "5000"); 


// 定时器操作
var timer = setInterval(fn,1000);
//或者
var timer = setInterval(function(){
	console.log(2);
},1000)
// 清除定时器
clearTimeout(timer);


// 工作中,常用递归函数+setTimeout 来模拟定时器的效果
function add() {
	document.write('常用递归函数+setTimeout 来实现定时器')
	setTimeout(add, 3000)
}
add()

7 iframe 父子之间获取元素

// 子控制父：
var modalContent = window.parent.document.getElementById("myModalContent");
modalContent.innerHTML = "<h3>补全成功</h3>";
var modalb = window.parent.document.getElementById("modalBtn");
modalb.click();

//父用子：
var radios = document.getElementById('iframeData').contentDocument.getElementsByName('trRadio');

// iframe若引用其他项目页面
// 发送方：
window.parent.postMessage("hello", "http://localhost:8081"); // 要写top.postMessage或者是parent.message
// 接收方：
window.addEventListener( "message", (e)=>{
	console.log(e.data)
});

8 websocket

8.1 websocket介绍

由于http请求只能由客户端发起，所有当服务器资源有变化时，客户端只能通过轮询的方式。非常浪费资源。
websocket的特点：

服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种
建立在 TCP 协议之上，服务器端的实现比较容易
可以发送文本，也可以发送二进制数据
没有同源限制，客户端可以与任意服务器通信
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。如ws:localhost:8080/msg

8.2 简单示例

var ws = new WebSocket("ws://localhost:8080/msg");
 
ws.onopen = function(evt) {
	console.log("Connection open ...");
	ws.send("Hello WebSockets!");
};
 
ws.onmessage = function(evt) {
	console.log("Received Message: " + evt.data);
	ws.close();
};
 
ws.onclose = function(evt) {
	console.log("Connection closed.");
};

8.3 api

8.3.1 websocket构造函数

用于创建一个webSocket实例，执行后，客户端就会与服务端连接

var ws = new WebSocket("ws://localhost:8080/msg");

8.3.2 webSocket.readyState

readyState属性返回实例对象的当前状态，共有四种：

CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败

if(ws.readyState == WebSocket.CONNECTING ){

}

8.3.3 webSocket.onopen

用于指定连接成功后的回调函数

ws.onopen = function(evt) {
	console.log("Connection open ...");
	ws.send("Hello WebSockets!");
};
// 或者
ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
});

8.3.4 webSocket.onclose

用于指定连接关闭后的回调函数。

ws.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
};
// 或者
ws.addEventListener("close", function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
});

8.3.5 webSocket.onmessage

用于指定收到服务器数据后的回调函数

ws.onmessage = function(event) {
  var data = event.data;
};
// 或者
ws.addEventListener("message", function(event) {
  var data = event.data;
});

8.3.6 webSocket.send

send方法用于向服务器发送数据

发送文本

ws.send("Hello WebSockets!");

发送Blob数据

var file = document
  .querySelector('input[type="file"]')
  .files[0];
ws.send(file);

发送ArrayBuffer

var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
 binary[i] = img.data[i];
}
ws.send(binary.buffer);

8.3.7 webSocket.bufferedAmount

bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束

var data = new ArrayBuffer(10000000);
socket.send(data);
 
if (socket.bufferedAmount === 0) {
  // 发送完毕
} else {
  // 发送还没结束
}

8.3.8 webSocket.onerror

用于指定报错时的回调函数

ws.onerror = function(event) {
};
// 或者
ws.addEventListener("error", function(event) {
});

9 自定义事件的使用与触发

出现的场景：点击不同的按钮会通过websocket发送不同的消息，但是ws返回的对应的操作都是在ws.onmessage中进行，因此需要触发不同的事件

1. 事件的创建

JS中，最简单的创建事件方法，是使用Event构造器：

var myEvent = new Event('event_name');

但是为了能够传递数据，就需要使用 CustomEvent 构造器：

var myEvent = new CustomEvent('event_name', {
    detail:{
        // 将需要传递的数据写在detail中，以便在EventListener中获取
        // 数据将会在event.detail中得到
    },
});

1. 事件的监听

JS 的 EventListener 是根据事件的名称来进行监听的，比如我们在上文中已经创建了一个名称为event_name的事件，那么当某个元素需要监听它的时候，就需要创建相应的监听器：

//假设listener注册在window对象上
window.addEventListener('event_name', function(event){
    // 如果是CustomEvent，传入的数据在event.detail中
    console.log('得到数据为：', event.detail);

    // ...后续相关操作
});

至此，window对象上就有了对event_name 这个事件的监听器，当 window 上触发这个事件的时候，相关的 callback 就会执行。

1. 事件的触发

对于一些内置（built-in）的事件，通常都是有一些操作去做触发，比如鼠标单击对应MouseEvent的click事件，利用鼠标（ctrl+滚轮上下）去放大缩小页面对应WheelEvent的resize事件。

然而，自定义的事件由于不是JS内置的事件，所以我们需要在JS代码中去显式地触发它。方法是使用 dispatchEvent 去触发（IE8低版本兼容，使用fireEvent）：

// 监听事件
window.addEventListener('event_name', function(event){
    console.log('得到标题为：', event.detail.title);
});



// 定义事件，并且注册相关的EventListener
var myEvent = new CustomEvent('event_name', { 
    detail: { 
    	title: 'This is title!'
    }
});
// 在对应的元素上触发该事件
if(window.dispatchEvent) {  
    window.dispatchEvent(myEvent);
} else {
    window.fireEvent(myEvent);
}
// 根据listener中的callback函数定义，应当会在console中输出 "得到标题为： This is title!"

1. 栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择文件</title>
    <link rel="stylesheet" type="text/css" href="../../static/css/index.css">
</head>
<body>
<div id="app">
    <p id="ppp">123123</p>
</div>

<script src="../../static/js/vue.js"></script>
<script src="../../static/js/index.js"></script>
<script src="../../static/js/jquery-1.8.0.js"></script>
<script>
    var p = document.getElementById("ppp");

    // 监听事件
    p.addEventListener('event_name', function(event){
        console.log('得到标题为：', event.detail.title);
    });

    // 定义事件，并且注册相关的EventListener
    var myEvent = new CustomEvent('event_name', {
        detail: {
            title: 'This is title!'
        }
    });

    var timer = setInterval(function(){
        // 在对应的元素上触发该事件
        if(p.dispatchEvent) {
            p.dispatchEvent(myEvent);
        } else {
            p.fireEvent(myEvent);
        }
    },1000)
</script>
</body>

在这里插入图片描述

10 前端方法

10.1 存取Cookile

		localStorage.setItem("key", "value");
		var value= localStorage.getItem("key");
		localStorage.removeItem("key"); 
		localStorage.clear();

10.2 前端播放铃声

<p class="clickp"><span class="click">点击后发声提示</span></p>
<audio style="display: none;" id="audioTsy" controls="controls">
    <source src="static/13654.mp3" type="audio/mpeg">
</audio>

<script src="static/js/jquery-1.8.0.js"></script>
<script type="text/javascript">
	$(function(){
	var audio = document.getElementById("audioTsy")
	$('.clickp').click(function(){
		audio.play()
	});
});
</script>

10.3 打开页面

一、关闭当前页面，打开新的页面
（1）方法一：利用超链接a

（2）方法二：利用js来跳转页面——（在同当前窗口中打开窗口）

window.location.href="http://www.cnblogs.com/liumengdie/" ;

二、保留当前页面，打开一个新的tab页面
（1）方法一：利用超链接
（2）方法二：利用js打开新页面（在另外新建窗口中打开窗口）
window.open(“http://www.cnblogs.com/liumengdie/”，“_blank”);

11 js工具

11.1 text-image.iife.js 将文字、图片、视频转为「文本化」图像

text-image可以将文字、图片、视频进行「文本化」，转为png图片。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
<buttom onclick="drawText()">文本</buttom>
<input id="text" value="哇哈哈" />
<hr>
<buttom onclick="drawPicture()">图片</buttom>
<hr>
<buttom onclick="drawVideo()">视频</buttom>
<hr>
<canvas id="demo"></canvas>
<script src="../../static/js/text-image.iife.js"></script>
<script>
    function drawText(){
        textImage.createTextImage({
            canvas: document.getElementById('demo'),
            replaceText: 'LZH',
            source: {
                text: document.getElementById("text").value,
            },
        });
    }
    function drawPicture(){
        textImage.createTextImage({
            canvas: document.getElementById('demo'),
            raduis: 7,
            isGray: true,
            source: {
                img: '12.png',
            },
        });
    }
    function drawVideo(){
        textImage.createTextImage({
            canvas: document.getElementById('demo'),
            raduis: 8,
            isGray: true,
            source: {
                video: '111.mp4',
                height: 700,
            },
        });
    }
</script>
</body>
</html>

11.2 tableExport.js 前端导出表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
<button onclick="daochu()">导出文件</button>
<table id="table_table">
    <thread>
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
            <th>标题4</th>
        </tr>
    </thread>
    <tbody>
    </tbody>
</table>

<script type="text/javascript" src="../../static/js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="../../static/js/tableExport.js"></script>
<script>
    function daochu(){
        $('#table_table').tableExport({
            type: 'excel',
            fileName: "文件名称",
            ignoreRow: [1,2], //导出时忽略行
            ignoreColumn: [0,2], // 导出忽略列
        })
    }
</script>
</body>
</html>

11.3 dayjs.min.js 日期时间操作

<script src="../../static/js/dayjs.min.js"></script>
<script>
    //将日期转为字符串格式
    var now = dayjs();
    console.log(now);
    console.log("将日期转为字符串格式: " + now.format("YYYY-MM-DD HH:mm:ss"));

    //将当前日期推迟48小时的日期
    var now48 = now.subtract(48 * 60 * 60 * 1000, 'millisecond');
    console.log("将当前日期提前48小时的日期: " + now48.format("YYYY-MM-DD HH:mm:ss"));
    var now48 = now.add(48 * 60 * 60 * 1000, 'millisecond');
    console.log("将当前日期推迟48小时的日期: " + now48.format("YYYY-MM-DD HH:mm:ss"));

    //将字符串转为日期格式
    var date = dayjs("2024-07-26 08:12:59");
    console.log("将字符串转为日期格式: ");
    console.log(date);

    //两个日期相距多少天
    var time = now48-now;
    console.log("两个日期相距多少天: " + time / 1000 / 60 / 60 / 24 );

    //判断日期先后
    var flag = now < now48;
    console.log("判断日期先后: " + flag );
</script>

在这里插入图片描述

日期差计算：计算倒计时，相差几天几小时几分钟几秒

		   var t1=new Date("2021/12/25 12:30:59"); //格式正确不需要转换
           var t2="2021-12-25 12:30:59";//格式不正确需要转换
           var aftert2=new Date(t2.replace(/-/g,"/"));//转换
 
           var data=new Date();//获取当前时间
           var times=t1.getTime()-data.getTime();//时间差的毫秒数
 
           var days=parseInt(times/(24*1000*3600));//计算相差的天数
           var leave=times%(24*3600*1000);//计算天数后剩余的毫秒数
 
           var h=parseInt(leave/(3600*1000));//计算小时数
 
            //计算分钟数
           var h_leave=leave%(3600*1000);
           var min=parseInt(h_leave/(60*1000));
 
            //计算秒数
           var min_leave=h_leave%(60*1000);
           var sec=parseInt(min_leave/1000);
           document.write(`相差${days}天${h}小时${min}分钟${sec}秒`);

11.4 html5实现电子签名

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>电子签字</title>
  </head>
  <body>
    <canvas></canvas>
    <div>
      <button onclick="save()">保存</button>
      <button onclick="cancel()">取消</button>
    </div>
  </body>
</html>
<script>
  let canvas = document.querySelector('canvas')
  let config = {
    width: 500, // 宽度
    height: 200, // 高度
    lineWidth: 5, // 线宽
    strokeStyle: 'red', // 线条颜色
    lineCap: 'round', // 设置线条两端圆角
    lineJoin: 'round', // 线条交汇处圆角
  }
  canvas.width = config.width
  canvas.height = config.height
  // 设置一个边框，方便我们查看及使用
  canvas.style.border = '1px solid #000'
  // 创建上下文
  let ctx = canvas.getContext('2d')
 
  // 设置填充背景色
  ctx.fillStyle = 'transparent'
  // 绘制填充矩形
  ctx.fillRect(
    0, // x 轴起始绘制位置
    0, // y 轴起始绘制位置
    config.width, // 宽度
    config.height // 高度
  );
  // 保存上次绘制的 坐标及偏移量
  let client = {
    offsetX: 0, // 偏移量
    offsetY: 0,
    endX: 0, // 坐标
    endY: 0
  }
  // 判断是否为移动端
  let mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))
 
  // 初始化
  let inits = event => {
    // 获取偏移量及坐标
    let {
      offsetX,
      offsetY,
      pageX,
      pageY
    } = mobileStatus ? event.changedTouches[0] : event
 
    // 修改上次的偏移量及坐标
    client.offsetX = offsetX
    client.offsetY = offsetY
    client.endX = pageX
    client.endY = pageY
 
    // 清除以上一次 beginPath 之后的所有路径，进行绘制
    ctx.beginPath()
 
    // 根据配置文件设置进行相应配置
    ctx.lineWidth = config.lineWidth
    ctx.strokeStyle = config.strokeStyle
    ctx.lineCap = config.lineCap
    ctx.lineJoin = config.lineJoin
 
    // 设置画线起始点位
    ctx.moveTo(client.endX, client.endY)
 
    // 监听 鼠标移动或手势移动
    window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
  }
  // 创建鼠标/手势按下监听器
  window.addEventListener(mobileStatus ? "touchstart" : "mousedown", inits)
  // 绘制
  let draw = event => {
    // 获取当前坐标点位
    let {
      pageX,
      pageY
    } = mobileStatus ? event.changedTouches[0] : event
    // 修改最后一次绘制的坐标点
    client.endX = pageX
    client.endY = pageY
 
    // 根据坐标点位移动添加线条
    ctx.lineTo(pageX, pageY)
 
    // 绘制
    ctx.stroke()
  }
  // 结束绘制
  let cloaseDraw = () => {
    // 结束绘制
    ctx.closePath()
    // 移除鼠标移动或手势移动监听器
    window.removeEventListener("mousemove", draw)
  }
  // 创建鼠标/手势 弹起/离开 监听器
  window.addEventListener(mobileStatus ? "touchend" : "mouseup", cloaseDraw)
 
  // 取消-清空画布
  let cancel = () => {
    // 清空当前画布上的所有绘制内容
    ctx.clearRect(0, 0, config.width, config.height)
  }
 
  // 保存-将画布内容保存为图片
  let save = () => {
    // 将canvas上的内容转成blob流
    canvas.toBlob(blob => {
      console.log(blob);
      // // 获取当前时间并转成字符串，用来当做文件名
	  let date = Date.now().toString()
      // // 创建一个 a 标签
      let a = document.createElement('a')
      // // 设置 a 标签的下载文件名
      a.download = `${date}.png`
      // // 设置 a 标签的跳转路径为 文件流地址
      a.href = URL.createObjectURL(blob)
      // // 手动触发 a 标签的点击事件
      a.click()
      // // 移除 a 标签
      a.remove()
    })
  }
</script>