呆呆怪兽-CSDN博客

原创 vue--echart图表自适应父级div

问题描述:在做vue项目中,使用echart后,后台系统左侧菜单在默认的情况下是有几百的宽度,在点击缩小菜单后宽度会变小, 缩小后右侧视图中的echart图表并没有自适应,还是显示原来的尺寸解决方案:父组件<template> <div class="homeview"> <indexChart ref="homechart" ></indexChart> </div></template> ---

2021-08-03 11:29:13 724

原创手动实现超级实用的Tab插件

工作之余训练js的基本功还是挺重要的一件事，所以就动手写了一个简单的js插件。首先写一个东西，在脑子里要先有一个模型，然后功能点，最后是有一个完整的思路，这三个必不可少。至少我是这么觉得的，虽然这只是一个非常基础的东西。那接下来就是说说我的思路吧，提供接口给外面，让用户传入数据包括有 {宽度，高度，Tab的模式(提供了slide和fade)，data数据，el元素}获取被渲染的元素el，挂载Dom创建Tab，根据data数据来创建Item的数量,初始化事件绑定最后就跟据事件处理函数来实现效

2021-03-17 10:49:55 291

原创 js+nodejs+ajax登录注册表单验证

自制登录注册表单验证一.用到的一些东西登录模块注册模块遇到的问题Error 1: Cannot set headers after they are sent to the clientError 2 在sql.js里,for循环里执行sql语句注意点1.用ajax提交form表单要阻止表单的默认事件.2.用form表单用post提交的数据在node中必须使用body-praser中间件解析3.用...

2020-05-07 16:05:42 902 1

原创 ES6个人总结

ES6个人总结一.模板字符串基本用法和好处二.解构赋值1.对象解构2.数组解构3.函数的参数解构三.函数rest参数四.箭头函数1.基本用法2.与普通匿名函数的区别五.Promise1.基本用法2.传参3.错误处理4.作用六.async(其实是Promise的语法糖)1.用法2.错误处理七.class 类1.用法2.添加静态方法3.类的继承(extends)八.对象扩展运算符(...)作用一.模...

2020-04-27 17:58:38 386

原创 JavaScript事件的解绑方式

`有些时候,我们需要给一个DOM对象绑定一个事件,但是使用完时,我们又需要对这个DOM对象解除绑定的事件,下面针对这种情况来讲解一下解绑事件<div id= "box">100</div>比如我这里有一个div,现在我需要给div绑定一个点击事件,让它只触发一次,然后就解除这个点击事件当然了我们先获取到这个DOM对象,然后绑定点击事件,使点击后弹出一个0;var ...

2020-04-22 10:18:19 299

原创 JS轮播图面向对象的写法(jQuery方式)

用了jQuery写的html代码 <div id="container"> <div id="pre">《</div> <div id="next">》</div> <div id="list" style="left:0px;"> <a hre...

2020-04-15 11:56:26 205

原创 es6变量声明.let和const的理解

变量声明在JavaScript中声明变量有三个关键字var是最原始的,那就不必多说了,现在主要说的是let和const这两个关键字来声明变量和var有何不同let应用:在业务逻辑很复杂的时候,可以防止内层变量覆盖外层变量eg1. if (true) { let a = 3; console.log(a); //3 } ...

2020-03-24 17:08:51 414 1

原创 js轮播图,纯源码

最近也是在学js所以就做了个轮播图来玩玩CSS-------------------* { padding: 0; margin: 0;}.box img { width: 700px; height: 400px;}.box { position: absolute; top: 50%; left: 50%; tr...

2020-03-17 11:33:32 397

原创 js的继承,call()方法的运用(1)

在es6之前,是没有extends继承的,我们都是通过构造函数,原型对象来模拟,实现了继承.为什么这么说呢?这是因为我们是利用构造函数来继承属性,利用原型对象来继承方法的.现在我们就可以通过call( ),apply( ),bind( )这三个方法也可以实现继承.call( );用法 fn.call(thisArg, arg1, arg2, ...)thisArg : 当前调...

2020-03-11 16:51:20 369

原创构造函数,实例,原型对象之间的关系和原型链(4)

看图1.2. 每个构造函数都有一个原型对象,通过构造函数prototype指向我们的原型对象.3. 在原型对象里面有一个constructor属性,通过这个属性指回了构造函数4. 我们可以通构造函数new一个zs对象实例出来5. 在实例里面有一个__proto__,它指向的是我们构函数的原型对象.6. 在实例里面有__proto__,而__proto__里面也有一个construct...

2020-03-07 15:37:29 183

原创对js构造函数,原型对象和原型的理解(3)

探究constructor不知道大家发现了没有啊在我们的对象原型__proto__和构造函数的原型对象prototype身上都有一个constructor属性这个constructor它指回的是我们构造函数的本身不知道大家有没有想过啊,如果我只有一个方法,那我就直接放到构造函数的原型对象身上了是吧,那我这样写,当然我zs的这个实例可以访问到sing方法了. function Star(n...

2020-03-06 16:54:54 205

原创对js构造函数,原型对象和原型的理解(2)

上篇文章我们说到了我sing方法已经放到了Star的原型对象prototype身上了,可是我zs,ls这两个实例没有这个方法,为什么还能访问得到?function Star(name, age) { this.name = name; this.age = age; } Star.prototype.sing = f...

2020-03-06 15:42:57 101

原创对js构造函数,原型,原型对象的理解(1)

那我就开门见山咯构造函数构造函数虽然好用,但是存在浪费内存的问题;比如我写了一个构造函数,里面有许多属性,也有方法, function Star(name, age) { this.name = name; this.age = age; this.sing = function() { ...

2020-03-05 17:02:50 154

原创 ES6面向对象

今天开始,终于进入到了es6的学习了,希望学得越来越多,每天都过得越来越充实.学到的要分享,一起学习才是最好的.接下来分享一下我所理解的面向对象编程的思想希望对大家有帮助大家都知道编程有**面向过程和面向对象**面向过程编程就是把解决问题的步骤分析出来,然后利用函数把每一步骤都写好了,最后再一个个的调用函数,这样就把问题解决了, 也就是朝着步骤完成的.首先分析好步骤,再按照步骤来解决问题...

2020-03-04 17:31:48 150

原创 jQuery实现电梯导航效果

原理每个盒子的索引值和每个按钮的索引一一对应,然后运动到相对应的盒子上也就是scrollTop的值成果图 <style> .box2 { position: relative; width: 600px; height: 500px; background-colo...

2020-03-03 16:41:00 833

原创 jQuery尺寸.位置操作

jQuery尺寸width( ) / height( )获取元素的宽度和高度, 只算width / heightinnerWidth( ) / innerHeight( )获取元素的宽度和高度, 包含paddingouterWidth( ) / outerHeight( )获取元素的宽度和高度包含padding,borderouterWidth( true ) / outerHei...

2020-03-03 15:28:54 154

原创 jQuery实现todolist网页功能

今天,我用本地存储功能,实现了todolist页面核心原理获取用户输入的数据–保存到本地存储–再渲染到页面上 $(function() { load(); // 1,按下回车,把完整的数据存到本地存储 $('#title').on('keydown', function(e) { //按下回车按钮,判断本地...

2020-03-03 12:53:29 456

原创 jQuery发布微博案例

主要功能1,点击发布,动态创建 li 元素 , 获取textarea的值,添加到 li 中去.也动态创建了 a ,主要用来删除操作2,给 a 元素,绑定点击操作,点击之后把当前的 l i 删除.代码 <div class="box"> <textarea cols="30" rows="10"></textarea> ...

2020-02-29 12:58:35 802

原创 jQuery事件处理

以前注册事件用的是这种注册的方法 $('div').click(function() { $(this).css('backgroundColor', 'red') })缺点是,只能单个注册,比如我想注册鼠标经过和点击事件,这样我只能一个一个的注册,就像这样 $('div').click(function() { ...

2020-02-29 12:10:01 112

原创 jQuery实现购物车功能的案例

用jquery写了一个购物车的案例功能如下1,全选按钮和单个复选框的功能2,商品数量的加减3,单个商品总价随着商品数量的增减变化4,实现了商品总数的变化5,实现所有商品价钱之和随着商品的件数变化而变化6,添加了单个商品删除功能7,添加了清空购物车功能下面是代码展示<body> <div class="box"> <div c...

2020-02-28 14:34:20 3830 1

原创 jQuery元素操作

主要是遍历.创建.添加.删除元素操作遍历元素之前学过遍历元素可以用for循环,但是这里介绍的遍历方法更加强大语法1:$("div").each(function(index, domEle) {xxx,;})each( )方法遍历匹配的每一个元素里面的回调函数有两个参数;index是每一个元素的索引号, domEle是每一个DOM元素对象,不是jQuery对象所以要想使用jquer...

2020-02-27 16:16:30 627

原创 jQuery基础设置属性和属性值

获取元素固定属性element.prop(‘属性名’)这个方法就是获取元素固有的属性值比如 <a href="http://www.baidu.com" title="百度一下">百度</a> <script> $(function() { console.log($('a').prop('href'...

2020-02-26 10:04:06 403

原创 jQuery效果的淡入淡出的案例

2020-02-25 15:21:01 262

原创 jQuery效果

重点:在做效果的时候难免会出现动画排队的现象,比如其他鼠标事件或者鼠标点击事件过快,效果来不及运行,就会出现排队显现,所以,我们要在做的动画的前面添加一个stop()方法,这样就不会出现排队情况例如这个是下拉菜单的案例 <ul class="nav"> <li> <a href="">手机</a> ...

2020-02-25 13:43:44 105

原创 jquery 基础+Tab栏切换案例

类操作在原生JS里面className会覆盖元素原来有的类名jquery里面的类操作就不会这样,只对指定类进行操作,不影响原先的类名添加类名addClass()删除类名removeClass()注意:使用这个方法,括号里面不需要再加那个小点,直接写类名就行了比如说<div class = "one"></div><script> $...

2020-02-25 10:41:59 609 1

原创 jquery 排他思想案例

当我点击某个按钮,这个按钮就会变色排他思想 <button>点击</button> <button>点击</button> <button>点击</button> <button>点击</button> <button>点击</button&gt...

2020-02-24 19:40:27 494

原创 jQuery入门

现在我开始学习前端的js框架jQuery,虽然还要学很多东西,但是我也会坚持下去,万事开头难,坚持就是一种人生态度,在我自学的过程中,发现问题,解决问题.没有什么可以让我放弃,我喜欢这个方向,为之努力.加油jQuery入口函数作用:先加载文档,在执行这里面的代码.$(function(){})jQuery对象直接用jQuery语法得到的就是jQuery对象eg:获取一个div,...

2020-02-24 19:13:58 85

原创 JS本地存储

本地存储的特性1. 数据存储在用户的浏览器中2. 设置,读取方便,页面刷新是也不会丢失数据3. 存储容量大.sessionStorage约5M, localStorage约20Mwindow.sessionStorage它的生命周期是关闭浏览器窗口.也就是关闭浏览器之后数据就会丢失.在同一窗口(页面)下数据可以共享.以键值对的形式存储使用有四种方法存储数据ses...

2020-02-22 23:30:46 118

原创 JS封装缓动动画效果函数

原理JS的动画效果原理其实就是添加一个定时器,每多少毫秒调用一次,就可以使盒子运动一次.在这里我封装了一个缓动动画函数,只要有对象需要添加动画就可以调用这个动画函数,就可以实现动画效果. // 封装缓动动画函数传递两个参数需要执行动画的对象和目标位置 function animate (obj , target){ //先把原先的定时器清除,只保...

2020-02-21 16:29:32 427

原创 JS 固定右侧侧边栏案例

1.页面滚动到一定位置.侧边栏改为固定定位.2.页面继续滚动,会让返回顶部盒子显示出来. <div class="boxs"> <div class="boxo">放回顶部</div> </div> <div class="box1"></div> <div class="b...

2020-02-19 15:44:41 1029

原创 JS的元素偏移量offset.元素可视区client.元素滚动scroll.的作用及其区别

1.元素偏移量offset;我们可以使用offset系列相关属性可以动态的得到元素的位置(偏移).大小等…element.offsetParent; 返回的是该元素的带有定位的父级元素,如果父级没有定位就返回body.element.offsetTop; 返回元素相对带有定位的父级元素上方的偏移element.offsetLeft; 返回元素相对带有定位的父级元素左方的偏移elemen...

2020-02-17 15:18:13 280

原创 JS 定时器的理解

js的这两种定时器,现在我们就来看看这两个定时器的作用和区别setTimeout( , );这个里面接受两个参数,回调函数和延迟的毫秒数, <script> //设置一个定时器,倒计时五秒 setTimeout(daoshu,5000); function daoshu(){ console.log(...

2020-02-16 01:45:37 154

原创 JS的DOM操作(3). 操作属性的方法Attribute()

getAttribute();使用这个方法可以获取到特性的值.当然也可以获取到自定义特性的值,下面的代码就演示了.我们也可以通过DOM元素本身的属性来访问,不过只有公认的(非自定义的)特性才会以属性的形式添加到DOM对象中下面代码也演示了当我用getAttribute()方法访问my_attribute属性时,就可以获取到它的值.但是我用DOM元素本身的属性来访问时就输出undefined....

2020-02-06 14:12:03 290

原创 DOM操作重点核心(2) 面试题

创建元素我们了解过创建元素的三种方法,当然现在我们来深入了解一下第一种方法document.write()这一个方法是直接将内容写入页面的内容流,但是文档流执行完毕,则它导致页面全部重绘通俗来说就是相当于重新打开一个文档,把原来的文档覆盖掉,然后再返回新创建的元素显示在文档中,element.innerHTML这个方法是将内容写入某个DOM节点,不会导致页面重绘,当你需要创建...

2020-02-06 12:57:56 319

原创 JS里面的DOM操作(1)

节点操作appendChild() 向childnodes列表的末尾添加一个节点.instertBefore() 添加节点此方法接受两个参数: 要插入的节点和作为参照的节点 . 插入节点后,被插入的节点会变成参照节点的前一个同胞节点. 如果参照节点是null,则与appendChild()执行相同的操作.replaceChild() 替换节点此方法接受两个参数: 要...

2020-02-05 14:22:03 159

原创利用js实现留言板模块效果

相信大家都遇见过留言板这个东西,一般来说开发过程中都会要求做这个模块,这里我把留言板的基本的功能做了一下,后续大家可以在里面添加更多的功能.成果图展示代码也在这,样式可以自己按照喜欢的改就行了,这里的样式只是一个成品,希望大家不要介意<style> .box{ position: relative; margin:...

2020-02-04 13:59:45 1464 2

原创利用js实现下拉菜单效果

这个模块在实际开发中也是经常会用到的,所以让我们一起学起来把成果图展示鼠标移动到某一个模块上就会显示下拉菜单,在后续的开发中自己可以根据实际情况添加各种样式和链接,我这里只是做了基础的功能配置代码展示-------css------- <style> *{ margin: 0; padding: 0; ...

2020-02-03 15:52:02 5708 5

原创利用js实现Tab栏的切换功能

在很多网页都有这一模块的开发,所以今天我也来做一下,这个模块很重要.几乎在每个网站都可以看得到成果图展示当点击其他模块,下面的内容也会跟着改变后续的内容自己可以添加<style> *{ margin: 0; padding: 0; } .tab{ border: 1px solid gray; ...

2020-02-02 15:27:45 875

原创利用js实现购物车的全选和反选效果

这个模块经常用得到成果图展示HTML和css代码--------css-----------<style> table{ margin: 100px auto; width: 500px; text-align: center; } thead{ background-color: silve...

2020-02-01 21:04:26 1412 1