web
文章平均质量分 81
游走走
这个作者很懒,什么都没留下…
展开
-
纯css实现优惠券效果
最近UI小姐姐休假了,优惠券缺了我几个切图,不好意思打扰人家,就寻思着,干脆用css直接手写吧。这里记一下实现思路。先来看看效果图:看着还行叭。主要是这几个地方的样式:左上角书签;优惠券票孔;右上角状态标签。1. 左上角书签书签这里又分成两个部分,一部分是整体的半圆角矩形,一部分是左上的那个小折角。半圆角矩形很好实现:height: 20px;border-radius: 0 20px 20px 0;小折角是利用绝对定位和skew变换: display:原创 2022-01-05 17:08:12 · 2112 阅读 · 0 评论 -
用魔法打败魔法:前端代码规范化
目录工具简介实现思路具体实现总结附录代码千万行,规范第一行。编码不规范,同事两行泪。早几年接手过一个项目,一堆bug不说,代码还又臭又长,据说之前写代码的那位仁兄经常改一个bug又带出十个bug????项目里充斥着各种含义不明的变量、没有用到的不知道从哪里复制粘贴过来的函数、乱七八糟的console、随心所欲的空行和毫无意义的注释……很多程序员没有代码规范意识,经常觉得只要功能能用就行了,代码规范浪费时间,于是写出来的代码过一段时间可能连自己都看不懂是坨什么东西,更不用说接手的同事原创 2021-07-23 16:28:40 · 219 阅读 · 0 评论 -
手摸手教你搭个脚手架
目录脚手架全局命令交互式输入拉取远程仓库代码优化总结1、脚手架今天工地的砖有点烫,我抬头望了望天,思考了半分钟,决定为了以后搬砖方便,先搭个脚手架:不好意思,拿错了,是这个:相信很多小伙伴都用过vue-cli、create-react-app或angular-cli之类的脚手架,一个命令行就能快速搭起项目框架,告别刀耕火种的复制粘贴,分分钟解放生产力。作为一个有追求的切图仔,这种摸鱼神器,必须立马安排。好了,那么问题来了:什么是脚手架?从表现形式上来看,脚手架主要有以下几原创 2021-07-11 15:23:12 · 184 阅读 · 3 评论 -
源码学习之noop
/** * Perform no operation. * Stubbing args to make Flow happy without leaving useless transpiled code * with ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/). */function noop(a, b, c) { }这是一段vue2里的源码。noop,是No Operatio原创 2021-03-30 15:08:19 · 1077 阅读 · 0 评论 -
h5调用摄像头拍照并获取陀螺仪数据
先上代码,后面给出兼容性测试结果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>后置摄像头+陀螺仪</t原创 2020-07-23 23:30:07 · 1388 阅读 · 0 评论 -
vue打印
新建Print.vue文件,复制粘贴代码如下:<script>const print = function(id, cb) {let style = "";let domStyle = document.styleSheets;if (domStyle && domStyle.length > 0) {for (let i = 0; i < domStyle.length; i++) {try {if (domStyle[i].cssR.原创 2020-06-23 11:48:26 · 903 阅读 · 0 评论 -
#学习笔记#gulp配置文件入门
教程推荐:http://www.gulpjs.com.cn/docs/getting-started/package.json{ "name": "gulptest", "version": "1.0.0", "description": "", "main": "gulpfile.js", "dependencies": { "gulp": "^3.9.1",原创 2016-09-12 17:34:47 · 480 阅读 · 0 评论 -
Javascript AOP
这是8月参加的一次深圳前端技术分享会,有个小伙伴分享了一个关于AOP的demo,回来又查了一些关于AOP的资料demo function main() {//主函数 console.log('this is main'); } function logBefore(arg_log) { console.log('this is logBefore'原创 2016-09-10 13:05:53 · 484 阅读 · 0 评论 -
#学习笔记#(57)offset,scroll,client
* { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } body { border: 10px solid #ccc; padding: 10px; } .box { widt原创 2016-04-04 19:48:56 · 294 阅读 · 0 评论 -
facebook:我们为什么构建React
原文地址:https://facebook.github.io/react/blog/2013/06/05/why-react.html JS如今已有诸多MVC框架,为什么还要构建和使用React?初次翻译,如有错误,欢迎指正~。~翻译 2016-09-04 21:41:32 · 1527 阅读 · 0 评论 -
svg学习之svg动画
发现了一个蛮好用的svg编辑器:http://editor.method.ac/ 我不说估计谁都看不出来这一坨画的是云吧。。。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><svg width="100%" height="5原创 2016-09-26 17:27:03 · 485 阅读 · 0 评论 -
webpack学习初体验
首先全局安装webpacknpm install webpack -g若安装成功,执行webpack -h会返回版本号和操作提示 进入项目目录 (1)执行npm init 初始化一个package.json;然后为当前项目也安装一下webpack,这样才能在本地跑起来;webpack-dev-server是开发工具npm install webpack --save-devnpm instal原创 2016-10-24 18:17:30 · 937 阅读 · 0 评论 -
Dijkstra(迪杰斯特拉)算法-js实现
实现代码如下: var n = 3; var dis = [0]; var mark = []; var arr = []; var inf = 9999; var i, j, k; //init for (i = 0; i < n; i++) { mark.push(1); arr[i] = [];原创 2016-10-25 09:57:32 · 2447 阅读 · 0 评论 -
ng2学习初体验
今天试着跑了一下项目 https://github.com/AngularClass/angular2-webpack-starter 不出意外地踩了几个坑 将项目代码下载到本地后 按照项目提示,事先安装好以下几个依赖包(当然首先要有个node)* webpack (npm install --global webpack)* webpack-dev-server (npm install原创 2016-09-28 17:42:54 · 479 阅读 · 0 评论 -
jquery-weui的gulp自定义配置
jquery-weui的github项目地址:https://github.com/lihongxun945/jquery-weui根据项目需要修改了项目结构和gulpfile,并且增加了自动开启浏览器并实时刷新 项目结构如下: 修改后的项目下载地址:https://github.com/ECHOyougf/jquery-weui package.json{ "name": "jqu原创 2016-09-30 15:00:16 · 1171 阅读 · 0 评论 -
#学习笔记#(30)牛客网JS测试题21~45
21、题目描述将数组 arr 中的元素作为调用函数 fn 的参数 输入例子:argsAsArray(function (greeting, name, punctuation) {return greeting + ', ' + name + (punctuation || '!');}, ['Hello', 'Ellie', '!'])输出例子:Hello, Elli原创 2016-02-02 22:02:57 · 2580 阅读 · 2 评论 -
常用Bower指令
bower help帮助获取bower指令及信息bower search搜索插件bower home打开插件的官方主页bower install安装插件bower uninstall卸载插件bower info包的信息bower init发布插件时,初始化bower.json文件bower list列出当前目录下的所有包及依赖关系bower lookup 根据包名查询包的urlbower prun原创 2016-08-17 18:06:05 · 3354 阅读 · 0 评论 -
#学习笔记#(53)几个常用正则方法
reg.test(s) 返回true/falsereg.exec(s) 返回index,reg,inputs.search(reg) 返回indexs.match(reg) 返回index,reg,inputs.replace(reg,str) 把s中的reg替换成strs.split(reg) 以reg切割数组原创 2016-03-25 17:40:22 · 290 阅读 · 0 评论 -
#学习笔记#(54)geolocation
测试代码,浏览器基本禁用了这个功能,只有IE支持。。。实现效果如图: H5地理位置Demo 找到我 function init(){ var btnFindMe=document.getElementById('findMe'); btnFindMe.addEventListener('cl原创 2016-03-28 14:51:23 · 483 阅读 · 0 评论 -
#学习笔记#(55)sessionStorage/localStorage
session获取和写入会话存储 /* * sessionStorage.getItem('key'); 或sessionStorage.key * sessionStorage.setItem('key',value);设置参数值 * sessionStorage.removeItem('key');删除参数值 * sessionStorage.原创 2016-03-28 15:18:53 · 265 阅读 · 0 评论 -
#学习笔记#(59)从零开始学习Nodejs[1]——用Telnet连接Node TCP服务器
注:需事先安装Node,再执行以下步骤——1 打开控制面板>程序和功能>启用或关闭windows功能,勾选telnet客户端选项2 新建mynode.js文件:var net=require('net');var chatServer=net.createServer();chatServer.on('connection',function(client){ client原创 2016-04-26 18:10:21 · 1994 阅读 · 0 评论 -
#学习笔记#(60)从零开始学习Nodejs[2]——用Telnet发送数据到Node TCP服务器
var net = require('net');//1 引入net模块var chatServer = net.createServer();//创建net服务器chatServer.on('connection', function (client) {//服务器连接客户端 client.write('Hi\n'); client.on('data', function (原创 2016-04-26 18:46:41 · 811 阅读 · 0 评论 -
(61)从零开始学习Nodejs[3]——Node TCP服务器&telnet,多客户端消息传递改进
var net = require('net');//1 引入net模块var chatServer = net.createServer();//创建net服务器var clientList=[];//保存多个客户端的数组chatServer.on('connection', function (client) {//服务器连接客户端 client.name=client.remo原创 2016-04-26 19:41:09 · 1973 阅读 · 0 评论 -
#学习笔记#(63)拖拽HTML5-drag-drop座位表
td{ border: 1px solid #ccc; width:50px; height: 30px; text-align: center; } label{ width:50px; display: block;原创 2016-05-27 21:43:47 · 1488 阅读 · 0 评论 -
#学习笔记#(62)处理时间及时间格式的js代码片段
//计算从startDatexx年xx月xx日开始,到现在是第几周 function getWeek(startDate) { /*startDate:学期开始时间*/ var first_date = new Date();//保存今年第一天的日期 var first_day = new Date().getDay();//保存今年的第一天原创 2016-05-13 17:33:34 · 384 阅读 · 0 评论 -
#学习笔记#(58)中文标点符号转英文标点符号,及全角转半角js
字符转换把中文标点符号转换成英文的:转换 结果: function exchange(){ var s=document.getElementById("txt").value;//输入值 document.getElementById("oldValue").innerText=s;//原始值 var result=doc原创 2016-04-21 23:10:21 · 4497 阅读 · 0 评论 -
多维数组笛卡尔乘积算法实现思路探索
思路一: var arr1=[1,2,3],arr2=[4,5,6],arr3=[7,8]; var arrs=[arr1,arr2,arr3]; 先组合arr1 arr2两个, 再与第三个arr3组合: 1,4 1,5 1,6 2,4 2,5 2,6 得到6个结果 再将这六个结果与arr3进行两两组合 1,4,7 1,4,8 1,5,7 1,5,8 1,6,7 1原创 2016-10-19 13:19:44 · 4862 阅读 · 2 评论 -
游戏转盘html5
div+css+js 只能实现4个扇面<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>div+css+js简单的4项转盘</title> <style rel="stylesheet"> html, body { width: 100%;原创 2016-11-09 11:07:47 · 2312 阅读 · 0 评论 -
简单的浏览器打印demo(兼容chrome/IE/firefox,表现略有差异)
目前在chrome/IE11/firefox下都能运行,但效果略有差异,只有chrome有预览功能。 chrome效果: firefox效果: IE效果图: 代码:<!doctype html><html lang='en'><head> <meta charset='UTF-8'> <meta na...原创 2018-05-16 17:55:52 · 4860 阅读 · 0 评论 -
Angular管理后台项目
github地址:https://github.com/youzouzou/ngx-admin-yzz Demo 目前大致功能如下: 1. 图表 2. tab 3. 富文本 4. 上传文件 5. 图片裁剪 6. 导航栏 7. 面包屑导航 8. 联想输入 9. 单/复选框 10. tooltip 11. animation 12. validate 13. 按钮 14...原创 2018-07-09 19:07:42 · 5894 阅读 · 0 评论 -
【完整版】封装Angular5的http请求
selfHttp.service.tsimport {Injectable} from '@angular/core';import {HttpClient, HttpParams} from '@angular/common/http';@Injectable()export class selfHttp { public restServer; public http;...原创 2018-07-16 17:04:59 · 5203 阅读 · 2 评论 -
Ionic踩坑笔记(学习中。。。)
Mac:ionic start 之后一直处于Downloading状态,最后报错,找到了知乎的一个帖子 https://www.zhihu.com/question/269221532,用了这个办法解决了: 先sudo npm uninstall -g ionic 卸载, npm install -g ionic@3.9.2 换成3.9.2版本2.ionic serve 修...原创 2018-08-10 15:02:27 · 299 阅读 · 0 评论 -
AngularJS1关闭控制台打印
原问题:https://stackoverflow.com/questions/15561853/how-to-turn-on-off-log-debug-in-angularjsangular.module('app').config(function($logProvider, $provide){ $logProvider.debugEnabled(false); ...原创 2018-08-13 09:43:08 · 534 阅读 · 0 评论 -
ionic icon图片不显示问题
原因:CSP内容安全策略解决办法:在index.html里的meta元素加上img的允许格式,如下:<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-inline' *; script-src...原创 2019-07-15 15:40:39 · 1786 阅读 · 0 评论 -
Rxjs实战之combineLatest
需求背景:线上环境已有请求A,现在要添加请求B,在不影响之前A的处理逻辑下,等A和B的请求都结束后,对获取到的数据进行匹配处理。请求A和B都只执行一次。思路:根据需求背景可知,合并两个数据,且这两个数据的先后顺序不确定,但又必须等到两个数据都获取到后再执行操作,因此比较合适的有zip和combineLatest;我觉得zip合并的两个数据在逻辑上应该是像拉链一样,需要成对出现的数据(比...原创 2019-07-24 23:19:07 · 1707 阅读 · 1 评论 -
谷歌地图转百度地图
注:id:div元素的id,用于构建地图,必须在html写出,否则会报错,诸如Cannot read property ‘gc’ of undefinedtransformGoogleToBaidu(id: string, longitude: number, latitude: number) { const gpsPoint = new BMap.Point(longitude,...原创 2019-08-11 21:45:06 · 455 阅读 · 0 评论 -
保留两位小数——正则判断text,type非number
input标签中onkeyup="value=value.replace(/[^\d|^\.|^\-]+/g,'')" type="text" onkeypress="return (event.keyCode==46 || (event.keyCode&gt;=48&amp;&amp;event.keyCode&lt;=57))&qu原创 2018-05-14 18:03:20 · 684 阅读 · 0 评论 -
jquery跨域获取url链接的页面内容
参考:https://stackoverflow.com/questions/15005500/loading-cross-domain-endpoint-with-jquery-ajax<html><head> <meta charset="UTF-8"> <meta name="viewport" content="wid...原创 2018-05-05 11:08:17 · 9796 阅读 · 0 评论 -
vue+summernote富文本编辑器使用
最近项目中需要使用富文本编辑器,之前用的是vue-quill-editor,但是测试的时候发现这个编辑器会把内联的样式都清除掉,去查了一圈文档和各路网友的问答,有说这个就是quill的特性,不支持内联样式,具体原因我也没看明白,总之是改不动了,所以换了summernote。summernote官网:https://summernote.org/ 在网上找到了几篇相关的博客,结合个人使...原创 2018-05-08 21:24:17 · 13650 阅读 · 18 评论 -
微信小程序自定义底部弹出框
微信小程序开发popup原创 2016-12-22 16:34:19 · 38127 阅读 · 16 评论