![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端笔记
酷jjs
追求卓越,激流勇进!
展开
-
如何在npm上发布属于自己的package?
npm包的开发;npm包的发布;npm包的查看;npm包的删除;npm包发布删除的注意事项;原创 2022-07-20 13:59:06 · 578 阅读 · 0 评论 -
深拷贝方法
深拷贝方法 =>引用数据类型(数组,对象)function deepClone(soure){ const targetObj=source.constructor===Array?[]:{}; for (let key in source ){ if(source.hasOwnProperty(keys)){ // 引用数据类型 if( source[keys] && typeof source[keys]=.原创 2022-04-12 14:46:21 · 450 阅读 · 0 评论 -
配置node版本,选择自己所需的node
一.首先把原来的node给卸载,从新开始去github下载一个nvmhttps://github.com/coreybutler/nvm-windows/releasesnvm-setup.zip二.然后安装,建议所有的安装命令都安装在除c盘以外的盘,然后自己命名三.命令行运行nvm install <version> 安装指定版本,如:安装4.4.0,nvm install 4.4.0nvm use <version> 切换使用指定的版本nodenvm原创 2022-01-06 14:29:45 · 1448 阅读 · 0 评论 -
react路由跳转,实现传参的3种方式:params、search和state
一.父页面import React, { Component } from 'react';import { Route, Switch, Redirect } from 'react-router-dom'import MynavLink from '../../components/mynavLink'import Message from './message'import News from './news'import Infos from './infos'class Home原创 2021-10-28 15:45:52 · 5575 阅读 · 0 评论 -
react配置多个代理,解决axios请求跨域问题
方法:在src文件夹下创建setupProxy.js文件const proxy = require('http-proxy-middleware');module.exports = function (app) { app.use( //遇见api前缀,走代理 proxy('/api', { target: 'http://localhost:7001', //目标地址 pathRewrite: { '^/api': '', },原创 2021-10-26 16:17:31 · 332 阅读 · 0 评论 -
获取字符串中最大的字符长度
//获取字符串中最大的字符长度---写法1 function getMax(str) { let strjson={}; for(let item of str ){ if(item in strjson){ strjson[item]++; }else{ strjson[item]=1; } } let nam...原创 2021-10-19 16:03:30 · 646 阅读 · 0 评论 -
递归函数举例
//n项求和数列 例如:100以内求和 1+2+3+...+98+99+100=5050 function sum(n) { if(n===1) return 1; return sum(n-1)+n; } var hh=sum(100); //5050 console.log(hh); //n以内奇数求和数列 例如:10以内奇数求和 1+3+5+7+9=25 func...原创 2021-10-19 15:40:38 · 164 阅读 · 0 评论 -
vue+elementUi发送邮件组件编写
父组件:<email-dialog v-if="showemailDialog" v-on:closeemailDialog="closeemailDialog" :multipleSelection="multipleSelection"></email-dialog>子组件:<template> <div> <el-dialog title="发送邮件" :visible.sync="visibl原创 2021-08-27 17:08:04 · 9322 阅读 · 3 评论 -
uniapp小程序环境路劲配置
/* 配置不同环境的根路径 */const devUrl='http://159.36.221.22/'; //开发环境根路径const proUrl='http://59.30.221.25/'; //生产环境根路径const curUrl=process.env.NODE_ENV='production'?proUrl:devUrl; //当前环境判断...原创 2021-05-18 11:07:23 · 1152 阅读 · 0 评论 -
正则实战:通过正则判断字符串是不是只包含数字和小数点
let reg = /^[\.\d]*$/; //校验字符串是否只包含数字或小数点if(reg.test(this.editTemplate.templateName)){ this.$message({ message: '模板名称不得为全数字,请重新输入!', type: 'warning' }); return fa...原创 2020-03-27 16:03:35 · 4218 阅读 · 0 评论 -
css3光影闪过效果
<div class="lightbox"> <div class="guangshu"></div></div>.lightbox{ width:7rem;height:7rem;overflow:hidden; }/* 光影划过效果 */.guangshu { display: block; position: re...原创 2020-03-19 17:42:35 · 1306 阅读 · 0 评论 -
正则实战:通过正则获取特殊字符段
let templateContent="回复成功系统${name}系统已获取回复内容${value}内容${哈哈}内容${你还}";let arr=[];let parmsList=[];/* 正则匹配获取${}内容 */if(templateContent){ let reg=/\$\{(.*?)\}/g; arr=templateContent.match(reg);...原创 2019-12-05 14:16:57 · 357 阅读 · 0 评论 -
使用bilibili开源的flvjs实现摄像头rtsp视频直播
实现摄像头的直播功能其实有许多方案,像是安装vlc插件、rtsp转rtmp然后使用videojs通过flash播放rtmp,以及hls .m3u8等方式然而现今的浏览器对于vlc插件几乎都不再支持了,flash在2020年也将被chrome停止支持,而.m3u8的方案用来做直播的话似乎延迟很高经过一番查找,最终决定使用B站(bilibili)开源的flvjs作为解决方案,其原理是后端用f...转载 2019-11-27 15:22:34 · 8415 阅读 · 9 评论 -
css3小球环形转圈效果
效果图:代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> body { margin: 0px; padding: 0px; } .warpbo...原创 2019-10-30 14:08:46 · 1728 阅读 · 0 评论 -
css3动画,动态打字效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @keyframes typing { from...原创 2019-10-24 15:05:01 · 488 阅读 · 0 评论 -
复选框触发事件
html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="js/jquery-1.11.1.js">script>head>body>input type="checkbox" id="checkall" name="checkname"/> script>原创 2016-10-28 15:04:04 · 3600 阅读 · 0 评论 -
文档上传,路径,文件名获取
“` Title 路径显示…文件名显示… var file = document.getElementById("file1"); var fileName = document.getElementById("fileName"); function handleFile(){ fileNa原创 2016-11-10 11:37:00 · 435 阅读 · 0 评论 -
jquery弹窗(系统提示框)效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="js/jquery-1.11.1.js"></script> <title>弹窗效果</title> <style> *{ margin: 0;padding: 0;list-style: none}原创 2016-11-10 16:12:29 · 4884 阅读 · 0 评论 -
angular表格生成,顺逆排序,搜索
<!doctype html><html ng-app="myApp1"><head> <meta charset="UTF-8"> <title>angular表格生成,顺逆排序,搜索</title> <script src="../src/angular.min.js"></script> <script> var m1=angular.modu原创 2016-11-11 10:53:52 · 831 阅读 · 0 评论 -
a标签锚点定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .nav_box{ height: 40px;} .nav{padding:10px 30px;} .nav1{background: red;}原创 2016-11-14 17:04:05 · 1231 阅读 · 2 评论 -
跨页面锚点跳转效果
页面一:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.11.1.js"></script> <style> .nav_box{ height: 40px;} .nav{pa原创 2016-11-14 17:11:05 · 2193 阅读 · 0 评论 -
angular隔行换色效果
<!doctype html><html ng-app="myApp1"><head> <meta charset="UTF-8"> <title>angular</title> <script src="../src/angular.min.js"></script> <script> var m1=angular.module('myApp1原创 2016-11-15 09:18:52 · 1912 阅读 · 1 评论 -
angular输入框内容复制、剪切、粘贴事件触发
<!doctype html><html ng-app="myApp1"><head> <meta charset="UTF-8"> <title>angular</title> <script src="../src/angular.min.js"></script> <script> var m1=angular.module('myApp1'原创 2016-11-15 10:28:18 · 4054 阅读 · 1 评论 -
JS判断浏览器,不考虑版本
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS判断浏览器,不考虑版本</title></head><body> <script> function myBrowser(){ var userAgent = navigator.userAg原创 2016-11-22 15:29:53 · 353 阅读 · 0 评论 -
JS判断浏览器,考虑版本
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS判断浏览器,考虑版本</title></head><body> <script> function myBrowser(){ var userAgent = navigator.userAge原创 2016-11-22 15:31:00 · 423 阅读 · 0 评论 -
jquery根据数据显示不同背景图效果
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <script src="js/jquery-1.11.1.js"></script> <style type="text/css"> *{margin:0;padding: 0;} li{list-style: n原创 2016-11-10 16:34:08 · 2221 阅读 · 0 评论 -
jquery表格动态添加及各行变色效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格动态添加及各行变色效果</title> <script src="js/jquery-1.11.1.js"></script> <style type="text/css"> *{padding: 0;marg原创 2016-11-10 16:21:53 · 1626 阅读 · 0 评论 -
jquery模拟select下拉框
<!DOCTYPE html><html lang="en"><head> <title>jquery模拟SELECT框</title> <meta charset="utf-8"> <style> body{padding:0;margin:0;font-size:12px;} ul,li{list-style:none;padding:原创 2016-11-10 15:58:22 · 617 阅读 · 0 评论 -
css布局:等高布局
等高布局:(左右两边,一侧设置高度,另一侧自适应)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>等高布局</title> <style> *{ margin:0;padding: 0;} .wrap{ width:1000px; margin: 0 a原创 2016-08-29 17:01:57 · 662 阅读 · 0 评论 -
css布局:圣杯布局
圣杯布局:左右两边固定宽度,中间不设置宽度(自适应页面宽度)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局</title> <style> *{ margin:0;padding: 0;} .center{height:500px;backgro原创 2016-08-29 14:10:30 · 642 阅读 · 1 评论 -
加载动画、提示框动态添加(普通提示框、确认提示框、消息提示框)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css.css"> <script src="jquery-1.11.1.js"></script> <script src="js.j原创 2016-12-05 16:11:29 · 930 阅读 · 0 评论 -
Jquery提示框效果(确认提示框)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>普通提示框和确认提示框</title> <script src="js/jquery-1.11.1.js"></script> <style type="text/css"> *{margin: 0;padding原创 2016-11-23 09:49:34 · 8710 阅读 · 0 评论 -
'autocomplete="off"'在Chrome中不起作用解决方案
<input type="text" class="loginuser" maxlength="16" autocomplete="off" placeholder="请输入账号"/><input type="password" class="loginpwd" maxlength="16" autocomplete="new-password"placeholder="请输入密码"/>关键原创 2016-12-08 15:24:11 · 1138 阅读 · 0 评论 -
jq给元素动态添加id
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jq给元素动态添加id</title> <script src="js/jquery-1.11.1.js"></script></head><body><ul> <li class="box"></li> <li cl原创 2016-12-22 17:26:29 · 11415 阅读 · 0 评论 -
jq节点的克隆添加
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>jq节点的克隆添加</title> <script src="js/jquery-1.11.1.js"></script> <style> .boxBox1{overflow:hidden;} .b原创 2016-12-23 14:20:49 · 1823 阅读 · 0 评论 -
多行文字在div实现垂直居中的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多行文字在div实现垂直居中的方法</title> <style> .middle-box{display: table; height: 300px;width:300px;border:1px solid #00000原创 2017-01-16 15:17:28 · 1646 阅读 · 1 评论 -
分页效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="src/jquery-1.11.1.js"></script> <script src="src/jquery.pagebar.1.0.0.js"></script> <link转载 2017-01-16 16:10:34 · 652 阅读 · 0 评论 -
提示框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="src/jquery-1.11.1.js"></script> <script src="js/Xprompt.js"></script> <link rel="sty原创 2017-01-16 16:36:17 · 321 阅读 · 0 评论 -
鼠标滚动事件:回到顶部按钮
<!doctype html><html><head><script src="jquery.js"></script><style>body{height:10000px;}.top{width:60px;height:30px;background-color:black;color:white;position:fixed;bottom:10px;right:10px;}</sty原创 2017-01-16 17:04:53 · 916 阅读 · 0 评论 -
jq/css鼠标经过图片放大效果
<!doctype html><html><head><style>img{display:block;}.box{width:200px;border:solid 2px gray;height:160px;overflow:hidden;}.box img{width:200px;height:160px;position:relative;}</style><script sr原创 2017-01-16 17:11:24 · 11691 阅读 · 0 评论