- 博客(86)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Highcharts图表导出excel文件
关于Highcharts的详细情况，在另一篇文章中有介绍。这篇主要介绍如何利用插件下载excel文件。插件：script src="http://code.highcharts.com/highcharts.js">script>script src="http://code.highcharts.com/modules/exporting.js">script>script sr
2017-02-18 11:57:45
6825
原创 Highcharts简介
Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。
2017-02-18 11:41:30
1288
原创 沿着弧线拖拽滑动动画
因为在项目中遇到一个问题，即需要在移动端页面上滑动滑块，实现在弧形的线条上调节数值的大小。一时找不到合适的的办法，终于发现一个jQuery的插件可以完美的解决这个问题，真是帮了我的大忙。roundslider是一个jQuery插件，允许用户通过拖动滑块手柄来选择值或值的范围。这是他的官网截图：弧形的控件样式很多，也可以根据自己的实际需求更改样式。当然他也支持事件的处
2017-02-17 17:47:46
2214
原创 CSS设置元素背景透明，其内的文字不透明
具体代码如下：背景设置为透明，其中的文字不透明*{ padding: 0; margin: 0;}body{ padding: 50px; background: url(img/bg.png) 0 0 repeat;}.demo{ padding: 25px; background-color: rgba(0,0,0,0.5);/* I
2017-01-22 15:18:50
958
转载 使用jquery判断一个元素是否含有一个指定的类（class）
在jQuery中可以使用2种方法来判断一个元素是否包含一个确定的类(class)。两种方法有着相同的功能。2种方法如下：1. is(‘.classname’)2. hasClass(‘classname’)以下是一个div元素是否包含一个redColor的例子：1. 使用is(‘.classname’)的方法$('di
2017-01-13 16:04:47
8248
转载 js/jquery控制页面滑动到底部时自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多 ，有手机的相信都见过这样的效果：进入qq空间，向下拉动空间，到底部时，会动态加载剩余的说说或者是日志 。他的实现思路和js控制动态加载的代码：下面的代码主要是控制滚动条下拉时的加载事件的，在下面代码说明处，写上你的操作即可，无论是加
2017-01-06 11:05:49
935
转载 jquery中attr和prop的区别
jquery中attr和prop的区别在高版本的jQuery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方
2017-01-05 14:21:34
260
转载 CSS渐变
一．线性渐变HTML5 中 CSS3 背景渐变功能，主要有两种渐变方式：线性渐变和径向（放射性）渐变。 CSS3 提供了 linear-gradient 属性实现背景颜色的渐变功能。在以前，这种效果必须采用图片才能实现的。首先，我们先看一下它的样式表，如下：属性值linear-gradient(方位, 起始色, 末尾色)方位可
2017-01-05 12:40:17
735
转载 jquery 对 checkbox 的 全选、反选、全不选等操作
jQuery对checkbox的一些操作，比如选中，全选，反选，全不选等，通常我们会用到attr来改变checkbox的checked属性，然而通过实际测试，会出现各种小问题，例如第一次成功，第二次就不成功，调试也调不出来，说白了就是第二次的是attr方法未起到效果。经过查阅文档资料，最终确定使用prop 方法能彻底解决此问题，代码如下：function countCheckbox() {//
2017-01-05 11:44:30
401
原创 SVG格式
什么是SVG格式？ SVG可以算是目前比较火的图像文件格式了，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。
2016-12-17 15:20:34
888
转载 原生js代码实现图片放大境效果
采用了两张图片给两张图片设定相应的尺寸，最后显示在不同位置，最终实现放大效果。第一种是仿照淘宝购物页面的一个放大镜效果，当鼠标移动到商品图片上时，图片上会出现一个矩形区域，而这个区域就是你要放大的区域，然后商品图片的右侧会出现一个放大后的商品图片。这种放大方式只需要你计算好放大的比例，然后通过修改放大区域的scrollLeft和scrollTop值实现相应的放大效果。html>
2016-11-02 16:14:57
2667
原创 前台转换unix时间戳
前台在获取后台时间时，直接获取会显示一串数字；这是需要进行转换显示。将时间戳转换成日期格式：// 简单的一句代码var date = new Date(时间戳); //获取一个时间对象 ，必须乘以1000，否则出现NaN 注意：如果是uinx时间戳记得乘于1000。比如php函数time()获得的时间戳就要乘于1000/*----------下面是获取时间日期的方法，需要什
2016-08-03 17:50:49
888
转载 CSS3 3D旋转透视
立方体 3D 旋转3D 透视照片墙跳跃的音符可能上面的效果对精通 CSS3 的而言小菜一碟，写本文的目的也是我自己学习积累的一个过程，感兴趣的就可以一起往下看啦。其实 CSS3 效果真的很强大，上面的效果都是纯 CSS 实现，个人感觉越是深入 CSS 的学习，越是觉得自己不懂 CSS
2016-07-18 10:10:56
1129
转载 HTML，CSS，font-family：中文字体的英文名称 （宋体 微软雅黑）
宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 DFKai-SB仿宋 FangSong楷体 KaiTi仿宋_GB2312 FangSong_GB2312楷体_GB2312 KaiTi_GB2312
2016-06-14 15:45:18
624
转载 HTTP 头部信息和错误码汇总详细解释
前后端分离的请求测试，遇到了一个406错误， 无法接受，是HTTP头部信息里的Accept:application/json 这个Accept 导致的， 后端设置了只允许application/json 这种形式，so前端模拟请求的时候，也要和后端沟通好，然后发送请求参数通常HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息。客户端向服务器发送一个请求，请求头包含
2016-06-06 15:58:53
785
转载 HTML5-炫丽的时钟效果Canvas绘图与动画
HTML5-炫丽的时钟效果Canvas绘图与动画 .linux903,.linux902 {display:none!important;display:none} var WINDOW_WIDTH=1024; var WINDOW_HEIGHT=600;
2016-05-28 16:20:28
511
转载 JavaScript正则表达式大全（过滤Emoji的最佳实践）
一、校验数字的表达式 1 数字：^[0-9]*$ 2 n位的数字：^\d{n}$ 3 至少n位的数字：^\d{n,}$ 4 m-n位的数字：^\d{m,n}$ 5 零和非零开头的数字：^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$ 7 带1-2位小数的正数或负数：^(\-)?\d+(\
2016-05-28 16:05:07
11869
2
转载 图片放大镜
放大镜练习 * { margin: 0px; padding: 0px; } #small { width: 400px; height: 400px;
2016-05-28 16:02:01
404
转载 Html5用户注册自动校验
/*-------------------------------------------------------------------------- jq-idealforms 2.1 * Author: Cedric Ruiz * License: GPL or MIT * Demo: http://elclanrs.github.com/jq-idealfo
2016-05-28 15:53:42
544
转载 jQuery动画
一、显示隐藏$("#show").click(function () { $("#box").show();});$("#hide").click(function () { $("#box").hide();});可以设置匀速运动时间$("#show").click(function () { $("#box").show(1000);});$("
2016-05-09 15:19:49
267
原创 AJAX学习笔记二
JSON基本概念JSON: javascript对象表示法（javascriptObject Notation）JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于阅读和编写，同时也易于机器解析和生成。JSON是独立于语言的，也就是说不管什么语言，都可以解析json，只需要按照json的规则来就行JSON与XML比较Json的长度和xml格式比起来很短
2016-05-04 10:50:15
286
原创 AJAX学习笔记一
XMLHttpRequest核心对象web服务器进行数据的异步交换运用JavaScript操作DOM，实现动态局部刷新 一个完整的HTTP请求过程，7步：1.建立TCP连接2.web浏览器向web服务器发送请求命令3.web浏览器发送请求头信息4.web服务器应答5.web服务器发送应答头信息6.web服务器向浏览器发送数据7.web服务器关闭TCP连接
2016-05-03 18:02:34
389
转载 CSS多列布局
多列布局适合纯文字版式设计，如报纸内和杂志类网页布局，不适合做网页结构布局。灵活使用多列布局特性，可以实现在多列中显示文字和图片，从而节省大量的网页空间。如果网页上的文字很长，多列布局特性就能够发挥它的用武之地。 兼容性参考：http://www.w3.org/TR/css3-multicol/columns属性–定义多列布局 columns是多列布局特性的基本属性，类似边框
2016-04-29 14:25:57
712
原创 React简介
Why React？React是Facebook开发的一款JS库。在React的官网上通过《Why did we build React?》了解到以下四点：1、React不是一个MVC框架React是一个构造可组合式用户界面的库。它鼓励创建可重用的UI组件显示会随着时间而改变的数据。2、React不使用模板传统上，web应用UI使用模板或者html指令构造。这些模板规定一套完整
2016-04-28 18:21:11
7042
原创 LESS简介
LESS简介什么是less？CSS并不能称之为一门真正的编程语言，一般称为层叠样式表。因为CSS中充斥着大量重复的定义，不但编写的时候难组织、代码量大，而且随着以后规模扩大二次开发的问题更明显，其中最明显的就是无法定义变量供我们重复使用以及命名空间的问题。less是使用JavaScript编写的一种CSS预处理语言。less将CSS赋予了动态语言的特性，如变量，继承，运算，函数。les
2016-04-28 16:08:47
504
转载 CSS编码规范
1 前言CSS 作为网页样式的描述语言，在百度一直有着广泛的应用。本文档的目标是使 CSS 代码风格保持一致，容易被理解和被维护。虽然本文档是针对 CSS 设计的，但是在使用各种 CSS 的预编译器(如 less、sass、stylus 等)时，适用的部分也应尽量遵循本文档的约定。2 代码风格2.1 文件[建议] CSS 文件使用无 BOM 的 UTF-8 编码
2016-04-27 17:11:54
383
转载 HTML编码规范
1 前言HTML 作为描述网页结构的超文本标记语言，在百度一直有着广泛的应用。本文档的目标是使 HTML 代码风格保持一致，容易被理解和被维护。2 代码风格2.1 缩进与换行[强制] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。示例： first second[建议]
2016-04-27 16:51:31
350
转载 Canvas绘制圆角矩形
Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实我们可以将圆角矩形分为四段,可以通过使用arcTo来实现。 我们假设起点为x,y.绘制的矩形宽高为w,h.圆角的半径为r;所以将起点设置在(x+r,y)处，然后acrTo(x+w,y,x+w,y+h,r),对于终点,其实只要y值大于绿色点的都是可以的(这部分在绘制曲线部分已经详述)。此处我们将终点设为(x+w,y
2016-04-27 14:32:04
1397
原创 HTML5 PC端框架
HTML5 PC端框架 1. BootstrapBootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，Bootstrap的源代码是使用less编写的；基于jQuery框架开发，并在jQuer
2016-04-27 14:20:10
21458
转载 CSS自动换行、强制不换行、强制断行、超出显示省略号
P标签是默认是自动换行的，因此设置好宽度之后，能够较好的实现效果，但是最近的项目中发现，使用ajax加载数据之后，p标签内的内容没有换行，导致布局错乱，于是尝试着使用换行样式，虽然解决了问题，但是并没有发现本质原因，本质在于，我当时获取的数据是一长串的数字，浏览器应该是对数字和英文单词处理方式相近，不会截断。 先给出各种方式，再具体介绍每一个属性。 强制不换行 p { white-sp
2016-04-25 15:54:18
734
转载 CSS3D变换/立方体旋转效果
3D变换基于几个比较重要的属性，perspective,translateZ,preserve-3d; transform-style(preserve-3d)建立3D空间 perspective视镜 perspective-origin视镜基点 x:left/center/right/length/% y:top/center/bottom/length/% transf
2016-04-25 12:19:35
1443
转载 前端，我为什么不要你！
我转载这篇博客，是不想自己将来在面试的时候得到这些评价；以此勉励自己，多学多想，不断进步。今年一月份以前端主管的身份进入现在的公司，到现在为止陆陆续续面试了十几个应聘者，惊讶地发现前端这个细分岗位的市场行情竟如此奇怪，一方面是各种公司争相聘请，导致价格高的浮躁；一方面是从业者大多经历尚浅，浅到没什么技术积累，没什么项目经验，更可怕的是没什么进取心。这里总结一下，自勉。 一年
2016-02-16 09:35:38
418
转载 HTML5中meta属性的使用
meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。 1、声明文档使用的字符编码meta charset='utf-8'>12、声明文档的兼容模式meta http-equiv="X-UA-Compatible" con
2016-01-19 17:31:49
520
原创 Chart.js 中文文档（整理）
Chart.js 中文文档（整理）Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。步骤：1、在HTML中引入Chart.js文件2、在body内使用canvas，设置ID以及相应样式3、获取canvas的ID、设置画笔 var myChart = document.getElementById("myChart"); if (
2016-01-18 16:58:52
14588
2
原创 HTML5新格式
在之前的HTML页面中，大家基本上都是用了Div+CSS的布局方式。而搜索引擎去抓取页面的内容的时候，它只能猜测你的某个Div内的内容是文章内容容器，或者是导航模块的容器，或者是作者介绍的容器等等。也就是说整个HTML文档结构定义不清晰，HTML5中为了解决这个问题，专门添加了：页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。标签，定义文档中的节。比如章节、页眉、页脚或文档中的其它部
2016-01-14 17:10:43
392
转载 表单标签动画（CSS）
搭建根基我们同样使用了haml来简化html书写。#container -(1..15).each do %div.row %label %input{:type=>"text"} %span姓名 %label %input{:type=>"text"} %span性别 %l
2016-01-13 14:28:33
675
转载 HTML5调用手机摄像头
> html> head> meta charset="UTF-8"> title>Insert title heretitle> head> body> video id="video" autoplay=""style='width:640px;height:480px'>video> div>button id='picture' style=
2016-01-12 17:57:12
545
转载 canvas圆周动画
圆周运动JavaScript code?123456789101112131415161718192021222324252627
2016-01-12 12:51:02
671
转载 Bootstrap图片轮播
Bootstrap提供了carousel插件，实现图片轮播非常方便。代码html lang="en">head> meta charset="UTF-8"> title>Documenttitle> link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="sty
2016-01-12 10:05:31
666
转载 Bootstrap自适应导航栏
导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。默认的导航栏1、向 标签添加 class .navbar、.navbar-default。2、向上面的元素添加 role="navigation"，有助于增加可访问性。3、向 元素添加一个标题 cla
2016-01-11 17:31:11
46253
5
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人