画一生情入颜容-CSDN博客

原创获取元素宽高及位置的方法

js的人一定会接触到client家族、scroll家族和offset家族。由于width和Height属性是类似的，所以这里我只挑这三个height来讲一下。clientHeight、offsetHeight、clientTop、innerWidth、outerWidth、scrollHeight、offsetTop、scrollTop，scrollY1.clientHeight / clie...

2020-04-23 18:42:05 3364

原创 js的预编译

js的两大特点：解释性和单线程解释性：翻译一行执行一行，但是在翻译之前需要经历预编译阶段，在这个阶段中将该提升的提升，该赋值的赋值，完成之后执行代码。所以js的预编译发生在代码执行的前一个阶段。js预编译的步骤：①. 创建AO对象(Activitity Object)（执行器上下文）②. 找形参和变量声明，将变量和形参作为AO的属性名，且赋值为undefined③. 将实参和形参统一...

2019-08-15 18:16:42 470

原创超级简单Vue实现手风琴布局

说一下效果：全部展开效果：展开都的话四等分收起一个，其余的三等分，收起两个，其余的等分，展开一个，占据所有空间。全部折叠效果：展开一个效果：这一块一块的总共是组件复用了四次。所以单独看一个列表就好了（已截止）结构如下<template> <div class="foldable-list" v-if="toggle"> // 注意 hea...

2019-04-28 21:00:41 9088

原创 Vue实现日历

效果就是这样子，可以切换上一年，上一个月，下一年，下一个月。先来捋一下，首先得知道本月有多少天知道本月的第一天在星期几将本月的天数从1号开始排上一个月有多少天，将本月1号前的星期补全本月的截止是星期几，下一个月1号从星期几遍历STEP1:先设置一个星期数组，用来存放星期日-星期一月份数组来存放基本每月的天数 week: string[] = ['日', '一', '二'...

2019-04-28 20:00:29 13211 4

原创 React实现Todolist

一个todolist基本的功能点包括：点击复选框标记完成或者未完成，且相应的文字出现删除线从列表中移除item添加item首先它是由todolist title 、todolist、和addtodo三部分组成。由于todolist title 和addtodo比较简单，在这里只将todolist拆分成组件。创建一个ListItem组件。含有一个render方法class List...

2019-03-15 13:15:52 9605 2

原创手把手从0创建webpack并部署到本地服务器

相信很多气的那段的初学者看到webpack是一脸懵逼，好不容易学会了一种前端框架，但在大型项目中的webpack也是必不可少的，所以有时候需要自己去动手改造一下webpack，接下来就从建立一个js文件开始逐步实现webpack的打包以及部署。在使用的webpack4版本和以前的版本略有不同。先下载webpack和webpac-cli，4版本以后，webpack-cli和webpack分开...

2018-08-16 17:37:48 4327

原创字符字符集编码以及乱码

字符：各种文字和符号的总称，如一个符号，一个字母字符集：表示所有字符的集合，就相当于一个二维表，收录能显示的所有的字符。常见的字符集合有ASCII，GB2312，GBK，GB18030，BIG5，Unicode 编码：将字符转化为计算机系统可以识别的数的规则。解码：将计算机可以识别的数字，用一种规则展现成字符。ASCII字符集和ASCII编码（单字节） ASCII（America...

2018-08-14 18:45:22 2600

原创五分钟掌握网格布局（grid）常用属性

与flex布局不同的是，网格布局（grid）是一个二维的布局，可以创建任意行列的布局。首先来介绍几个概念; 想象一个五行五列的布局，网格线就是构成网格所有的线条，五行五列的布局每行就会有6条网格线。网格轨道就是相邻两条平行的网格线之间的部分。和flex布局一样，他会有父容器和子项目，在这儿我们称为网格容器和网格项。接下来，我们从网格容器到网格项的各个基本...

2018-08-13 15:15:02 24437

原创关于echarts的雷达图比较详细的参数说明

要实现的效果图如下： (https://img-blog.csdn.net/20180802194613401?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fenNkZg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)接下来主要关于下面的几个参数进行设置 1....

2018-08-02 20:08:37 111092 19

原创使用MutationObser来监测DOM变动

有时候我们需要获取一个Dom节点未发生变化前的所有相关信息，那么就需要有一个函数去监听它变化前的所有状态，这里要讲的就是MutationObserve，该构造函数出现在DOM4中，是为了替换在DOM3事件规范中引入的Mutation事件. 首先该构造函数创建实例，并且接受一个回调函数，该回调函数含有一个参数MutationRecord，其实就是为了记录有多少个节点发生了变化 MutationR...

2018-03-31 20:41:15 591

原创 es6的Promise对象详解

秋招已经进入了尾声，这两个月以来一直忙着找工作，没有时间看新东西，这几天得空将es6的Promise对象又细细的理解了一下，所以下来整理一下我对Promise对象以及用法的理解。什么是Promise？为什么要使用Promise？当我们使用js的异步调用时通常习惯使用回调函数，这样的代码简单便于理解，但是当回调嵌套的时候就会造成代码混乱，不好梳理，比如：function fun1(arg1,fun

2017-10-27 12:06:45 6860

原创自适应多列布局

多列布局自适应是一个经常被问到的问题，所以今天仔细看了一下，首先是BFC实现多列布局是一个经典的例子。什么是BFC？ BFC称为块级格式上下文，它是由于块级元素设置了某些属性而形成的一个独立的区域。在这个区域中，它里面的布局不会影响到外面元素的布局，反之也一样。可以触发BFC的属性： 1、 float属性不为none2、 position为absolute或fixed3、 over

2017-09-26 18:23:27 648

原创由setTimeout引出的浏览器事件循环机制

先看一下代码： function aa(){ console.log("aa"); } function bb(){ console.log("bb"); } function cc(){ console.log("cc"); } setTimeout(cc,100); setTimeo

2017-09-25 20:23:42 635

原创 css实现三角形

css实现三角形是经常被问到的问题。所以下来就讲一下css实现三角形的三种方法： ①. .tritangle1{ width:0; height:0; border-left: 50px solid transparent; border-right:50px solid transparent; border-

2017-09-23 20:38:12 668

原创常见的HTTP请求响应头以及状态码

首先看一下http的请求头中会有些什么东西。这是一个我请求的网站的请求头信息，首先来看一下这些字段的含义：1.Host：请求的主机和端口号2.User-Agent：浏览器的相关信息。3.Accept：浏览器可以接收的请求的类型。4.Accept-Language：浏览器可以接收的语言和国家类型。5.Accept-Encoding: 浏览器可以接收的压缩编码的类型。6.Cookie：

2017-09-22 16:10:10 1987

原创 ES6的新特性

ES6（ ECMAScript6），由于是在2015年发布的，所以也称为ECMAScript 2015。不是所有的es6的新特性浏览器都支持。所以要保证es6能正常的运行，需要了解一下Babel。它是将es6转化为es5，从而执行。现在来看几个最常用的es6的新特性。一、let\const声明的变量没有变量提升,会出现not defined。同一个变量名不能在一个作用域中同时使用let和

2017-09-21 18:19:21 424

原创实现九宫格

像这种，实现该九宫格。外部的大小为120px，120px。边框为蓝色1px。问题就每个相邻的小格子的边框不会自动重叠，比如这儿是1px，如果每个都设置为1px，那么相邻的格子边框就会出现2px的。思路：设置父元素的上方和左方的padding为1px；即相当于里面的内容普遍就会像右下方偏移1px；这时设置里面每一个的小格子的margin-top和marg

2017-09-14 22:39:37 1149

原创怎样在浏览器中校验并修改密码

首先按照正常的逻辑要修改密码的话，有三个文本框，第一个是输入原始密码，第二个是输入新密码，第三个是确认新密码。首先为每一个输入框添加一个onblur事件。<form action = "/XYDL/changePassServlet" method = "POST" name = "form"><label for = "oldpass" class = "labels">旧密码 &nbs

2017-08-23 12:59:40 670

原创浏览器的缓存机制

以前只知道返回的状态码是304说明上次请求的资源没有被修改，可以直接访问，增加访问速度，但是当别人问304是怎么来的时候，却又不知道从何说起了。所以今天就对于浏览器缓存机制进行了比较全面的理解。浏览器的缓存机制就是将请求的内容保存在了本地，不用每次请求相同的内容时都需要向服务器发送同样的请求去获取，这样就大大的浪费了带宽，增加了页面的展现速度和增大了服务器的压力。那么什么时候可以向服务器发送请求

2017-08-08 15:39:42 360

原创 js实现点击div隐藏相应部分，再次点击显示

首先看一下html和css的结构：<style>#nav_left{ width:120px; height:600px; background-color:#333; margin-left:0px;}.list { color:#fff; padding:10px; font-size:18px;}.list:hover{

2017-08-04 15:40:51 21478

原创 jsp+javaBean+servlet+mysql完整的实现一个登录功能

以前对于这种功能就只是复制粘贴，并没有真正的深入了解过，现在就来深入的一步一步的实现功能； 1.在eclipse中新建一个动态的web工程； 2.在webContent目录下创建一个jsp页面，命名为login.jsp 3.在JavaResource的src目录下创建一个servlet包，（com.arvin.servlet）,并在该包底下创建一个处理登录的servlet类(LoginServ

2017-07-31 17:27:50 10386 2

原创打印出如下图形

通过观察我们发现*的规律是每行的个数是2乘以行数-1，如：第一行 2x1 - 1 = 1 第二行 2x2 - 1 = 3 …. 以此类推但是仅仅通过控制星号生成的图像只会是直角三角形的样子，所以我们还要控制空格的数量，通过观察会有如下规律，稍后再代码中体现；现在要求是行数是输入的，会生成如上的图形。首先写一个控制*数量的函数public

2017-07-24 22:03:03 3739

原创 java统计字符串中每个字符出现的次数

例如String str = “abcaaaefdabbhg”; 统计该字符串中每个字符出现的次数，输出： a====5 b====3 c====1 d====1 e====1 f====1 g====1 h====1方法一: 采用HashMappublic static void count(String str){ //将字符串转化为字符数组

2017-07-24 21:25:45 63997 1

原创 jquery获取span标签下的第一个span子标签内容

看了几本jquery的书之后，觉得对jQuery的dom操作部分应该是比较熟悉了，但是当正式用到的时候又忽然觉得什么也不知道，还得上网来搜，遇到的问题就是获取span标签下的第一个span标签中的内容。如<p class = "local"> <span> <span>西安</span> <span>(xian)</span> </span></p>

2017-07-12 18:29:03 19680 1

原创更详细的天气预报接口

在经过了昨天的研究学习，现在会请求数据并且处理，但是发现昨天找到的天气预报接口中的数据太少了，比如什么紫外线，湿度，穿衣指数，感冒指数什么都没有，所以今天偶然看到了一个新的免费的接口。网址： http://www.nowapi.com；进入之后先免费注册一下，里面有大量的接口，天气预报查询，身份证号查询等等一系列想到想不到的。首先注册成功后我的账户–》账户设置要你验证邮箱和手机号，照着步骤验证

2017-07-02 11:40:11 2798

原创利用气象局的接口写一个自己的天气预报

忽然写自己的一个天气预报，首先不知如何下手，首先想到的是不是讲script链接引入到文件头部就可以了，然而接下来又要怎么做？在经过了半天的网上搜索后，明白了要写的流程， ①。找到合适得接口。在网上搜索说中国气象局提供了三个接口国家气象局提供的天气预报接口接口地址：http://www.weather.com.cn/data/sk/101010100.htmlhttp://www.weath

2017-07-02 11:20:44 7231 2

原创 overflow:hidden不起作用？

今天在项目中，通过从后台读取数据生成的table中的tr和td时，由于有些td内容太多了，需要对其进行overflow:hidden的设置。但是在经过几番努力和尝试之后始终不可以。在进行了搜索之后才明白了。我们知道，overflow属性值有这几种： visible：声明内容不会被剪裁。比如内容可能被渲染到容器外面。 hidden：声明内容将被剪裁，并且也甭想使用滚动条来查看剪裁掉的内容。 sc

2017-06-05 21:06:44 23250

转载 AngularJS中实现奇偶行不同样式

在AngularJS中使用ng-repeat时希望生成的记录中奇偶行存在不同的样式，那么就要用到ng-class。ngClassngClass指令允许在HTML标签上通过绑定一个代表所有将被添加的类的表达式去动态的设定CSS类名。该指令操作有三种不同的方式，根据三种类型的表达式计算结果为：如果表达式计算的结果是个字符串，那么这个字符串就是一个或多个以空格分隔开的类名；如果表达式计算的结果是个数组

2017-06-03 10:54:47 3485

原创怎样使footer始终处于页面的底部

想要页脚一直处于页面的底部，当内容少时，处于屏幕的底部，当页面内容很多时，在所有内容页脚在页面的最底部出现。好多人可能想到让foot的position:fixed;bottom:0px，就可以实现页脚一直处于屏幕底部。但是这样做有几个缺点： ①.页脚所处的位置好像与页面分离了不美观。 ②.页脚可能会遮挡一部分页面内容。所以为了使页脚一直处于页面内容的底部，而不是始终固定在屏幕的底部。如果这是

2017-06-01 12:09:50 30860 1

原创 transition不支持display属性

想让display从none变为block，或者从block变为none时，实现这样的动画效果大多数人都会采用transition。然而可惜的是transition并不支持display。那么能想到的办法就是使用visibility属性实现从 visible到hidden的转换。但是visibility属性与display的区别 display隐藏的元素是脱离文档流的，它不在页面中占用空间。而vi

2017-05-31 18:12:22 12114

原创案例十四、css3和fullpage实现全屏滚动

首先说一下fullpage，它是一个jquery的插件，用来实现鼠标向上向下滑动，就会自动切换到上一屏或者下一屏，对于要做一些高大上的效果确实是一个很好的插件。首先先展示一下基本的效果图。总共有四屏的内容当鼠标每次上下滑动时就会一整屏的切换。第一屏是用一个图片，其他的三屏都是由左侧的三个图片和右侧的两个图片组成的。这三屏左侧的图片展开方式不同，所以就更有炫酷的效果。第二屏的三个图片是

2017-05-05 10:58:24 2710

原创案例十四、游戏

玩法就是，点击右边的摇杆，上面的水果图片就会一直不停的滚动，再点击右边的摇杆，就会停止滚动，此时就会判断三个图片是否一样，一样的话就会提示你赢了，否则提示继续加油！首先利用html和css进行布局： <style type="text/css"> *{ margin: 0px; padding: 0px; } #title{

2017-05-03 16:43:54 471

原创 CSS3动画实现背景滚动

在上一个模仿微信打飞机的游戏中，在敌机掉落下来时，如果背景图片也可以一直无穷滚动的话，那么效果就会更好。现在就是要利用CSS3来实现一张图片的无穷滚动。首先了解一下CSS3的动画属性： ①.animation-name: 用于将动画（@keyframes 语法）附加到元素上； ②. animation-duration: 定义动画完成一次迭代（从0%到100

2017-04-26 16:28:08 8075

原创案例十三、模仿微信打飞机游戏

首先实现微信打飞机游戏，首先会有自己和敌机，采用canvas绘图来生成自己和敌人。 1.生成自己，且可以通过左右键来进行左右移动。//生成自己，且可以左右移动//控制飞机向右移动的函数 function moveRight(event){ context.clearRect(aligh,100,47,47); //防止飞机移除背景外 if(aligh < 260){ v

2017-04-25 20:27:29 2192

原创案例十二、JavaScript实现无穷滚动加载数据

首先实现滚动要借助onscroll事件处理程序。无穷滚动就是滑动滚动条，实现数据块的无穷加载。我们以瀑布流的布局来实现无穷加载。瀑布流就是一些等宽不等高的数据块布局。在滚动条下拉时，它会进行加载。那么问题就是在判断什么时候应该加载。我们首先应该明白瀑布流布局的特点。它将下一个图片总是放在当前列数最低的那一列。所以当加载最后一个蓝色的图片时，也就无疑是最后一个图片了。所以要判断该

2017-04-17 20:12:07 3362

原创将按钮按照value值排序，并且点击按钮后值1s自减一

body中的代码和CSS<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } input{ padding: 20px 30px;

2017-04-12 21:10:39 400

原创 JavaScript中typeof和instanceof用法笔记

typeof一般用来获取一个变量或者表达式的类型。 > typeof undefined 'undefined' > typeof null // well-known bug 'object' > typeof true 'boolean' > typeof 123 'number' > typeof "abc" 's

2017-04-12 20:38:26 370

原创确定实例与原型之间的关系

可以使用两种方式确定实例与原型之间的关系： 1. instanceof操作符 2. isPrototypeOf()方法先来一段代码：function SuperType(){ this.property = true; }//在SuperType函数的原型链上创建实例共享方法 SuperType.prototype.getSuperValue = function(){ return

2017-04-12 20:03:00 1442

原创谈谈对原型链的理解

许多OO语言支持两种继承方式：接口继承和实现继承。接口继承只继承函数签名，实现继承则继承实际的方法。由于函数无签名，在JavaScript中无法实现接口继承。所以只能实现方法继承。实现继承主要依赖原型链。什么是原型对象。我们知道每个构造函数一旦创建都有prototype指针指向它的原型对象（构造函数.prototype）。而原型对象（构造函数.prototype）会默认生成一个const

2017-04-12 19:31:16 14154

原创 [编程题] 字符串编码

给定一个字符串，请你将字符串重新编码，将连续的字符替换成“连续出现的个数+字符”。比如字符串AAAABCCDAA会被编码成4A1B2C1D2A。输入描述: 每个测试输入包含1个测试用例每个测试用例输入只有一行字符串，字符串只包括大写英文字母，长度不超过10000。输出描述: 输出编码后的字符串输入例子: AAAABCCDAA输出例子: 4A1B2C1D2Aimport java.u

2017-04-10 23:22:00 821

AngularJS+ NodeJS

jsp+javaBean+servlet+mysql完整的实现一个登录功能

echarts的雷达图鼠标移上去怎样将该条轴线上的数据展示？效果图如下