文章目录
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
中进行,因此需要触发不同的事件
-
- 事件的创建
JS中,最简单的创建事件方法,是使用Event构造器:
var myEvent = new Event('event_name');
但是为了能够传递数据,就需要使用 CustomEvent 构造器:
var myEvent = new CustomEvent('event_name', {
detail:{
// 将需要传递的数据写在detail中,以便在EventListener中获取
// 数据将会在event.detail中得到
},
});
-
- 事件的监听
JS 的 EventListener 是根据事件的名称来进行监听的,比如我们在上文中已经创建了一个名称为event_name
的事件,那么当某个元素需要监听它的时候,就需要创建相应的监听器:
//假设listener注册在window对象上
window.addEventListener('event_name', function(event){
// 如果是CustomEvent,传入的数据在event.detail中
console.log('得到数据为:', event.detail);
// ...后续相关操作
});
至此,window对象上就有了对event_name
这个事件的监听器,当 window 上触发这个事件的时候,相关的 callback 就会执行。
-
- 事件的触发
对于一些内置(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!"
-
- 栗子
<!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>