前端
关注
分享
扫一扫
Laohei0101
主要写前端偶尔写后端的职场小白一枚
展开
-
简单了解js代码执行顺序
js代码执行顺序原创 2023-02-08 16:13:01 · 304 阅读 · 0 评论 -
对象属性值相同放到同一个数组中
对象的属性值相同，放入到同一个数组中。原创 2022-10-26 13:53:16 · 1338 阅读 · 0 评论 -
动态数组归类
根据月份判断季度原创 2022-10-19 10:33:09 · 251 阅读 · 0 评论 -
js数组中多个对象，根据这些对象的属性值获取最大值和最小值
数组对象最大和最小值原创 2022-09-17 14:29:12 · 1037 阅读 · 0 评论 -
数组筛选、删除
模拟数组的筛选、删除原创 2022-07-20 14:51:59 · 845 阅读 · 0 评论 -
两个小时倒计时计时器
倒计时计时器原创 2022-07-11 16:02:57 · 3516 阅读 · 0 评论 -
数组中添加7个0
一、功能需求：1、当ecahrts图中返回的数据是空的时候，需要往一个数组中添加最近一周的数据，也就是一个数组中添加7个0。因为后端返回来的数据直接给了一个空的数组，所以我需要在往数组中添加7个0，来填充一下数据，否则整个echarts图没有数据显示的话就只用坐标轴。二、直接上代码：红框中的内容就是es6中fill()方法往数组中添加元素。意思就是我新建一个长度为7的数组，然后往里面添加7个0,然后这个新的数组再给echartst图中的data.三、上效果图。...原创 2022-03-30 16:41:57 · 471 阅读 · 0 评论 -
微信小程序中组件传值
嗨喽大家好，我是老黑。最近完成了小程序中的刻度尺功能，总结一波。首先是这个刻度尺是一个单独的子组件，我是在父组件中引用的这个子组件。然后每次父组件使用这个子组件的时候这个子组件都可以拿到父组件中最新的数据来当，默认值。这个过程是可谓是一波三折。。首先是这个刻度尺案例网上的案例比较少，不大好找。找了好久找到了一个合适的。在这过程中花费时间最多的是父组件传过值去后，然后刻度尺这个子组件中获取到，默认显示这个值。刚开始我是直接在子组件中直接调用接口来获得数据，这样来做极其极其的不方便，感觉也是违背了组件功能的初原创 2022-01-23 14:36:30 · 1126 阅读 · 0 评论 -
微信小程序中使用echarts图
嗨喽大家好，我是老黑。最近这段时间完成了一个功能，那就是在微信小程序中引入了echarts图，也算是对这段时间的工作的一个总结吧。这个功能自己花费了很长的时间才整出来。后来自己反省了以下，总结了以下几点：（1）、拿到功能后没有进行细致分工，总是做一步算一步，这就导致了一个功能反复做，反复改，耽误了大量的时间。（2）、阅读文档的习惯还是太差，总是上网搜各个网友的实现，导致无法拿到最确定的实现方案，导致一个功能通过好几种方式来实现，最后还是回到最初的实现方案，这又耽误了大量的时间。改进：以后拿到一个.原创 2022-01-18 23:14:50 · 2016 阅读 · 3 评论 -
每天一个js小demo--相册
直接上图当鼠标移动到下面的小图片的时候，上面的大图就会显示对应的下面的图片直接上代码<style> .big { width: 415px; height: 400px; } .small>img { width: 100px; height: 100px; }</style><body> <div> <img s原创 2021-11-11 22:18:06 · 955 阅读 · 0 评论 -
每天一个js小demo --全选与反选
如图所示点击全选的时候是全选，点击全不选的时候是全不选，点击反选的时候是反选，这话说的感觉和说了话是的，哈哈哈哈直接上 代码<body> <form action=""> <p><input type="checkbox" name="" id="">尼古拉斯·赵四</p> <p><input type="checkbox" name="" id="">莱昂纳多·刘能</原创 2021-11-09 22:32:41 · 604 阅读 · 0 评论 -
每天一个js小demo--选项卡
实现的效果如下当点击对应的按钮的时候，按钮的背景色改变，同时猫的图片改变话不多说直接上代码<style> ul, li { margin: 0; padding: 0; list-style: none; } ul { overflow: hidden; } li { width: 100px; height: 40px; b原创 2021-11-08 22:41:33 · 162 阅读 · 0 评论 -
每天一个js小demo----五秒钟后返回百度首页
1、效果如下图所示。当进入页面的时候能够跳转到百度首页2、<body> <div></div> <script> //思路：先创建一个能够存放倒计时的标签 //2、通过不停的计时器来一直显示 //3、可以先通过一个变量来给倒计时的值。根据判断这个变量来实现具体的操作 var div = document.querySelector('div'); var t原创 2021-10-12 23:14:44 · 863 阅读 · 0 评论 -
每天一个js小demo---返回顶部
1、效果展示：当点击返回顶部的时候，会动画一样慢慢的滑动到顶部，而不是一下子返回到顶部。2、直接上代码。html: <div class="contain"> <div class="left"> <div class="head s"> 头部区域 </div> <div class="bann s">原创 2021-10-11 23:06:52 · 131 阅读 · 0 评论 -
每天一个js功能小demo---点击按钮，input里的值发生变化
今天的小demo是当我点击按钮的时候,input中的值发生变化如上图所示，当我点击按钮之后，input中的值变为被选中了。代码执行思路1、需要获取两个操作的元素，一个是button按钮，一个是input2、获取元素之后需要给button添加一个点击事件，当执行这个点击事件的时候，input里的value值变为被选中了3、上代码直接检验<body> <button>按钮</button> <input type="text" value='原创 2021-10-10 22:17:12 · 1069 阅读 · 0 评论 -
js--拷贝
今天说一下js中的一个重要知识点就是拷贝。如有错误请大家指教，共同努力。在学习拷贝之前一定要把js中的原始类型数据和引用类型数据搞清楚，这样才会对拷贝理解的更透彻，话不多说直接开始啦。一、为什么要用拷贝呢？我们先来看一下一个简单的实例<body> <div id = "app"> <form @submit.prevent="insert"> <input type="text" v-model="student.name"> //通过v-m原创 2021-07-12 18:12:14 · 478 阅读 · 0 评论 -
vue--过滤器filters
今天来说说过滤器，自己的理解就是把数据过滤成符合成自己的要求。自己的能力有限如果理解的不对请大家多多指教。一、过滤器的基本使用. 其实过滤器是可以复用的将 hello 拆分成 h,e,l,l,o<template> <div > <h1>{{ message | mySplit }}</h1> //前半部分是输入的数据，后半部分是选择的过滤器 </div></template><script>expor原创 2021-07-10 22:47:11 · 171 阅读 · 4 评论 -
vue--操作真实DOM
今天说一下在vue中操作真实的DOM.<template> <div> <div ref="box"> hello world </div> </div></template><script>export default{//通过mounted mounted(){ let box = this.$refs.box; //通过refs来拿到元素 let style = window.g原创 2021-07-10 22:00:12 · 277 阅读 · 0 评论 -
vue--插槽
今天就说说插槽吧，用起来还挺方便的。一、插槽：slot、v-solt。可以更容易更灵活的创建组件。//Layout.vue<template><div> <div class="header"> <slot name="header"></slot> </div> <div class="content"> <slot name="content"></slot> </d原创 2021-07-10 21:27:17 · 85 阅读 · 0 评论 -
vue--生命周期钩子
今天来说说vue开发中一个重要的知识点，那就是生命周期钩子。在vue中有八大生命周期钩子，分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。在初期的开发中主要用到的就是created和mounted。今天主要应用一下created一、created的应用：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置，数据的观测、property、方法的运算，watch/event事原创 2021-07-10 10:06:59 · 2006 阅读 · 0 评论 -
vue--计算属性与侦听属性
今天说说这个vue中的计算属性与侦听属性，通过简单的总结呢，可以在项目中能够更好的掌握代码，不至于一行代码看半天，哈哈哈。下面就开始了。一、计算属性：computed:当一个值受多个值影响的时候就用计算属性计算价格的实例<template> <div> <p>单价：{{price}}</p> <p> <button @click="sub"> - </button> 数量：{{quality}}原创 2021-07-09 22:54:30 · 146 阅读 · 0 评论 -
vue--组件传值
今天梳理一下vue中一个重要的知识点就是组件中传值。一、组件传值的三种方式：（1）、父级组件传值给子级。（2）、子级组件传值给父级。（3）、非父子级传值二、父级组件传值给子级：通过自定义一个属性来向子级传值//父级组件<template> <div> <h1>hello world</h1> <Children :msg="message"></Children> </div></templ原创 2021-07-09 19:44:49 · 97 阅读 · 0 评论 -
js--call、apply、bind
今天说说call、apply、bind，之前只是看过一些文字的描述，没能具体理解，今天好好总结一下一、call: call是一个方法，是一个函数的方法。call可以调用函数，也可以改变函数中this的指向.1、call是一个方法，一个函数的方法function fun(){ console.log("hello world")}fun.call(); // hello world2、call改变this的指向let dog = { name:"旺财", sayName(){ c原创 2021-07-07 23:58:02 · 89 阅读 · 0 评论 -
js--this
今天说说this的指向问题，这个问题困扰很久，这次好好整理一下。一、问题归类1、全局环境输出this,this指向全局对象2、全局函数输出this,this指向全局对象3、对象的方法中调用this，this指向调用该方法的对象4、DOM事件输出this，this指向 触发事件的DOM对象5、构造函数中的this，this指向new创建的对象二、实例1、全局环境输出this<script>console.log(this); // window</script>原创 2021-07-07 23:24:31 · 119 阅读 · 0 评论 -
js--原型、类与继承
今天说说原型和类以及的类的继承一、原型1、原型是什么：每一个js对象都有一个原型对象，而这个js对象可以继承原型对象上的属性和方法2、拿到原型然后给原型赋方法有三种方法。分别是：（1）、es5中的__proto__（2）、通过构造函数中的prototype来拿到原型（3）、就是es6中的类来获取到原型3、通过__proto__来给原型添加方法let cat { name:"喵喵"}cat.__proto__.eat = function(){ console.log("吃鱼")}原创 2021-07-04 15:43:15 · 185 阅读 · 0 评论 -
js--Promise
今天说说Promise对象。在说该对象的时候先来看看几个问题。一、问题1、同步和异步的基本概念2、常见的异步程序：计时器、读取文件、ajax请求3、异步编程：回调函数4、单线程：Js是单线程的，所以函数是一个个执行5、事件循环：虽然是单线程，但是通过事件循环和异步，解决了并发的问题6、使用回调函数的问题：回调地狱（callback hell）7、解决方案：promise8、async函数二、回调地狱示例1、应用的场景就是出去玩的时候想和奶茶和吃火锅，但是奶茶的制作比较快1秒就完成，火锅原创 2021-07-04 11:16:37 · 109 阅读 · 0 评论 -
js--防抖与节流
今天复习一下js中的防抖与节流。一、防抖：用户触发过于频繁，只要最后一次事件操作1、代码展示<style> body{ height:2000px; }</style> <input type="text"><script> let inp = document.querySelector("input"); inp.oninput = function(){ console.log(this.value)}</script原创 2021-07-03 22:10:20 · 129 阅读 · 0 评论 -
js--解构赋值、箭头函数、模板字符串
今天说说js中的解构赋值、箭头函数、模板字符串。一、解构赋值1、数组的解构赋值，对于数组的解构赋值平时工作中用的不是很多。（1）、在数组达到解构赋值中使用的比较频繁的是交换数组的值let a = 10;let b =20;[a,b] = [20,10]console.log(a); //20console.log(b); //102、对象的解构赋值，在工作中用的比较多。(1)、对象解构赋值的基本用法let {name,age} = { name:"xiaoming", age原创 2021-07-02 19:48:15 · 313 阅读 · 0 评论 -
js --let和const的区别
自己写的博客不多，以后呢要养成通过博客来记录每天的学习的内容的习惯，话不多说，今天就聊聊js中的let和const的那些事一、let和const的区别1、let1.1、let是设置变量，说到let就不得不提var两者一个是es6新语法中的，一个是es5之前的，那这两者有什么区别呢？（1）、let不能重复定义变量，var可以重复定义变量。（2）、let有块级作用域，var没有块级作用域。对于区别二还是举个例子加深理解一下吧if(true){ var a = 10 } console.lo原创 2021-07-01 22:26:44 · 5075 阅读 · 0 评论 -
前后台数据交互的小demo
今天周末，正好可以安心的学习之前的内容，也算一个回顾总结吧，今天做了一个重要的内容就是通过获取到前端的token来获取到后台中数据库中的数据然后显示出来，话不多说，直接上成果1，在进行项目开发前先看看今天要实现的最终结果吧，那就直接上图，哈哈哈，简单通俗登录界面，输入用户的名便可以生成token，然后就可以登录，进入页面看到相应的数据了这就是要看到的结果了最终的结果就是上面那样的效果，虽然看似简单，但自己也花了大半个下午才搞出来，过程艰辛，结果令人欣慰。好了下面就准备战斗了，哈哈哈1、先创建好vu原创 2021-06-28 00:14:47 · 565 阅读 · 0 评论 -
前端第一篇
内容管理系统系列之博客管理系统1、博客管理项目概述实现PC端和手机端的博客管理创建2、不多说了，直接上代码~~~~~1、技术栈：前端：VUE+element ui; 后端：Node+Egg+Nunjucks2、先搭建前端：之前的vue-cli等一步跳过，直接进入创建，首先vue create demo来创建一个文件夹进行创建这个地方注意依赖的安装，安装完成后直接下载安装element ui 和axios过后进行数据的传递3、好了，前期的工作都完成了。下面是真正上代码了在main.js文件中原创 2021-04-06 21:15:11 · 162 阅读 · 0 评论