- 博客(45)
- 收藏
- 关注
RSS订阅原创 关于textarea的相关实践
日前在web移动端书写一个高宽自适应的文本输入框，并且具有跟随手指移动而移动。问题：宽度自适应实现不了。上代码：相关css为:display: block;max-width:12rem;max-height: 12.5rem;text-align: left;background-color: inherit;font-size: 0.85rem;
2016-11-26 14:37:44
211
原创 React当中css-loader使用
为了防止css重命名，在react当中可以使用css-loader来加前缀，有效防止该重命名，具体操作如下：1、在packjson中devDependencies：加上配置"css-loader": "^0.23.1",，2、然后在webpack.config.js的loaders的配置中，加上这句：{test: /\.css$/, loader: 'style!css?modules
2016-11-11 15:19:45
1392
原创 React小应用之脸部测试
用React重构了之前做的一个微信页面，页面效果大致如下： 1、main入口的路由： 首页自己写的图片上传，按钮变色效果用state来管理 第二页跑马灯效果： 尾页就是展示结果了，静态代码不展示了。
2016-09-23 09:38:42
392
原创 基于zepto写的几个常用小东西（toast、加载器、上拉加载、下拉刷新）
基于zepto的自定义toast、load加载效果//显示一个消息，会在2秒钟后自动消失//toast参数可选，三种是文字、时间、以及class的类$.toast = function(msg, duration, extraclass) {var $toast = $('' + msg + '').appendTo(document.body);var aa=$toast.o
2016-09-22 14:17:25
3164
原创 记录书写微信页面踩的几个坑，下不再犯
1、overflow引起的坑： 布局时设置body的overflow:auto;最外层的div为overflow:auto;内层的div为overflow:auto;此时会产生IOS快速滑屏正常，安卓快速滑屏会白屏，内容渐显；这个是由内外产生的滚动条导致的，切不可如此写css; 2、input的focus问题： 当设置input为readonly时，focus不起作用；
2016-09-21 16:30:43
442
原创 React+React-router+webpack 一个微信答题SPA小应用
应用介绍： 总共三个页面，起始提示页，答题页，以及分数页； 说明： 用路由链接3个页面，提示页到答题页直接使用Link跳转，答题页跳转到分数页需要携带分数及答对的题目数，因此使用： hashHistory.push({ pathname: ‘/Score’,query:{score:score,number:number}}); 将参数放到URL后面，到了分数页再获取渲染： let
2016-09-07 16:48:38
460
原创 React+React-router+webpack重构一个微信小应用（预测宝宝2）（篇幅过长，分2次）
根据效果图，项目做了以下组件层级：把页面分成3个，作为路由切换，app/component中是被三个页面引入的小组件；上代码详细说明：1、index.html:<!DOCTYPE html>htmllang="en">head>metacharset="UTF-8">metaname="viewport"content="widt
2016-09-06 18:13:07
576
原创 React+React-router+webpack重构一个微信小应用（预测宝宝1）（篇幅过长，分2次）
标注：React初步接触，暂时写出一个简单的spa小应用。 开发环境安装： 1、先安装node.js，然后全局安装 Webpack：npm install -g webpack； 2、然后在目录文件创建package.json; 3、使用命令行npm init，根据指示写，里面相关配置： { “name”: “baby”, “version”: “1.0.0”, “des
2016-09-06 18:02:50
475
原创 2个微信小应用（zepto做，日后用React重构这个SPA）
微信小应用，开发时长2天上线发出去，快速应用，因此用了zepto来方便JS的编写。 项目一：车标测试（点击答案时JS延迟500ms+css过渡背景的效果）; 项目二：宝宝测试(原生JS的图片上传功能) 项目对自身带来的益处： 代码熟练; input[type=”file”]的详细研究; 快速开发时心态的调整（要求和设计稿一致，催得紧带来的心理压
2016-09-02 18:18:56
340
原创 记录css自定义滚动条遇到的兼容性问题
CSS3自定义滚动条样式 -webkit-scrollbar相关参数：::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）::-w
2016-09-02 11:19:41
1339
原创 应用在移动端网页的图片上传功能（纯手写）
文件上传触发 相应的JS(为了方便 用JQ写法)： //上传文件函数 function onChange(){ //获取上传的图片的相应数据 var formData=(“#upload”)[0].files[0]; //本地相对路径，用来判断格式 var value=(“#upload”)[0].files[0]; //本地相
2016-09-02 11:15:37
429
原创 Grunt打包压缩JS CSS
前端优化其中之一就是在代码写好之后合并压缩文件再交付后台，对于没有应用打包工具的项目，我使用了Grunt来打包压缩相应的JS css文件。小白的使用方法：1、安装Grunt使用NPM来安装Grunt:（使用命令行）npm install -g grunt-cli2、创建2个配置文件 package.json(npm install 下载相关的包) Gruntfile(启动打包相关事
2016-09-02 10:46:11
355
原创 像素级实现设计稿笔记
1、精确第一步，精准的使用 Photoshop 切图拿到设计稿一般是 PSD 格式的，我们首先会观察一下设计稿，思考一下对应的 HTML 结构和 CSS 设计模式，然后开始根据需求进行切图。Photoshop 内置的自动切图脚本。位于“文件”－》“脚本”－》“将图层导出文件”。意思就是将你的图层分层分别导出为文件，而且还支持剪裁图片和格式选择等等。切图流程：从 PSD 中找
2016-08-16 10:09:15
543
原创 编写前自动化部署的相关准备
在开发前，决定使用Grunt来做自动化部署工作：首先，CSS等采用sass编译，首先安装Node.js（新版的自动包含了npm）、Ruby;接着安装sass，再接着构建Grount：## 构建工具Grunt (如果没有安装nodejs/npm先安装nodejs/npm|ruby也得装，编译sass需要)npm install -g grunt-clinpm install gr
2016-07-22 14:40:18
297
原创 全选按钮
点击全选，其他都选中： //全选按钮 $(".checkSettingAll").on("click", function () { //找到相应的checkbox var inputs = $(this).parents(".orderForm").find("input[name='settingCheck']"); //遍历让他选中
2016-04-28 16:57:54
590
原创 商品列表页面的某些方法处理
说明： 商品列表在页面进入时只加载一次商品数据：function LoadGoods() { $.ajax({ url: '/AgentShopAPP/GoodsShow/Query?date='+new Date().getMilliseconds(), type: 'post', dataType: 'json', asy
2016-04-28 15:56:59
713
原创 五子棋
五子棋的html:<!doctype html><html lang="en"><head><meta charset="utf-8"><title>五子棋</title><link rel="stylesheet" type="text/css" href="game.css"></head><body><canvas id="chess" width="450px;" heig
2016-04-28 14:05:06
406
1
原创 CSS3时钟
<!doctype html><html><head><meta charset="utf-8"><title>时钟</title><meta name="keywords" content=""/><meta name="description" content=""/><style>body{}ul{list-style: none;}h1{text-align: cente
2016-04-28 14:04:01
318
原创 初识服务端的安装
首先下载了一个Apache24，在电脑的高级系统设置的环境设置中的PATH新增上安装的这个目录的bin文件下；接着下载PHP7版本：
2016-04-27 15:26:59
57
转载 转载大神文章：前端变化
今天在最新一期的JavaScript Weekly Issue 274: March 11, 2016里发现了这篇文章：State of the Art JavaScript in 2016 ??” JavaScript and Opinions，特别有感触。感叹前端发展真的一天一个模样。从几年前火过的backbone，到从来没有火起来的polymer，我都基本上一个一个的用过来了。这篇文章中
2016-04-26 15:58:20
191
原创 absolute绝对定位的深入解读
1、absolute与float一样具有包裹性、破坏性； 2、absolute不一定非与relative绑定在一起；二者是分离的、对立的；不是兄弟元素；absolute越独立越强大； 3、独立的absolute可以摆脱overlow的限制，无论是滚动还是隐藏； 4、absolute：脱离文档流；去浮动（定位生效时浮动会失效）、定位跟随（用了定位后，原来是什么位置，还是什么位置；）， 5、无依
2016-04-26 15:57:10
1079
原创 MVC项目中与后台协调写出的关于表格数据读取、修改、删除、提交、新增数据的JS事件
在项目开发中，给后台处理相关数据交互（提交、编辑、新增、删除）时，数据这块都要用一个包裹，同时再第一行加一个，确保在点击事件发生时为这个form赋值一个ID,不然后台无法操作。在全局JS中定义自定义方法：//定义时间转换函数String.prototype.formatSerizedDateTime = function () { var dt = new Date(Number(this.rep
2016-04-26 15:54:45
955
原创 多个列表直接在一个页面内的切换，简短的JS代码如下
function listTab(e) { var currentTarget=currentTarget = (e.currentTarget); //取到当前点击的元素 (“.customerManagePage”).hide();//设置全部隐藏var(“.customerManagePage”).hide(); //设置全部隐藏 var page = (“#
2016-04-26 15:54:12
825
翻译 JQuery-Ajax
a, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readySt
2016-04-26 15:53:08
289
翻译 JS冒泡事件
JavaSciprt事件中有两个很重要的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添
2016-04-26 15:52:20
516
原创 文本内容溢出显示省略号，鼠标移上去会显示全部内容
例子：width:150px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 定宽、多出内容隐藏、设置省略号、强制文本在一行内显示。默认使用H5新属性 title=“全部内容” 即可。
2016-04-26 15:51:52
10237
翻译 H5新标签 sessionStorage 以及trigger 标签
在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。 在 HTML5 中，数据不是由每
2016-04-26 15:51:27
765
原创 select下拉框同时具有输入及信息匹配功能
例子：用jquery.combo 插件来完成 源代码如下： 引用jquery.combo 的jquery.combo。select.js和css 预约员工：
2016-04-26 15:50:56
806
翻译 CSS规范
CSS文件的分类和引用顺序 通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。我们按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用（按需求决定是否添加版本号）。公共型样式：包括了以下几个部分：“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长样式”、“网站通用布局”、“通用模块和其扩展
2016-04-26 15:50:15
199
翻译 CSS3动画
CSS3 @keyframes 规则 如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。 Chr
2016-04-26 15:48:44
252
原创 案例模态框的异步加载
在页面上给模态框一个 ID 新建模态框的页面HTML。 在JS里定义URL（例）：viewCardDetail: “/OperationTransaction/MemberCard/_ViewCard”。 设定点击事件： (eleIds.cardsTable).on(“click”, eleClsName.viewCardDetail, function () { //点击事件
2016-04-26 15:48:11
978
翻译 JavaScript parseFloat() 函数
JavaScript parseFloat() 函数 JavaScript 全局对象 定义和用法 parseFloat() 函数可解析一个字符串，并返回一个浮点数。 该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。 语法 parseFloat(string) 参数 描述 string 必需。要被解
2016-04-26 15:47:16
528
原创 position定位解读
定位共4种：position: relative absolute fixed static relative相对定位是以自我为起始的定位； absolute绝对定位是往上从父元素上找寻是否父元素存在position的三种（ relative absolute fixed）属性，若存在，则以这个父元素未标准来定位，若不存在，则会一直找到html元素为止，一般我们不会出现直到html元素都
2016-04-26 15:46:38
424
原创 APP或移动端当中h5写的页面，其中的边框写成0.5rem的效果的CSS如下
可以当作一种控件来对待 /* 1px for retina */ .ui-border-t{border-top:1px solid #e0e0e0}.ui-border-b{border-bottom:1px solid #e0e0e0}.ui-border-tb{border-top:#e0e0e0 1px solid;border-bottom:#e0e0e0 1px solid;back
2016-04-26 15:45:58
1186
原创 商品详情页当中选择规格以及实时地计算价格
//定义一种方法 计算选中的价格和积分的总数 function setSumPrice(){ var wrap=wrap = (“.m-cataloguesCart”), _totalPrice = 0, _totalScore = 0; .each(.each(wrap,function(){ var _this = (t
2016-04-26 15:44:52
958
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人