js
文章平均质量分 66
百事可口
我们都在奔赴各自不同的人生
展开
-
angular框架-通过依赖注入方式挂载loading以实现任意地方一行代码调用全局loading
本文主要阐述关于在angular项目中,loading的常见的使用方式,以及如何全局挂载loading,实现一行代码控制loading开,一行代码控制loading关闭。原创 2023-06-09 15:30:32 · 1050 阅读 · 0 评论 -
【记录】可编辑表格并且支持批量生成每一行引入到表格中
一个页面 包括了一个可编辑表格,和一个支持批量创建的弹窗,弹窗字段如下图引入弹窗包括了 四个字段 【创建名字】、【全部数量】、【公猪数量】、【母猪数量】原创 2023-03-01 14:41:40 · 360 阅读 · 0 评论 -
for循环中异步请求问题:循环里面使用异步函数,如何等所有的异步函数都执行完再进行下一步
在一个列表循环里,对数据进行赋值,调用接口,循环外后面的代码需等待所有请求执行完成后再去执行。2. for await…of实现(推荐)这种方法是es6新语法,其介绍如下:for…of 针对可迭代对象身上的(array, map, set, string, typedarray, argements)迭代的是对象列表中的值(value) ,一般情况遍历数组for…in 针对对象的属性进行无序遍历,除了symbol类的属性遍历的是属性,一般情况适用于对象遍历该方法使用起来,相比Promise.all要原创 2023-02-10 17:12:50 · 4782 阅读 · 0 评论 -
js处理数据【2】:ant的穿梭框在进行搜索时保留原有已选择去右侧的数据并做去重过滤(数组中根据对象的字段去重)
使用ant-design穿梭框点击查询后的JS数据处理原创 2022-10-18 11:10:34 · 1016 阅读 · 4 评论 -
js处理数据【1】:将数组里的对象中相同的值提取出来进行分组,以该字段相同的为一组
也就是说 以 sowPigID 进行分组,提起出相同的sowPigID。后端期望在传参处理成这样传参(demo ,模拟)下面为举例的json格式。原创 2022-10-13 17:46:13 · 2034 阅读 · 3 评论 -
一览JavaScript模块化 包含Commonjs、AMD、CMD、ES6 modules总结
ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS模块的加载机制是,输入的是被输出的值的拷贝。在ES6中,我们可以使用 import 关键字引入模块,通过 exprot 关键字导出模块,功能较之于前几个方案更为强大,也是目前所推崇的,require命令的基本功能是,读入并执行一个JavaScript文件,然后返回该模块的exports对象。,使用它导出后,在import的时候,不需要加上{},模块名字可以随意起。es6在导出的时候有一个默认导出,.原创 2022-08-09 15:21:07 · 606 阅读 · 0 评论 -
vue封装公共弹窗删除业务组件支持.then.catch调用
公共组件的封装:一个中台管理系统,每个删除点击后都弹出弹窗,需要输入密码进行验证,输入正确,则可以删除,输入错误则提示错误message。原创 2022-02-24 18:12:09 · 1108 阅读 · 0 评论 -
vue+nodejs+mysql宝塔面板的部署与使用发布到服务器(原创详细版)
前置条件:1.云服务器(阿里云,腾讯云都行)2.域名 (没有就用服务器公网ip访问)3.已经打包好的前端项目4.nodejs项目5.mysql和nodejs在本地已经调通第一步给服务器做系统,这里我选择的是centors 8.2 2. 好了之后远程连接服务器,这里你也可以选择xshell等其他连接,或者阿里云网页端浏览器自带的也行。进入服务器后,可以通过输入“sudo su root”切换至root账号Centos安装脚本:这里可以去宝塔官网看: 宝塔linux面板官网然后根据给你的地址,原创 2021-11-11 15:34:33 · 5288 阅读 · 3 评论 -
Animate.css+wow.js实现页面滚动到可视区显示动画效果
今天看迅雷官网 https://www.xunlei.com/v2018/dist/aboutus.html实现的滚动到可视区域后显示动画,自己之前没做过这种,非常感兴趣,然后问小伙伴,大部分都没做过类似的,于是乎我只能自己查了第一想到的是swiper,之前写轮播图用过。https://www.swiper.com.cn/https://www.swiper.com.cn/usage/animate/index.html但是引入了之后 发现不是特别适合我 而且还有5版本6版本一系列写法兼容问原创 2021-11-01 16:37:37 · 3174 阅读 · 5 评论 -
vue之事件总线(EventBus)慎用
通常适用于兄弟组件传值最好规划好作用范围- 通过实例控制范围(不同范围不同实例)- 通过命名空间控制范围(不同范围共享同一实例)新建event-bus.jsimport Vue from 'vue'export const EventBus = new Vue()在局部组件引入import { EventBus } from "/src/event-bus.js";注意,在组件销毁时需要先进行关闭监听!beforeDestroy() { EventBus.$off("aMsg原创 2021-10-13 15:43:58 · 633 阅读 · 0 评论 -
在WebPack中使用TypeScript
npm install typescriptnpm i ts-loader配置webpack.config.js的loader { test: /\.ts$/, exclude: /node_modules/, use: ['ts-loader'] }webpack全部配置如下:const path = require('path')//node内置path模块const { webpack } = require('webpack')const HtmlPlugin =原创 2021-09-28 15:40:44 · 591 阅读 · 0 评论 -
es6的export default 和 export 区别
在一个js文件或中,export、import可以有多个,export default只能有一个,通过export方式导出,在导入时要加{ },export default则不需要。export 对应的 import 需要同 export导出的变量名或函数名 import{a,b}export default对应的 import 不需要知道 export抛出的变量名或函数名 import 随便写 from ‘…’...原创 2021-01-07 20:52:31 · 120 阅读 · 1 评论 -
vue-cli3的解决跨域问题处理简单方法
vue-cli最新版不像2版本一样,很多文件都没显示出来,简单解决跨域:和package.json同级创建文件vue.config.js代码如下:module.exports = { devServer: { open: true, //是否自动弹出浏览器页面 host: "localhost", port: '8080', https: false, hotOnly: false, pr原创 2020-10-01 02:15:43 · 663 阅读 · 0 评论 -
js的原型链(没写完)
原型:每个构造方法中都有一个prototype属性,该属性指向了一个对象,这个对象就是原型对象,简称原型。这个对象的所有属性和方法,都会被构造函数的实例继承。原型链:每个对象都有一个__proto__,IE不支持该属性是存在,没有提供访问方式。它指向它构造函数的prototype原型对象,而prototype原型对象又具有一个自己的原型对象,就这样层层向上直到Object对象的原型prototype。 这个路径就是原型链。...原创 2020-09-19 20:28:00 · 117 阅读 · 0 评论 -
关于js的防抖和节流区别及实现方式
节流:多次事件触发的时候,把前面的事件取消,只会执行最后一次。防抖:只执行第一次,后面触发的不执行。防抖思路:加一个flag开关 true falseif语句判断 数据请求开始立即将flah关闭,成功后再将flag进行开启true,节流思路:clearTimeout();可加setTimeout请求成功后,需要把flag重新设置成true,以便用户再次使用触发事件...原创 2020-07-29 19:49:44 · 305 阅读 · 0 评论 -
原生js实现小米轮播图
仅用作个人练习。轮播图功能如下:1:自动定时切换图片2:鼠标移入暂停切换,显式左右切换的按钮3:鼠标浮动到轮播序号上,可以自动切换。效果如下:代码部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box {原创 2020-06-01 22:19:26 · 690 阅读 · 0 评论 -
模拟乒乓球自由落体,只有上下弹跳,无左右
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #ball { position: fixed; height: 50px; width: 50px;原创 2020-05-24 21:10:15 · 785 阅读 · 0 评论 -
js笔记之实现简单的三级联动
利用三维数组实现三级联动,用到了onchange事件(表单内容发生改变,并且失去焦点触发)效果如下:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { background-color: bisque;原创 2020-05-24 19:20:16 · 426 阅读 · 0 评论 -
js的日历Date对象实现简单的时钟显示
效果图:定时器实时刷新,代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ text-align: center; margin: 0; padding: 0;原创 2020-05-24 19:08:34 · 627 阅读 · 0 评论 -
原生js实现滚动新闻一直滚小练习(利用定时器、scrollTop)
功能:新闻一直滚动,鼠标进入停止,移开继续。主要利用定时器setInterval和滚动事件的属性:scrollTop(用来表示或设置滚动的内容,被卷上去内容的高度,结果为数值)效果如下:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>原创 2020-05-24 14:48:03 · 581 阅读 · 0 评论 -
js定时器实现右下角弹窗广告缓慢弹出
主要利用js的定时器实现对html元素的定位进行改动,以达到缓慢出现在右下角的效果。效果如下:代码如下:html和js部分:<body><div id="box" style="position: fixed;right: 0;bottom:-300px"> <div class="head">系统提醒您 <i class="iconfont stop"></i> </div原创 2020-05-17 18:37:22 · 1526 阅读 · 0 评论 -
js实现简单的计算器只有+-*/和删除
样式如下:css文件:.box { width: 500px; height: 600px; background-color: whitesmoke; border: 2px solid; margin: 0 auto;}#input{ width: 460px; height: 100px; background-color: darkgray; margin: 20px 20px; text-align: rig原创 2020-05-17 18:14:23 · 1104 阅读 · 0 评论 -
js简单的实现自定义右键菜单
原理:1.屏蔽默认的右键菜单2.点击右键获取位置,让自定义菜单到点击位置上3.点击左键,自定义菜单消失代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>右键菜单练习</title> <style> *{ margin: 0; /*pa原创 2020-05-17 17:34:36 · 1124 阅读 · 0 评论 -
js实现键盘控制小球移动事件keyCode的小练习
注:程序没有设置边框的临界点的值,所以会出去,有待完善<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } #box原创 2020-05-17 17:25:00 · 657 阅读 · 0 评论 -
原生js实现全选、反选、不选的小练习
js实现,主要改变checked的值true、false的值来实现对爱好的全选、反选、不选,附加:当所有单选按钮都勾选时,全选按钮也会随之勾选;当所有单选按钮都没勾选时,不选按钮也会随之勾选;只要有一个按钮被选中,全选按钮勾选取消;只要有一个按钮没被选中,不选按钮勾选也会取消详细介绍在代码中:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit原创 2020-05-17 16:31:06 · 281 阅读 · 0 评论 -
js笔记之Date、setInterval 定时器小练习
来判断不同代码效率高低var date1=new Date()for (let i = 0; i <1000 ; i++) { console.log('hello')}var date2=new Date()console.log(date2-date1)定义函数实现:接收用户输入用户名:对用户的输入给予反馈: 要求:用户名不能为空、长度必须在6-10个字符之间 第一个字符不能是数字,并且用户名必须是数字,字母构成。 最后要求:该函数返回不同的值,代表违反了不原创 2020-05-17 15:52:58 · 280 阅读 · 0 评论 -
js中IE浏览器兼容性问题----获取元素对象外部样式、DOM2级添加和删除事件、事件对象的兼容性写法
window.getComputedStyle()方法//兼容的写法:获得 指定元素的指定样式的值function getStyle(ele,cssName) {if (window.getComputedStyle){return window.getComputedStyle(ele)[cssName]}return ele.currentStyle[cssName];}DOM2级兼容性写法:ele:添加事件的元素节点对象elentName:事件名称callback:事件处理函数原创 2020-05-17 15:47:08 · 640 阅读 · 0 评论 -
JavaScript的sort排序(选择器)
sort()方法①作用:数组排序②语法:arr.sort(参数)参数可以省略,改变原数组;默认排序规则升序,字母按a-z顺序注意:如果不提供sort任何的参数,数组的元素会转换字符串进行排序(字符串比大小,比对unicode码值的大小)如果想按照自己定义的规则去排序,需要传入一个比较器;//定义一个未排序的数组 var arr=[10,25,10,5,5,50,558,8,808,108,101,20.,52,2]; console.log(arr);//定义比较器方法原创 2020-05-10 12:30:39 · 261 阅读 · 0 评论 -
js笔记之数组、String练习
随机得到10个学生的分数[60-100],求总成绩和平均分数var scores=[]; var sum = 0; var avg = 0; const COUNT = 10; const MIN = 60; const MAX = 101; for (let i = 0; i <COUNT ; i++) { var score=~~(Math.random()*(MAX-MIN)+MIN) scores[i]=scor原创 2020-05-10 11:45:31 · 341 阅读 · 0 评论 -
js笔记之五一小练习(阶乘、任意概率、循环)
1:自定义函数。实现求n的阶乘。使用循环实现。 //递归实现function fac1(n) { if (n<1){ return 0; } if (n===1){ return 1; } return n*fac1(n-1); } //使用循环...原创 2020-05-06 21:46:03 · 471 阅读 · 0 评论 -
js笔记之通过while、switch case实现简单的石头剪刀布游戏
石头剪刀布{输入的手势:0代表石头,1代表剪刀,2代表布注:程序需要提前打开控制台}//人机壳输赢,五局三胜//变量:猜拳次数,人和电脑胜利字数,人和电脑手势 //常量:石头--->0 剪刀--->1 布--->2 胜利的最大局数3 var counter = 0; //猜拳次数 var playerWinCounter = 0;//人胜利...原创 2020-05-05 22:38:31 · 1159 阅读 · 0 评论 -
js笔记之随机数、if、else小练习
求四个随机数的最小值 const MIN = 1; const MAX = 100; var ran1 = ~~(Math.random() * (MAX - MIN) + MIN); var ran2 = ~~(Math.random() * (MAX - MIN) + MIN); var ran3 = ~~(Math.random() * (MAX - MI...原创 2020-05-01 23:33:29 · 286 阅读 · 0 评论 -
js笔记之函数小练习
定义函数,实现打印任意区间内偶数 function printEven1(min,max) { for (var i = min; i <max ; i++) { if (i%2===0){ console.log(i) } } } printEven1(50...原创 2020-05-01 23:20:09 · 295 阅读 · 0 评论 -
js笔记之while、break、for循环小练习
1.四位随机数进行翻转 如1234翻转后4321const MIN = 1000;const MAX = 10000;var ran = parseInt(Math.random() * (MAX - MIN) + MIN);//获得随机数console.log('原来随机数' + ran);var unit = ran % 10;var decade = parseInt(ran /...原创 2020-05-01 22:55:38 · 1429 阅读 · 0 评论 -
关于js前++和后++的简单理解
对于变量本身来讲,前++和后++没有区别,都是自己本身+1;x++ 当赋值时,后++先赋值,在执行+1(先返回,后自增)++x 当赋值时,先执行自身+1,后赋值。(先自增,后返回)举个栗子:var num = 0;var value=num++ + num++ - ++num + --num - num++ + --num + ++num + num++ ;// n...原创 2020-05-01 21:42:13 · 1111 阅读 · 0 评论 -
js笔记之DOM创建页面元素小练习
全通过js的dom创建页面元素,实现导航栏效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--<ul> ...原创 2020-04-16 14:37:58 · 154 阅读 · 0 评论 -
js笔记之DOM获取页面元素小练习
JavaScript的傻瓜式计算器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action=""> ...原创 2020-04-16 14:32:13 · 151 阅读 · 0 评论 -
js笔记之函数小练习(旧)
1、定义函数打印1-100之间偶数的个数和平均数var count=0;var sum=0;function num1() { //拿到1-100 for (i=1;i<=100;i++){ if (i%2===0){ //个数加1 count++; sum+=i; ...原创 2020-04-15 20:22:42 · 1948 阅读 · 0 评论 -
js笔记之数组练习
要求将数组中的0项去掉,将不为0的值存入一个新的数组,生成新的数组var arr = [4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1, 0,10,12,985,211]; var newarr=[]; for (var i in arr){ if (arr[i]!==0){ newarr.push(arr[i]) ...原创 2020-04-14 22:59:44 · 231 阅读 · 0 评论 -
JavaScript笔记之字符串的截取/查找/转换/小练习
js字符串小练习1.hello china——>Hello china 字符串首字母转换为大写var str1="hello china"; var first=str1.charAt(0).toUpperCase(); console.log(first+ str1.substring(1));2.获得输入参数的后缀名 例如:index.html 输出 ht...原创 2020-04-13 22:40:45 · 202 阅读 · 0 评论