web前端
chibimarukochan
记录一些学习心得和日常。
展开
-
jQuery对表单的操作
表单应用1.单行文本框应用初始化网页,样式如下: <form> <fieldset> <legend>个人基本信息</legend> <div class="col-line"> <label>名称:</label&g...原创 2019-06-24 17:38:38 · 555 阅读 · 0 评论 -
mac npm run dev启动项目失败
提示node_modules/.bin/webpack-dev-server无权访问因为没有安装webpack-dev-server运行下面命令:sudo cnpm install webpack-dev-server -g 然后在运行npm run dev原创 2018-11-07 00:33:33 · 2743 阅读 · 0 评论 -
vue.js安装less
主要是用muse ui引入一些css报错,提示缺少less-loadervue-cli 构建的项目默认是不支持 less 的,需要手动添加。进入项目目录下的node_modules这个文件,安装运行如下命令npm install less less-loader --save-dev然后在build/webpack.base.conf.js中添加 module: { ...原创 2018-10-21 17:28:36 · 1485 阅读 · 0 评论 -
vue项目关闭eslint校验
ESLint是一种用于识别和报告ECMAScript / JavaScript代码中的模式的工具,其目标是使代码更加一致并避免错误。在许多方面,它类似于JSLint和JSHint,但有一些例外:ESLint使用Espree进行JavaScript解析。 ESLint使用AST来评估代码中的模式。 ESLint是完全可插拔的,每个规则都是一个插件,您可以在运行时添加更多。详细介绍见官方...原创 2018-10-22 15:48:34 · 1224 阅读 · 0 评论 -
angular2+Typescript搭建
第一步:安装node.js,npm,cnpm使用命令查看版本://查看npm npm -v//查看node node -v//查看cnpm cnpm -v版本如下:第二步:创建项目mkdir myAngularProjectcd myAngularProjectAngular 项目需要以下几个配置文件:package.json 标记本项目所需的 n...原创 2018-10-15 22:11:13 · 550 阅读 · 0 评论 -
ECharts 坐标轴颜色改变、位置改变、去网格
xAxis.splitLine坐标轴在 grid 区域中的分隔线。 xAxis: { type: 'value', //改变X 轴的位置 top\bottom position:'top', boundaryGap: [0, 0.01], // 控制网格线是否显示 ...原创 2017-11-03 15:25:31 · 11478 阅读 · 1 评论 -
ECharts使用
ECharts特性一个纯 Javascript 的图表库,提供了常规的折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图,用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。 引入Js只需要像普通的 JavaScript 库一样用 script 标签引入。...原创 2017-11-03 14:16:40 · 549 阅读 · 0 评论 -
MUI click点击事件/新页面跳转问题
第一次接触mui,谈一下刚遇到的一些小问题咯。第一步:引入应对的css\js<link href="css/mui.min.css" rel="stylesheet" /><script src="js/mui.min.js"></script>初始化 mui:<script type="text/javascript&原创 2018-09-05 15:01:43 · 8429 阅读 · 0 评论 -
mui增加自定义icon图标
mui中使用的图标是字体而不是图片可以使用阿里巴巴矢量图标官网:http://iconfont.cn/第一步:注册登录,选择自己喜欢的图标,点击,会添加到右上角的购物车第二步:点击购物车,选择添加至项目,输入项目名称例如“iconfont”,点击“存储”按钮后,会跳转到我发起的项目,选择“下载至本地”第三步:下载下来的字体主要包括:修改iconfont.css:...原创 2018-09-10 14:34:40 · 4649 阅读 · 4 评论 -
CSS实现超过部分用省略号代替
1)显示一行,超出部分用省略号显示.class名称{ overflow:hidden; //超出的文本隐藏 text-overflow: ellipsis;//溢出用省略号显示 white-space: nowrap;//溢出不换行}2)显示两行,超出部分用省略号显示.class名称{ overflow: hidden; text...原创 2019-04-11 11:19:42 · 1356 阅读 · 0 评论 -
html2Canvas生成图片
首先,毋庸置疑,需要引入如下文件:<script src="js/jquery-2.1.1.min.js"></script><!-- 引入html2canvas --><script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"</scri...原创 2019-04-26 17:52:43 · 2225 阅读 · 0 评论 -
前端生成二维码插件jquery.qrcode.js
一、效果二、使用1)引入jquery.qrcode.min.js和jquery<script src="js/jquery-2.1.1.min.js"></script><script type="text/javascript" src="js/jquery.qrcode.min.js"></script>2)创建一个DOM...原创 2019-05-08 15:35:15 · 436 阅读 · 0 评论 -
jquery中的事件和动画
第一步毋庸置疑,引入jquery.js <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>jQuery中的事件针对下面的代码(点击标题,找到内容元素;如果内容显示,则隐藏;如果内容隐藏,则显示)<div id="p...原创 2019-06-24 14:35:44 · 198 阅读 · 0 评论 -
jQuery中的DOM操作
请先引入jquery.js <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>对下面这段简短的代码进行操作:<p title="请选择你喜欢的水果">请选择你喜欢的水果</p><ul> &l...原创 2019-06-21 17:20:32 · 191 阅读 · 0 评论 -
jQuery选择器
基本选择器最常用的选择器,主要通过id,class,标签等查找dom元素。每个ID名称只能用一次,class允许重复使用。#id 比如$("#test")选取id为test的元素 .class 比如比如$(".test")选取class为test的元素 element $("P")选取所有<p>元素 * $("*")选取所有元素 层...原创 2019-06-21 15:17:03 · 186 阅读 · 0 评论 -
jQuery对表格的操作
表格变色1.普通的隔行变色HTML代码: <table> <thead> <tr><th>姓名</th><th>性别</th><th>居住地</th></tr> </thead> <...原创 2019-06-25 11:11:27 · 1721 阅读 · 0 评论 -
jquery对象和dom对象
<input type="checkbox" id="cr"><label for="cr">我已经阅读上面的说明</label>首先,用DOM方式来判断复选框是否被选中,效果如下:var $cr= $("#cr");var cr=$cr[0];$cr.click(function(){ if(cr.checked){ alert...原创 2019-06-04 15:47:52 · 189 阅读 · 0 评论 -
jQuery—链式操作
以导航栏为例,单击不用的商品名称链接,显示对应的内容,同时高亮当前选择的商品。HTML 代码如下: <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none">衬衫</a> <ul class="le...原创 2019-06-04 15:26:09 · 392 阅读 · 0 评论 -
flex弹性布局
一、定义Flex 布局,可以简便、完整、响应式地实现各种页面布局。Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。注意:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。以下6个属性设置在容器上。flex-direction flex-w...原创 2019-05-23 17:43:05 · 165 阅读 · 0 评论 -
图片预加载
定义:预知用户将发生的行为,提前加载用户所需要的图片。主要表现:网站loading页:添加着陆页,等需要的所有需要的图片加载完毕,一次性呈现给用户,提高用户体验。 局部图片的加载:表情插件 漫画网站特点:提前加载所需要的图片 更好的用户体验分类:无序加载:类似QQ表情插件,不关心加载顺序 有序加载:漫画网站(当用户需要查看时可直接从本地缓存中渲染以提供给用户更好的体验减...原创 2019-05-15 16:20:16 · 155 阅读 · 0 评论 -
mui增加icon彩色图标
下载阿里巴巴矢量图标操作见上一篇文章哦https://blog.csdn.net/ChibiMarukoChan/article/details/82588849第一步:引入iconfont.js<script src="js/iconfont.js"></script>第二步:在页面修改icon的样式,如下:<style>.icon ...原创 2018-09-11 13:48:58 · 2576 阅读 · 0 评论 -
Vue.js学习
安装node.js环境(npm包管理器)vue-cli 脚手架构建工具Node.js直接官网下载:https://nodejs.org/en/download/ 然后直接下一步安装可以查看版本号node -vNPM在用 Vue 构建大型应用程序时,推荐使用 NPM 安装方式。它可以很好地与模块打包器(module bundler)(例如 webpack 或 Bro...原创 2018-05-30 15:05:26 · 283 阅读 · 0 评论 -
CKEditor配置使用
一.使用方法引入ckeditor核心文件ckeditor.js在使用编辑器的地方插入HTML控件二.配置编辑器 ckeditor的配置都集中在 ckeditor/config.js 文件中,下面是一些常用的配置参数: // 界面语言,默认为 'en' config.language = 'zh-cn'; // 设置宽高 config.width原创 2017-11-16 16:15:15 · 417 阅读 · 0 评论 -
百度编辑器UEditor的简单使用教程
1.下载编辑器下载地址:http://ueditor.baidu.com/website/ ,选择jsp UTF-8版本,解压到项目的目录下。2.创建demo文件在解压后的目录创建一个html文件,引入相应的文件。3.浏览器打开创建的html页面如果看到这样的界面,初次部署就成功啦!4.一些简单的应用获取编辑器的内容:g原创 2017-09-28 16:58:28 · 1672 阅读 · 0 评论 -
jQuery操作数组、Ajax
一.JQuery操作数组 1.定义数组//关联数组var arr ={"id":10,"name":"tom"};//索引数组var res=[1,2,3,4,5,6];//对象.length是用来计算数组长度,但是不能计算关联数组的长度 2.数组函数//$.each():遍历数组1.遍历自定义数组$.each(数组,function(k,v){ //k:如果是关联是键名,如果是索引是下标;...原创 2017-10-19 08:51:08 · 2008 阅读 · 0 评论 -
compass项目配置文件config.rb
执行compass create projectName会自动创建一些文件夹和文件:配置文件config.rb'require 'compass/import-once/activate'解释:当重复引用同一个scss文件,只输出一次编译结果。配置根目录http_path = "/" //项目根目录css_dir =原创 2017-11-08 15:28:38 · 663 阅读 · 0 评论 -
window sass/compass安装
第一步:先安装Rudy安装sass 和compass 需要 Ruby 的环境。到官网下载:http://rubyinstaller.org/downloads/选择合适的安装包:在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以找不到ruby环境.安装完成之后,可以在开始菜单找到rudy:打开Start Command Prompt...原创 2017-11-08 13:50:54 · 392 阅读 · 0 评论 -
温度计样式
jquery-tempgauge是一款基于HTML5 的jQuery温度计插件。使用该插件可以生成温度计的外观样式,并将指定的温度度数转换为温度计的颜色刻度。使用方法使用该温度计插件需要引入jQuery和jquery.tempgauge.js文件。HTML该温度计的HTML结构非常简单:使用一个元素来包裹需要转换的温度文本。原创 2017-11-03 11:21:08 · 2757 阅读 · 0 评论 -
typescript环境配置
第一步:安装Visual Studio Code作为开发工具官网下载:https://code.visualstudio.com/download主要包括但不限于以下几个目录和文件/ts:TypeScript源码文件存放的文件夹/js:编译之后生成的JavaScript文件存放的文件夹tsconfig.json:TypeScript编译配置文件另外.vscode是VS Code开发工具特有的文件夹...原创 2017-09-13 09:16:12 · 3047 阅读 · 0 评论 -
代码语法高亮插件highlight.js
highlight.js主要特点如下:176种语言和79种风格;自动语言检测多语言;代码突出显示;可用于node.js;与任何标记一起使用;兼容任何js框架;在你的网站中使用highlight.js非常简单哦,只要引入对应的css和js,下面来作详细的说明:1)需要引入相关的文件,并调用initHighlightingOnLoad方法:linkrel="原创 2017-09-27 09:07:00 · 5543 阅读 · 1 评论 -
sass安装(Mac)
安装ruby 因为 Sass 是基于ruby的,所以需要安装ruby环境.默认 Mac 是自带ruby的.使用下面命令可以查看本机ruby版本.ruby -v安装 Sasssudo gem install sass使用’ sass -v’ 查看安装成功与否更新 Sasssudo gem update sass卸载gem uninstall sass...原创 2018-04-24 10:48:19 · 435 阅读 · 0 评论 -
Mac 安装compass
安装compasssudo gem install compass 安装运行的依赖软件 chunky_png-1.2.9sudo gem install chunky_png安装fssm-0.2.10sudo gem install fssm升级到最新的compass版本sudo gem install compass --pre 查看版本信息sudo compass -...原创 2018-04-24 13:31:15 · 1478 阅读 · 0 评论 -
Jquery插件导出word之---html-docx.js
下载地址:链接:https://pan.baidu.com/s/1e7zh8pXhR5h_obipuaq3zA 密码:i4pg使用方法://.dts文件中:declare namespace htmlDocx { export function asBlob(content:string);}//.ts中引入:///<reference path="./htmldocx/htm...原创 2018-04-25 11:03:11 · 6623 阅读 · 2 评论 -
正则表达式 -转义字符
常见的HTML实体字符特殊符号命名实体十进制编码特殊符号命名实体十进制编码 &#32;! &#33;"&quot;&#34;# &#35;$ &#36;% &#37;&&amp;&#38;' &#39;( &#40;) &#41;* &#42;+ &#43;,原创 2017-11-23 16:43:22 · 1134 阅读 · 0 评论 -
WebStorm激活码
安装完成后,打开 WebStorm,在打开的 License Activation 窗口中选择 License server。在输入框输入网址: http://idea.iteblog.com/key.php(已经失效)最后点击 Activate。因为注册码时不时不能用,所以建议大家自行去网站获取注册码,网址:http://idea.lanyus.com/建议大家使用补丁的...原创 2017-10-31 11:09:26 · 2448 阅读 · 0 评论 -
WebStorm安装与使用
一.安装官网地址:http://www.jetbrains.com/webstorm/下载之后进行安装:点击next:选择安装路径,点击next:根据配置安装32位或者64位,勾选后缀:.js\.css\.html启动软件:不选择免费试用30天,选择用注册码激活。具体参照《WebStorm激活码》...原创 2017-10-31 11:17:29 · 947 阅读 · 1 评论 -
dataURL与File,Blob,canvas对象之间的互相转换
canvas转换为dataURL (从canvas获取dataURL)var dataurl = canvas.toDataURL('image/png');var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);12File对象转换为dataURL、Blob对象转换为dataURLFile对象也是一个Blob对象,二者的处理相同。function ...转载 2017-10-20 10:27:18 · 3262 阅读 · 0 评论 -
input file 预览图片、上传后清空选择文本框信息
1.上传文件之后,想预览上传的图片,input框的accept限制上传文件的类型,multiple为多文件上传,<div id="imglist"></div>用于存放图片。html代码://多文件上传<input type="file" class="upload_image" id="fileupload" accept="image/*&qu原创 2017-10-18 14:28:01 · 8554 阅读 · 0 评论 -
js获取textarea值
1.html页面:2.js获取textarea值正常情况下:var text = document.getElementById('advice—textarea').innerHTMLvar text =$("#radvice—textarea").val();如果以上方法获取不到,请先查看$("#radvice—textarea")到底是什么,一步步去得到你想到的数据;比如曾经用这种方式得到...原创 2017-10-18 14:53:47 · 14520 阅读 · 1 评论 -
js时间戳与日期格式之间的相互转换
一.将时间戳转换成日期格式var date = new Date(时间戳); //获取一个时间对象date.getFullYear(); // 获取完整的年份(4位,1970)date.getMonth(); // 获取月份(0-11,0代表1月,用的时候记得加上1)date.getDate(); // 获取日(1-31)date.getTime(); // 获取时间(从197原创 2017-12-08 11:16:25 · 713 阅读 · 0 评论