web前端
文章平均质量分 56
不吃鱼的猫咪
这个作者很懒,什么都没留下…
展开
-
用Astro建立一个静态站点
Astro是一个相对较新的web框架,它可以帮助你轻松地建立快速干净的网站。Astro能够与目前主流的JavaScript前端框架一起工作,如React,Vue或solid原创 2023-01-06 19:23:58 · 3214 阅读 · 3 评论 -
reac基于wangEditor编辑器实现自定义菜单项插入变量
reac基于wangEditor编辑器实现自定义菜单项插入变量原创 2022-02-09 15:43:33 · 768 阅读 · 3 评论 -
Symbol.toStringTag 特殊的内置对象
Symbol.toStringTag 是一个内置 symbol,它通常作为对象的属性键使用,对应的属性值应该为字符串类型,这个字符串用来表示该对象的自定义类型标签,通常只有内置的 Object.prototype.toString() 方法会去读取这个标签并把它包含在自己的返回值里。Symbol.toStringTag 属性的属性特性:writablefalseenumerablefalseconfigurablefalse描述许多内置的 JavaScrip转载 2020-07-30 17:35:38 · 1331 阅读 · 0 评论 -
vue页面加载闪烁问题的解决方法
解决vue页面加载时出现{{message}}闪退方法一:v-cloakv-cloak指令和css规则如[v-cloak]{display:none}一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。 v-cloak 指令可以像css选择器一样绑定一套css样式然后这套css会一直生效到实例编译结束。 eg: // <div> 不会显示,直到编译结束。 [v-cloak]{ display:none; } <div v-cloak&转载 2020-07-27 11:29:50 · 1001 阅读 · 0 评论 -
Css 打字机效果,文字循环 逐个出现,逐个删除
最近在做个人网站,想实现下面的效果,在网上搜了下,基本都只有打字机效果,没得出现后再删除的效果,于是就自己简单写了个,功能比较简单,详细的描述在注释中都有说明。效果如下:html 文本<h1 id="box"></h1>css 样式// keyframes 可根据展示的文本长度,自行添加,我的格式为: @keyframes ‘type’+'文本长度'@keyframes typing10 { from { width: 0; } 50% {原创 2020-05-21 16:49:48 · 5058 阅读 · 0 评论 -
前端使用docker,travis+dockerhub
演示环境:Windows项目名称:docker_demo(注意不能有大写字母)一、安装Docker下载官网的Docker安装包,然后直接安装https://www.docker.com/Docker官网下载地址安装后直接打开打开终端命令行,输入docker,会出现以下信息,那么说明安装成功Docker的两个核心知识点container(容器)和image(镜像)Docker的...原创 2019-12-07 14:44:56 · 334 阅读 · 0 评论 -
分享一些前端开发中最常用的JS代码片段
HTML5 DOM 选择器// querySelector() 返回匹配到的第一个元素var item = document.querySelector('.item');console.log(item);// querySelectorAll() 返回匹配到的所有元素,是一个nodeList集合var items = document.querySelectorAll('.item');转载 2017-07-27 18:08:51 · 413 阅读 · 0 评论 -
个人项目习惯配置gulpfile
个人项目习惯配置gulpfile:var gulp = require('gulp'), plugins = require("gulp-load-plugins")({ pattern: '*' //让gulp-load-plugins插件能匹配除了gulp插件之外的其他插件 }), merge = require('merge-stream'),原创 2017-07-13 15:57:11 · 950 阅读 · 2 评论 -
gulp、MockJs、NodeJs、Mustache脱离后台环境,只通过模拟数据运行项目
项目需求:在node环境下开发的项目,发布后不依靠后台数据,只通过模拟数据能正常运行(做项目demo);[TOC] 用到的主要技术:gulp(构建工具),MockJs(模拟数据),NodeJs(文件读写流),Mustache(拿到数据后页面渲染); 开发中遇到的问题说明:模拟数据采用MockJs,之前的思路是将数据用json文件的形式写成,然后用Mock拦截url返回从json文件中读取出数据作原创 2017-06-24 18:01:34 · 1619 阅读 · 0 评论 -
gulp构建工具之项目体验
首先确保你已经正确安装了nodejs环境。1、新建一个空的项目根目录2、在根目录下创建package.json,根据项目需要,自定义配置好package.json{ "private": "true", "engines": { "node": ">=0.10.0", "npm": ">=2.5.0" }, "dependencies": { "amd-opt原创 2017-06-14 16:09:00 · 374 阅读 · 0 评论 -
websorm环境下,react+webpack搭建项目环境
一、创建基本目录结构新建项目新建项目工程:reactProj 配置jsx安装 webpack在此之前你应该已经安装了 node.js.npm install webpack -g参数-g表示我们将全局(global)安装 webpack, 这样你就能使用 webpack 命令了.webpack 也有一个 web 服务器 webpack-dev-server, 我们也安装上npm install原创 2017-07-10 18:10:20 · 1187 阅读 · 2 评论 -
nodeJs读写流(读取json目录文件后,自定义写入新文件中)
需求:将data目录下的所有json文件中的内容,依次读取出来按照一定的规则封装后输出到MockData.js文件夹中 输出: 解决方法想到了3种方式: 1. 在MockData.js中,将mock函数的url先配置好请求链接,然后循环使用ajax请求得到json数据写入对应的数据模版中;(ajax的url不能和mock函数的url同名) 2. 在node环境中,将所有文件中的jso原创 2017-06-19 17:34:07 · 7984 阅读 · 0 评论 -
前端构建之gulp与常用插件
gulp是什么?http://gulpjs.com/ 相信你会明白的!与著名的构建工具grunt相比,有什么优势呢?易于使用,代码优于配置 高效,不会产生过多的中间文件,减少I/O压力 易于学习,API非常少,你能在很短的事件内学会gulp 那些常用的gulp插件 No.1、run-sequenceLinks: https://www.npmjs.com/package/run-sequen转载 2017-06-14 13:53:51 · 387 阅读 · 0 评论 -
jQuery 常用方法
jQuery常用函数方法数字格式化获取当前日期判断对象是否为空删除数组指定的某个元素获取url中的参数原创 2017-07-26 17:52:50 · 282 阅读 · 0 评论 -
bootstraptable 合并行数据并居中对齐
渲染表格后进行数据行合并,垂直居中对齐原创 2017-07-26 18:16:30 · 17254 阅读 · 0 评论 -
vue src动态加载请求获取的图片
一. 加载本地图片1.图片目录 2. 在data中配置图片路径 data() { return { formData: { avatar: require('@/assets/icon1524737568182.png'), motto: 'xxxxxxxxxx' },...原创 2018-05-18 14:56:20 · 62045 阅读 · 5 评论 -
NodeJs串口通信
前言:最近这两天在研究如何实现web页面和串口间通信,在网上也查了各种资料,electron、nw或者chrome serial,发现对于我来说都太难实现了,一来可用的资料太少,二来安装东西老是出问题,算了还是放弃吧,自己用常用且最熟悉的方式来实现吧,作为一名前端码农,选用的肯定是node作为服务器了,然后网页请求方式用ajax或websocket都可以,实现方式下文都有。 先说说基本需求:硬件...原创 2018-05-23 16:20:38 · 33838 阅读 · 16 评论 -
CSS3颜色格式和透明度
CSS3允许我们使用新方法如RGB或HSL来声明颜色。另外,我们还能在这两个方法后面追加一个透明通道(分别是RGBA和HSLA)。1、HSLHSL模式基于一个360°的色环相。HSL的H(hue)分量,代表的是人眼所能感知的颜色范围,这些颜色分布在一个平面的色相环上,取值范围是0°到360°的圆心角,每个角度可以代表一种颜色。在实际应用中,我们需要记住色相环上的六大主色,用作基本参照:360°/0原创 2015-12-07 14:36:13 · 1879 阅读 · 0 评论 -
JavaScript 函数
JavaScript 使用关键字 function 定义函数 函数可以通过声明定义,也可以是一个表达式转载 2017-06-01 14:17:14 · 369 阅读 · 0 评论 -
js实现窗口拖拽效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { width: 300px; background-color: green; position: absolute; } h2{ width:100%} </style> </原创 2017-03-16 14:14:36 · 7886 阅读 · 1 评论 -
百度地图 JS API 隐藏信息弹窗自带的关闭按钮
隐藏信息弹窗自带的关闭按钮var infoWindow = new BMap.InfoWindow(appendDiv); // 创建信息窗口对象infoWindow.addEventListener('open',function(type, target, point){ //窗口打开是,隐藏自带的关闭按钮 $('.BMap_pop>img').hide();})原创 2017-03-01 15:37:59 · 13192 阅读 · 0 评论 -
WEB前端开发成长指南
小编注:相比起网页射击狮,操纵代码的前端攻城狮凭着双手在键盘巴拉巴拉敲出的字符,就能赋予二次元的静态页面生命,各种lovely的~~fabulous的~~elegant的交互效果,那叫一个锦上添花哈~~不过,要修炼成一个百战百胜的攻城狮,那是得从基本的JavaScript开始,一点一滴积累hacking技能。日前小编在茫茫信息汪洋里瞟到这神级干货,本着你好我好大家好的精神,怎能收着掖着不分享叻?想成转载 2016-03-10 14:13:47 · 393 阅读 · 0 评论 -
WEB前端开发规范
1. 基本原则1.1 结构、样式、行为分离尽量确保文档和模板只包含 HTML 结构,样式都放到样式表里,行为都放到脚本里。1.2 缩进统一两个空格缩进(总之缩进统一即可),不要使用 Tab 或者 Tab、空格混搭。1.3 文件编码使用不带 BOM 的 UTF-8 编码。在 HTML中指定编码 <meta charset="utf-8"> ;无需使用 @charset 指定样式表的编码,它默认为转载 2016-03-07 16:00:23 · 680 阅读 · 0 评论 -
jQuery Mockjax使用总结
一、mockjax介绍 在前后台共同进行一个项目的时候常会遇到一种情景,大家统一定义好接口数据格式后,前后端各自按照接口进行开发,当前端需要和后台交互调用数据时,运用mockjax插件就不用再等后台传递数据就可以进行模拟测试,再继续开发。 二、使用方法 模拟一个登陆提交表单 1、导入相应的插件 下载mockjax插件 下载jQuery插件<script type="text/ja原创 2016-03-04 16:45:32 · 6931 阅读 · 0 评论 -
IE事件处理程序及跨浏览器解决
<div id="box"> <button type="button" id="btn">按钮</button> <button type="button" id="btn2">按钮2</button> <button type="button" id="btn3">按钮3</button> </div>转载 2016-02-17 17:34:52 · 571 阅读 · 0 评论 -
CSS3的高级特性
在开发CSS3时要记住添加相关的浏览器私有前缀以保证最广泛的浏览器兼容。(可以使用javascript,脚本地址为:http://leaverou.github.com/prefixfree/。或者去我的资源里下载也可以。)1、文字阴影基本语法:.element{text-shadow:1px 1px 1px #cccccc;}//.element{text-shadow:-1px -1px 1p原创 2015-12-07 16:10:28 · 525 阅读 · 0 评论 -
JS插件开发之LightBox图片画廊
工程目录结构图: lightBox.js封装了写好的插件,直接导入即可,这里就不在详细解释代码了,主要介绍一下怎么运用该插件,下载地址:http://download.csdn.net/detail/u012612399/9333581 如果要兼容IE6的话,需要导入DD_belatedPNG.js。 html代码如下:<!DOCTYPE html><html> <head>转载 2015-12-23 13:59:30 · 2509 阅读 · 0 评论 -
网页中导入特殊字体@font-face属性详解
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页转载 2015-11-30 17:59:13 · 1112 阅读 · 0 评论 -
10个优秀的Javascript的音频库
Web和Web浏览器在过去几年取得了快速的进步,这些进步与新技术通常被认识是HTML5达到的惊人的成果。然而,在这些新技术中,音频任然是不足的。尽管谷歌开了WEB音频API,使我们上网得到方便,但是只有一些最新的浏览器才支持这种新开发的WEB的音频。HTML5提供了一种新的音频标签实现和规范用一个简单的HTML对象而无需音频插件来控制音频。这只是一个简单的整合这些新的HTML5音频特征及使用Java转载 2015-11-27 16:20:36 · 8448 阅读 · 0 评论 -
CSS、HTML命名规则
CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot转载 2016-03-10 15:35:43 · 564 阅读 · 0 评论 -
jQuery Ajax
一、.load()方法.load()方法是最简单的jQuery Ajax方法。它可以用来加载来自服务器的HTML,当服务器响应时,返回的HTML会自动被加载到一个jQuery选择器中。 模拟练习:点击导航链接,不跳转页面来加载相应的新内容load.html<nav> <a href="load.html" class="current">Home</a>转载 2016-03-10 17:28:00 · 368 阅读 · 0 评论 -
H5资源工具
1,图片在线压缩神器,压缩比高达50-80% (1)摘要:一款支持在线上传图片和压缩的神器,前后图片对比基本无差,支持jpg,png等,压缩比高达50-80% 工具地址:https://tinypng.com/ (2)http://zhitu.isux.us/index.php2,logo设计生成http://emblemmatic.org/markmaker/#/【更多资料htt原创 2017-01-12 14:12:48 · 670 阅读 · 0 评论 -
echarts相关配置及图示
xAxis.boundaryGap配置为false,默认为 true。(1)var power=10;var totalPower=14;var percent = (100*power/totalPower).toFixed(2);option = { title: { text: power+"KW", x: "center",原创 2017-01-11 14:47:23 · 3744 阅读 · 1 评论 -
jquery 实现弹框拖拽
function dragWin( opt ){ var _options = $.extend({ tit : $('.ui-dialog-titlebar'), win :$('.ui-dialog'), dom : $('html') },opt) var clicked =原创 2017-01-11 14:15:54 · 586 阅读 · 0 评论 -
常用的js处理方法(数字每隔三位加逗号分开,日期)
(1)把数字每隔三位加逗号分开function FormatNum(str){ var str = ''+str; var newStr = ""; var count = 0; if(str.indexOf(".")==-1){ for(var i=str.length-1;i>=0;i--){ if(count % 3 ==原创 2017-01-11 14:07:05 · 3753 阅读 · 2 评论 -
echarts柱状图 渐变色
效果图: var xAxisData = [];var data = [];for (var i = 9; i < 16; i++) { xAxisData.push('5月' + i + '日'); data.push(Math.round(Math.random() * 500) + 200);}option = { title: { text:原创 2016-12-23 13:42:30 · 32959 阅读 · 3 评论 -
for ... of循环和for ... in循环有何区别?
for … in循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。当我们手动给Array对象添加了额外的属性后,for … in循环将带来意想不到的意外效果:var a = ['A', 'B', 'C'];a.name = 'Hello';for (var x in a) { alert(x); // '0',转载 2016-12-21 17:37:49 · 7278 阅读 · 0 评论 -
使用ajax来实现页面的局部加载
点击头部即右上角的链接时,页面会根据相应的链接加载新的内容,显示在下方;在中间区域有3栏,当点击1栏中的链接,2栏中会显现相应的内容,点击2栏中的内容,3栏中的内容又会根据2栏的链接来加载显示内容。 页面效果如下: js代码如下:$("header a").on("click",function(e){ e.preventDefault(); //阻止事件默认行为原创 2016-03-14 23:52:02 · 2174 阅读 · 0 评论 -
为什么ajax发GET请求就成功,POST请求则报错
为什么ajax发GET请求就成功,POST请求则报错? (1)首先说明的是请求的URL是一个静态资源,比如一个json文件。 (2)现在现象是发GET请求就成功,POST请求则报错。 (3)最新发现:就算是GET请求,如果把JSON数据的序列化字符串直接作为query string也会导致报错。就是这样:some_url?{%22username%22:%22username%22,%22pa转载 2016-03-14 17:46:52 · 6755 阅读 · 0 评论 -
javascript中style.left和offsetLeft的用法说明
javascript中style.left和offsetLeft的用法说明转载 2015-11-23 10:34:54 · 871 阅读 · 0 评论