目录
includes() 方法用于判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false。
js立即执行函数:方便我们在react代码的return下面定义函数
判断传进来的object是否有空值,判断传进来的Array是否有空值
加上crossOrigin="anonymous"之后导致图片无法显示
pc和h5通讯方式:iframe跨域消息通信(postMessage和message事件)
-
将字符串中某个字符串删除
方法一:使用replace函数替换(比较建议使用
//去除字符串中含有的-
var str = '178-1980';
//注意:此处不可写作:str.replace('-', '');要写作:str = str.replace('-', '');
// replace:返回新的字符串,一定要重新接收,不然替换不了
str = str.replace('-', '')//最后获得的是1781980
方法二:使用字符串分割函数再聚合
var str = "189-1909";
var a = str.split("-");//会得到一个数组,数组中包括利用-分割后的多个字符串(不包括-)
var newStr = a.join("");//数组转成字符串,元素是通过指定的分隔符进行分隔的。此时以空串分割:即直接连接//最后获得1891909
-
includes() 方法用于判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false。
下面代码判断a中是否包含'-'
a.includes('-')
-
筛选
函数Array.prototype.filter()
var words = ['1234', '12345', '123456', '1234567'];
const result = words.filter(word => word.length > 6);
console.log(result);//> 打印出数组["1234567"]
-
排序
单个条件
function compareboxId(a, b) {
if (a.boxId < b.boxId) return -1;
if (a.boxId > b.boxId) return 1;
return 0;
}
多个条件:将多个条件拼接成一个新的Key值,然后对这个key值进行排序
function compareRegistered(a, b) {
const akey = a.registered+a.boxId;
const bkey = b.registered+b.boxId;
if (akey > bkey) return -1;
if (akey > bkey) return 1;
return 0;
}
当排序时,要求必须等于某个字符串时
方法一:
sort = (array) =>{
let newArrayAll = [];
let newArray = [];
let newArrayApp = [];
let newArrayEmpty = [];
for(var i=0;i<array.length;i++){
if(array[i].channelType==='aaa'||array[i].channelType==="abb"){
newArray.push(array[i])
}else if(array[i].channelType==='bbb'){
newArrayApp.push(array[i])
}else{
newArrayEmpty.push(array[i])
}
}
newArrayAll = newArray.concat(newArrayApp).concat(newArrayEmpty);
return newArrayAll;
}
方法二:
sort = (arr) =>{
let flightArr1 = arr.filter((ele) => {
console.log("===ele",ele.channelType)
return ele.channelType==='基地办公系统'||ele.channelType==='办公网';
});
let flightArr2 = arr.filter((ele) => {
return ele.channelType==='手机APP';
});
let Flights = [...flightArr1, ...flightArr2];
return Flights;
}
方法三:
sort = (arr) =>{
arr.sort((a,b)=>{
return a.channelType -b.channelType
})
return arr;
}
-
控制页面内所有console.log是否在控制台打印出数据
const debugSwitch = false;//true是打印
if (!debugSwitch) {
console.log = () => {};
}
-
js截取字符串
stringObject.split("url")[1] 这个方法可以用来截取url中特定字符串
-
数组元素的添加
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。
-
字符判断
方法1:
var p = /[0-9]/; var b = p.test(string);//true,说明有数字
var p = /[a-z]/i; var b = p.test(string);//true,说明有英文字母
var p = /[0-9a-z]/i; var b = p.test(string);//true,说明有英文字母或数字
方法2:
<script type="text/javascript">
$("#validate").click(function(){
if(isSimplePwd($("#password").val())<3){
alert("密码过于简单!");
}
})
/**
*简单验证密码强度
*必须包含数字、小写字母、大写字母、特殊字符 其三
*如果返回值小于3 则说明密码过于简单
*/
function isSimplePwd(s){
if(s.length<6){
return 0;
}
var ls = 0;
if(s.match(/([a-z])+/)){
ls++;
}
if(s.match(/([0-9])+/)){
ls++;
}
if(s.match(/([A-Z])+/)){
ls++;
}
if(s.match(/[^a-zA-Z0-9]+/)){
ls++;
}
return ls;
}
</script>
匹配为电话号码
componentDidMount(){
// this.judgeText("030-4557777")
this.judgeText("1234567890")
}
judgeText=(text)=>{
var value = text;
console.log("value",value)
var reg0 = /^1[3456789]\d{9}/; // 长度为11的数字
var reg1 = /^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/; // 固定电话
if ( reg0.test(value) || reg1.test(value) ) {
console.log("电话号码")
} else {
console.log("不是电话号码")
return ;
}
}
-
整除
//求余数
document.write(1%4);
document.write(6%4);
//求商
console.info(1/4);
console.info(6/4);
//求商,取整
console.info(parseInt(1/4));
console.info(parseInt(6/4));
console.info('----');
//天花板取整
console.info(Math.ceil(1/4));
//地板取整
console.info(Math.floor(1/4));
-
object
获取object的key:Object.keys(对应的object)
获取object的value:Object.values(对应的object)
-
将一个数组变成字典
let webglObjectParamsArray = webglObjectParams?.map(item=>{
console.log('==========item====',item)
return [item?.code,item.value]
});
console.log('========webglObjectParamsArray=====',webglObjectParamsArray)
let webglObjectParamsJson = Object.fromEntries(webglObjectParamsArray);
console.log('========webglObjectParamsJson=====',webglObjectParamsJson)
-
合并两个object
let obj = {...old,...new}
记住新的一定要放在后面
-
合并两个array
let obj = [...old,...new]
记住新的一定要放在后面
-
es6数组的flat(),flatMap()函数
作用:处理获取一个数组内的数组
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
-
将一个数组有共同部分放一起
引用lodash,使用groupBy
console.log('======kds',_.groupBy(mesh, 'code'));
-
js立即执行函数:方便我们在react代码的return下面定义函数
箭头函数
{
(()=>{
let newGroupList = [];
if(!_.isEmpty(groupList)){
for (let key in groupList) {
newGroupList = groupList[key];
}
}
return(
<div></div>
)
})}()
也可以类似定义命名函数
(function (x) {
console.log('x + x = ', x + x);
})(5) // x + x = 10
-
将两个数组的值做映射
params1 = [{code: "boost", d_type: "float"},{code: "test", d_type: "text"}]
params2 = [{code: "boost", sortorder: 0},{code: "test", sortorder: 1}]
let groupByParams1 = _.groupBy(params1, 'code');
let groupByParams2 = _.groupBy(params2, 'code');
let mergeParams = _.merge(groupByParams1, groupByParams2);
let newParams = [];
for(let key in mergeParams){
newParams.push(mergeParams[key][0]);
}
-
将一个object内,具有某个特性的值放一起。比如values = {min1:"1",min1:"3",max1:2,max1:"4",price:5,},将min1和max1的值放到同一个数组,将min2和max2的值放到同一个数组,最后的效果是[[1,2],[3,4]]
//原数组
let values = {min1:"1",min1:"3",max1:2,max1:"4",price:5,}
//将object转化为数组
let valuesArray = Object.entries(values);
//filter出包含max和min
let valuesFilter = valuesArray?.filter(([key])=>["min","max"].includes(key.slice(0,3)));
//将共同部分放一起
let groupValues = _.groupBy(valuesFilter,([key])=>key[3]);
let passArray = [];
for(let key in groupValues){
let valueItem = groupValues[key];
let combineRange = [];
for(let i=0;i<valueItem?.length;i++){
combineRange.push(valueItem[i][1]);
}
passArray.push(combineRange);
}
-
js如何更新值
引入lodash
Import _ from ‘lodash’;
var users = [
{ 'user': 'barney', 'active': false },
{ 'user': 'fred', 'active': false },
{ 'user': 'pebbles', 'active': true }
];
_.findIndex(users, function(o) { return o.user == 'barney'; });
// => 0
Let newValue = { 'user': 'barney2’, 'active': false },
users[_.findIndex(users, function(o) { return o.user == 'barney'; })] = newValue;
-
判断是否为空值
Lodash的_.isEmpty(value): 如果 value 为null ,0,1,或 undefined,那么返回 true,否则返回 false。
_.isNil(value): 如果 value 为null 或 undefined,那么返回 true,否则返回 false。
-
常用正则
let str = 'a234'
let reg=/(^[a-zA-Z0-9_]{6}$)|(^[a-zA-Z0-9_]{4}$)/;
if(!reg.test(str)){
alert("不正确!");
}else{
alert("正确!");
}
1、15位或18位字母数字
(^[a-zA-Z0-9_]{6}$)|(^[a-zA-Z0-9_]{4}$)
2、JY加14位数字或字母的证件号码
/^JY[a-zA-Z0-9]{14}$/
3、沪餐证字+16位数字或字母
/^沪餐证字[a-zA-Z0-9]{16}$/
4、QS加12位数字字母或SC加14位数字字母的证件号码
/(^QS[a-zA-Z0-9]{12}$)|(^SC[a-zA-Z0-9]{14}$)/
5、SP加16位数字或字母的证件号码
/^SP[a-zA-Z0-9]{16}$/
6、验证手机号码为11位,且以1开头
^1[0-9]{10}$
7、验证邮箱
以数字字母开头,中间可以是多个数字字母下划线或“-”,
然后是“@”符号,后面是数字字母,
然后是“.”符号加2-4个字母结尾
/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
8、固定电话
/(\d{4}-)?\d{6,8}/
区号-电话号码,或者可以不输入区号,6位,7位,8位电话都可以
9、 限制18位字母或者数字,并且不包含某几个特定字符。同时,将输入框的小写字母转成大写字母
<Form.Item
label="统一信用代码"
name="code"
rules={[
{ required: true, message: '请输入统一信用代码' },
({ getFieldValue }) => ({
validator(_, value) {
if (value) {
let reg = /^[0-9a-zA-Z]{18}/g;
if (
reg.test(value) &&
!value.toUpperCase().includes('I') &&
!value.toUpperCase().includes('O') &&
!value.toUpperCase().includes('Z') &&
!value.toUpperCase().includes('S') &&
!value.toUpperCase().includes('V')
) {
return Promise.resolve();
}
return Promise.reject(new Error('请输入正确的统一信用代码'));
} else {
return Promise.resolve();
}
},
}),
]}
>
<Input
maxLength={18}
placeholder="请输入"
style={{ width: '468px', textTransform: 'uppercase' }}
/>
</Form.Item>
10、校验身份证号码
reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
11、限制最多只能输入四位小数
//限制输入框只能输入四位小数
const limitDecimals = (value) => {
if (value) {
let reg = /^\d+(\.\d{0,4})?$/;
if (reg.test(value)) {
return value;
} else {
let integersValue = value.split('.')[0];
let decimalsValue = value.split('.')[1];
if (integersValue && decimalsValue) {
return Number(integersValue + '.' + decimalsValue.slice(0, 4));
} else {
return '';
}
}
} else {
return '';
}
};
//内容区域
<InputNumber
min={0}
max={999999}
value={record.max}
step={0.01}
onChange={(e) => onChange(e, record.key)}
formatter={limitDecimals}
parser={limitDecimals}
/>
12、限制输入框只能输入整数、限制输入框只能输入四位小数
//限制输入框只能输入整数
const onlyIntegers = (value) => {
return value.replace(/[^\d]/g, '');
};
//限制输入框只能输入四位小数
const limitDecimals = (value) => {
return value.replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3');
};
<InputNumber
key={record.key}
min={minDefaultValue}
max={maxDefaultValue}
value={text}
onChange={(e) => onChange(e, record.key)}
step={maxDefaultValue == 9999 ? 1 : 0.01}
stringMode
formatter={maxDefaultValue == 1 ? limitDecimals : onlyIntegers}
parser={maxDefaultValue == 1 ? limitDecimals : onlyIntegers}
disabled={record.key == '13' ? true : false}
/>
13、限制只能输入大写字母,和英文;
function onChangeText(e, field) {
let newValue = e.replace(/([^a-zA-Z;])/g, '')
let paramsData = _.cloneDeep(tableData);
paramsData?.forEach((item) => {
if (item?.fieldName === field) {
item.fieldValue = newValue.toUpperCase();
}
});
setTableData(paramsData);
}
<Input
style={{ width: 120 }}
value={record.fieldValue}
onChange={(e) => onChangeText(e.target.value, record.fieldName)}
maxLength={50}
/>
14、限制第一位只能是1-9,最后一位只能是数字。中间9位可以是数字或者.
<Form.Item
label="版本号"
name="appVersion"
rules={[
{ required: true, message: '请输入版本号!' },
{ pattern: /^[1-9][0-9\.]{9}[0-9]$/, message: '版本号格式为:数字+"."+数字+"."+数字' },
]}
>
<Input placeholder="请输入版本号" maxLength={11} />
</Form.Item>
15、限制只能输入汉字、数字、字母,不能输入符号
let reg = /^[\u4e00-\u9fa50-9A-Za-z]+$/;
if (reg.test(value)) {
return Promise.resolve();
}
return Promise.reject(new Error('请输入正确的小程序名称'))
16、限制不能输入表情包
// utf8mb4 正则
const utf8mb4Reg = /[^\u0000-\uFFFF]/g; // eslint-disable-line
// emoji 表情正则
const emojiReg =
/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/g;
// 包含 utf8mb4 的 4 字节
const isUTF8MB4 = utf8mb4Reg.test(message);
// 包含 emoji 表情
const isEmoj = emojiReg.test(message);
// 校验特殊字符 并删除
isUTF8MB4 && (message = message.replace(utf8mb4Reg, ''));
isEmoj && (message = message.replace(emojiReg, ''));
17、去除空格
var that = this;
var str = that.data.title;
//去除首尾空格
str.replace(/(^\s*)|(\s*$)/g, "");
//去除左边空格
str.replace(/(^\s*)/g, "");
//去除右边空格
str.replace(/(\s*$)/g, "");
-
金额元到分的精度问题
yuantofen(val) {
console.log('==========val',val)
var s = val.toString().split(".")
var yuan = parseInt(s[0]) * 100;
var fen = 0;
if (s.length > 1) {
let fenVal = (parseInt(s[1].substr(0, 1))) * 10;
fen += fenVal;
if (s[1].length > 1) {
fen += parseInt(s[1].substr(1, 1));
}
}
var fee = yuan + fen;
return fee;
}
,
async pay(id, orderNo) {
this.yuantofen(this.totalPrice)
}
-
js浮点数精度
1、数据展示类
当你拿到 1.4000000000000001 这样的数据要展示时,建议使用 toPrecision 凑整并 parseFloat 转成数字后再显示,如下:
parseFloat(1.4000000000000001.toPrecision(12)) === 1.4 // True
封装成方法就是:
function strip(num, precision = 12) {
return +parseFloat(num.toPrecision(precision));
}
2、数据运算类
对于运算类操作,如 +-*/,就不能使用 toPrecision 了。正确的做法是把小数转成整数后再运算。以加法为例:
/**
* 精确加法
*/
function add(num1, num2) {
const num1Digits = (num1.toString().split('.')[1] || '').length;
const num2Digits = (num2.toString().split('.')[1] || '').length;
const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
return (num1 * baseNum + num2 * baseNum) / baseNum;
}
具体解释可查看链接:JavaScript 浮点数陷阱及解法 · Issue #9 · camsong/blog · GitHub
-
限制只能输入正数字和一位小数点,并且小数只能输入两位
<input class="input" v-model="price" type="digit" placeholder="请输入商品价格" @input="onLimitPrice" maxlength="20"/>
methods: {
onLimitNumber(value) {
value = value.replace(/[^\d.]/g,"");//清除"数字"和"."以外的字符
value = value.replace(/^\./g,"");//验证第一个字符是数字而不是字符
value = value.replace(/\.{2,}/g,".");//只保留第一个.清除多余的
value = value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
//value = value.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3'); //只能输入一个小数
value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
//去除负号(限定输入正数)
if(value.indexOf('-')>=0){
value = value.replace(/-/g,'')
}
return value;
},
onLimitPrice(event) {
let value = event.detail.value;
let newValue = this.onLimitNumber(value)
setTimeout(() => {
this.price = newValue
this.formData.sell_price = this.yuantofen(this.price)
}, 0)
},
}
-
限制只能输入正负数字和一位小数点,并且小数只能输入两位
<input class="input" v-model="price" type="digit" placeholder="请输入商品价格" @input="onLimitPrice" maxlength="20"/>
methods: {
onLimitNumber(value) {
value = value.replace(/[^\d.-]/g,"");//清除"数字"和"."和"-"以外的字符
value = value.replace(/^\./g,"");//验证第一个字符是数字而不是字符
value = value.replace(/\.{2,}/g,".");//只保留第一个.清除多余的
value = value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
//value = value.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3'); //只能输入一个小数
value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
// 检查是否有多个负号,将除首位外的负号替换为空
if (value.indexOf('-') !== value.lastIndexOf('-')) {
value = value.replace(/-/g, function(match, offset) {
return offset === 0 ? '-' : '';
});
}
return value;
},
onLimitPrice(event) {
let value = event.detail.value;
let newValue = this.onLimitNumber(value)
setTimeout(() => {
this.price = newValue
this.formData.sell_price = this.yuantofen(this.price)
}, 0)
},
}
-
判断传进来的object是否有空值,判断传进来的Array是否有空值
// 判断传进来的object是否有空值
export function isObjectEmpty(value) {
let obj = Object.keys(value);
let news = [];
obj.map((e) => {
if (value[e] === null || value[e] === undefined || value[e] === '' || value[e] === ' ') {
news.push(true);
} else {
if (typeof value[e] == 'object') {
news.push(isObjectEmpty(value[e]));
}
}
});
if (news.indexOf(true) >= 0 || JSON.stringify(value) === '{}') {
return true;
} else {
return false;
}
}
// 判断传进来的Array是否有空值
export function isArrayEmpty(value) {
let news = []
value.map(item => {
if (item === null || item === undefined || item === "") {
news.push(true)
} else {
if (typeof(item) == "object") {
news.push(isObjectEmpty(item))
}
}
})
if (news.indexOf(true) >= 0) {
return true
} else {
return false
}
}
-
获取一组十位数的随机数
// 获取一组十位数的随机数
export function RndNum() {
var rnd="";
for(var i=0;i<10;i++)
rnd+=Math.floor(Math.random()*10);
return rnd;
}
-
防重点击
export const NoDoublePress = {
lastPressTime: 1,
onClick(callback) {
let curTime = new Date().getTime();
if (curTime - this.lastPressTime > 2000) {
this.lastPressTime = curTime;
callback();
}
},
};
import { NoDoublePress } from "../../../../../utils/common";
<a onClick={async () => {
NoDoublePress.onClick(async () => {
...
});
}}>
模板下载
</a>
-
通过后端返回的接口下载文件
<a onClick={async () => {
NoDoublePress.onClick(async () => {
const data = await getExcelTmpPath({ ... });
if (data.code === '000000') {
message.success('开始下载文件');
console.log(data.data)
window.location.href = data.data
} else {
message.error(data.msg);
}
});
}}>
模板下载
</a>
-
<img >加上crossOrigin="anonymous"之后导致图片无法显示
给url加上时间戳是有效的,是因为cdn 配置缓存了数据:image.src = url + '?time=' + new Date().valueOf();
let image = new Image()
image.setAttribute('crossOrigin', 'anonymous')
image.src = url + '?time=' + new Date().valueOf();
let that = this;
image.onload = () => {
// ... do something
}
image.onerror = (err) => {
console.log(err)
};
-
JSON.parse报错问题
切记我们在使用JSON.parse方法的时候,请先用JSON.stringify方法
JSON.parse(JSON.stringify(data))
JSON数据的key与value必须使用双引号""包裹
将string转为json
// string转为json
export function toJson(str) {
//格式应该为:{'T_PAY_WAY': 'WX'}
let newStr = {};
if (str && typeof str == 'string') {
let newReplace = str.replace(/'/g, '"');
newStr = JSON.parse(newReplace);
return newStr;
}
}
-
json转为map
// json转为map
export function jsonToMap(obj) {
if (obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
}
}
-
map转为json
// map转为json
export function mapToJson(strMap) {
if (strMap) {
let obj = Object.create(null);
for (let [k, v] of strMap) {
obj[k] = v;
}
return obj;
}
}
-
获取object第一个key,key的第一个value
newTableData?.forEach((item, i) => {
//获取第一个key
item.fieldExplain = Object.keys(item)[0]
//获取第一个value
item.fieldValue = item[Object.keys(item)[0]]
});
-
pc和h5通讯方式:iframe跨域消息通信(postMessage和message事件)
iframe跨域消息通信(postMessage和message事件)_胖鹅68的博客-CSDN博客_message事件
-
let of与let in
for(let i in arrObj){
console.log("i:", i); // i: 0 i: 1 i: 2
}
for(let i of arrObj){
console.log("i:", i); // i: {name: 'aaa', age: 11} i: {name: 'bbb', age: 22} i: {name: 'ccc', age: 33}
}
-
实现下载
-
实现将file格式的文件转成Url
URL.createObjectURL(file格式的文件)
-
校验手机号
const phoneRules = (rule,value,callback) =>{
if(!value){
callback(new Error('请输入用户手机号'))
}else{
const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
if(reg.test(value)){
callback()
}else{
return callback(new Error('请输入正确的用户手机号'))
}
}
}
-
手机号脱敏
export const dealPhone = (num:string) =>{
return num.slice(0,3) + '****' + num.slice(num.length - 4 ,num.length)
}
-
判断一个对象内属性key是否有重复的
可以通过遍历对象的属性,将属性名存入一个数组中,再用数组的某些方法进行判断,比如用Set对象去重后判断长度是否相等。
示例代码:
```javascript
function hasDuplicatedKeys(obj) {
const keys = [];
for (const key in obj) {
if (keys.includes(key)) {
return true;
}
keys.push(key);
}
return false;
}
const obj1 = { a: 1, b: 2, c: 3 };
console.log(hasDuplicatedKeys(obj1)); // false
const obj2 = { a: 1, b: 2, c: 3, d: 4, a: 5 };
console.log(hasDuplicatedKeys(obj2)); // true
```
-
在线预览office文件
const previewHandle = (url:any) =>{
let url = encodeURIComponent(url)
let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src=' + hurl
window.open(officeUrl,'_target')
}
-
video标签点击全屏播放声音,点击退出全屏静音
import _ from "lodash";
import { useState, useEffect } from 'react'
function Home() {
const [fullscreen, setFullscreen] = useState(false)
const handleClick = _.debounce(() => {
const element = document.getElementById('video')
if(fullscreen){
element.muted = true //使视频静音
//退出全屏
console.log('exit')
if (document?.exitFullscreen){
document.exitFullscreen
}else if (document?.webkitCancelFullScreen){
document.webkitCancelFullScreen
}else if (document?.mozCancelFullScreen){
document.mozCancelFullScreen
}else if (document?.msExitFulIscreen){
document.msExitFulIscreen
}
}else{
element.muted = false //取消视频静音
//全屏
if (element?.requestFullscreen){
element.requestFullscreen
}else if (element?.webkitRequestFul1Screen){
element.webkitRequestFul1Screen
}else if (element?.mozRequestFullScreen){
element.mozRequestFullScreen
}else if (element?.msRequestFulIscreen){
// IE11
element.msRequestFulIscreen
}
}
setFullscreen(!fullscreen)
},300)
return (
<div className="Home">
<video id="video" onTouchEnd={handleClick} className="swiper-video" autoPlav loop muted style= {{ obiectFit:"fill" }}>
<source src='' type="video/mp4"></source>
</video>
</div>
);
}
export default Home;
-
HTML5标题设置
window.document.title = '自定义标题'