分类 前端技术 下的文章
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生js拖拽效果</title>
</head>
<body>
<div id="box"></div>
<script type="text- 阅读剩余部分 -
call和applyobj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);
两者作用一致,都是把obj(即this)绑定到thisObj,这时候thisObj具备了obj的属性和方法。或者说thisObj『继承』了obj的属性和方法。绑定后会立即执行函数。唯一区别是apply接受的是数组参数,call接受的是连续参数。function add(j, k){
return j+k;
}
function sub(j, k){
return j-k;
}
我们在控制台- 阅读剩余部分 -
(function (factory) {
if (typeof define === "function" && define.amd) {
define([ "jquery" ], factory);
} else {
factory(jQuery);
}
}(function ($) {
$.fn.slides = function (options) {
var settings = $.extend({
- 阅读剩余部分 -
因为嫌console.log()的写法太繁琐,想将其简写为log()。 我最初是这样写的: var log = console.log;
log(..);
结果输出为:TypeError: Illegal invocation
谷歌一番之后在Stack Overflow上找到这个答案:var log = console.log.bind(console);
看到这个答案后,突然眼前一亮,因为我恰好刚刚在《You Don't Know JS》系列中读到过相关内容。虽然SO上只有答案没有解释,但是读过的内容瞬间在大脑中盘旋,帮我理解了这种写法的原理。刚刚学过的内容派上了用场,- 阅读剩余部分 -
jspm init初始化会报错,研究了一下午,因为原来一直好好的,错误信息:err TypeError: First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object.
如图: 研究了一下午啊,发现原来是后期本地安装git以及用git创建了项目造成了在git时需要配置用户名密码才能正常下载数据:配置命令:jspm registry config github
然后在jspm init 就正常了
http://photoswipe.com/documentation/api.html所有的方法和这个网页上列出的属性是公开的。如果你想看看例子什么API可以做的,拿在默认PhotoSwipe UI源看看。您可以初始化,例如在得到PhotoSwipe实例对象:var photoswipeInstance = new PhotoSwipe( /* ... */ );
Methodsvar pswp = new PhotoSwipe( /* ... */ );
// Initialize and open gallery
// (you can bind events be- 阅读剩余部分 -
配置选项是在键 - 值对添加作为参数传递给PhotoSwipe构造,例如通过:var options = {
index: 3,
escKey: false,
// ui option
timeToIdle: 4000
};
var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
gallery.init();
// Note that options object is cloned during the initiali- 阅读剩余部分 -
入门您应知道之前先做起事情:PhotoSwipe不是一个简单的jQuery插件,至少基本的JavaScript知识才能安装。PhotoSwipe需要预定义的图像尺寸(更多关于这一点)。如果您在非回应网站上使用PhotoSwipe - 控制将在移动进行换算(整页缩放)。所以你需要实现自定义控件(在右上角例如单个大关闭按钮)。文档中所有的代码是纯香草JS和支持IE8及以上。如果您的网站或应用程序使用了一些JavaScript框架(像jQuery或MooTools的),或者你并不需要支持旧的浏览器 - 随意简化代码。避免对移动服务的大图像(大于2000x1500px),因为它们会- 阅读剩余部分 -
转自http://blog.csdn.net/xiaoyu411502/article/details/467023911、引子以前介绍过 Sublime text 3 系列的文章,着重介绍了 Sublime text 3 如何下载、安装、插件、配置等内容。Sublime text 3的轻量和富扩展,为前端开发带来了很多的便捷,加快了代码的书写速度,尤其是配上 emmet,那书写速度堪称光速。现在,要隆重介绍的前端开发工具webstorm,为什么说它是前端开发工具,而不是前端开发编辑器呢?它具备的功能,不只只是编辑器这么简单,还包含了任务管理、历史管理、版本管理、工程管理、- 阅读剩余部分 -
重要提示:2.0不向后兼容以前的版本 这个插件可以很方便的对json操作,var thing = { plugin: 'jquery-json', version: 2.4 };//json对象
var encoded = $.toJSON( thing );
//将thing转为字符串,字符串格式如下
// '{"plugin":"jquery-json","version":2.4}'
var name = $.evalJSON( encoded ).plugin;
//将上面的字符串encod- 阅读剩余部分 -
省时的浏览器同步测试工具Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。1. 安装 Node.jsBrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js2. 安装 BrowserSync可以选择从Node.js的包管理(NPM)库中 安装BrowserSync。打开一个终端窗口,运行以下命令:npm install -g browser-sync
当然您- 阅读剩余部分 -
实现思路很简单,汉字有21个声母:b, p, m, f, d, t, n, l, g, k, h, j, q, x, zh, ch, sh, r, z, c, s有韵母24个,其中单韵母有6个:a, o, e, i, u, v, 复韵母有18个:ai , ei, ui , ao, ou, iu , ie, ve, er, an , en , in, un , vn , ang, eng, ing , ong假设声母和韵母两两组合的话,会有24X21=504种组合,实际情况是有些组合是没有意义的,比如zv, zie, zve等,去除这部分后,还剩余401种;这就- 阅读剩余部分 -
在chrome下:input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
在Firefox下:input[type="number"] {
-moz-appearance: textfield;
}如果感觉还不放心,吧下面的这段加上input[type="numbe- 阅读剩余部分 -
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'style-loader' instead of 'style',
see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
Webpack新版本要求配置module- 阅读剩余部分 -
CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少。同一个项目,为了实现iPhone和iPad横板与竖板的风格,让我还是头疼了一翻。一开始按照CSS3 Media Queries模板中的介绍来运用,虽然帮我解决了iPad的横板与竖板的风格渲染问题,但在iPhone4上还是存在问题的。后来结过网上的查找,总算是问题解决了,下面就来看看问题是如何解决的。在具体开始之前,先来看看他的源码:<!DOCTYPE HTML>
<html lang="en-US">
<he- 阅读剩余部分 -
那么今天我们就针对上面的问题,一起来探讨一下CSS3 Media Queries在各种不同设备(桌面,手机,笔记本,ios等)下的模板制作。那么Media Queries是如何工作的?那么有关于他的工作原理大家要是感兴趣的话可以参考《CSS3 Media Queries》一文,里面已经做过详细的介绍,这里就不在进行过多的阐述。CSS3 Media Queries模板CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足,如果满足就调用相应的样式。打个比方来说,如果你的Web页面在- 阅读剩余部分 -
Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="al- 阅读剩余部分 -
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快。如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧。本文导航:gulp的安装开始使用gulpgulp的API介绍一些常用的gulp插件1、gulp的安装首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp:npm install -g gulp
全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次。把- 阅读剩余部分 -
var fastAJax = function(args) {
var xmlhttp = null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp == null) {
args.handler(- 阅读剩余部分 -
请输入密码访问
/**
* Created by liweiliang on 2017/7/18 QQ:406320591.
*/
function tow(n) {
return n >= 0 && n < 10 ? '0' + n : '' + n;
}
function countDown(){
var end = +new Date("2017-07-25 00:00:00"),//获取指定日期对象
start = +new Date(),//获取现在日期对象
second = Math.floor((end - start)- 阅读剩余部分 -
请输入密码访问
将下面代码添加到 typecho 头部模版的开头即可实现简单的 JSON 输出,实现 API 效果。API 的使用大家就自己发挥吧。头部模版一般位于usr/themes/default/header.php
可以查找到:<!DOCTYPE html>
在这一行的前面添加下面的代码:<?php
if (stripos($this->request->getRequestUri(), 'json')) {
$arr = array();
while ($this->next()) {
$a = array('t- 阅读剩余部分 -
A4纸的尺寸是210mm297mm,也就是21.0cm29.7cm,而1英寸=2.54cm,如果屏幕DPI分辨率为72像素/英寸,换算一下:相当于1cm可呈现 (72px/2.54cm) = 28.34px下面是一些常用分辨率下A4纸在屏幕上的像素尺寸:分辨率是72像素/英寸时,A4纸的尺寸的图像的像素是595×842;分辨率是96像素/英寸时,A4纸的尺寸的图像的像素是794×1123;(默认)分辨率是120像素/英寸时,A4纸的尺寸的图像的像素是1487×2105;分辨率是150像素/英寸时,A4纸的尺寸的图像的像素是1240×1754;分辨率是300像素/英寸时,A4- 阅读剩余部分 -
监听屏幕的改变:<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=devic- 阅读剩余部分 -
1、关于call()和apply()的疑点:apply和call的区别在哪里什么情况下用apply,什么情况下用callapply的其他巧妙用法(一般在什么情况下可以使用apply)2、语法和参数分析:apply和call都能继承另外一个对象的方法和属性; Function.apply(obj,args)方法能接收两个参数obj:这个对象将代替Function类里this对象args:这个是数组,它将作为参数传给Function(args-->arguments)call:和apply的意思一样,只不过是参数列表不一样.Function.call(obj,[param- 阅读剩余部分 -
关闭当前页面,相信不少人在开发中都遇到过这个需求,但面对这么多的浏览器,要做到js的兼容还需要做特殊的处理。关于这方面网上有很多的资料,但大多都是复制粘贴的,没有达到兼容的效果,或者是效果不好。//FF中需要修改配置window.close方法才能有作用,为了不需要用户去手动修改,所以用一个空白页面显示并且让后退按钮失效
//Opera浏览器旧版本(小于等于12.16版本)内核是Presto,window.close方法有作用,但页面不是关闭只是跳转到空白页面,后退按钮有效,也需要特殊处理
var userAgent = navigator.userAgent;
if (u- 阅读剩余部分 -
JS实现局部打印和预览:第一种:JS 实现简单的页面局部打印function preview(oper)
{
if (oper < 10)...{
bdhtml=window.document.body.innerHTML;//获取当前页的html代码
sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
- 阅读剩余部分 -
/*
_ooOoo_
o8888888o
88" . "88
(| -_- |)
O\ = /O
____/`---'\____
.' \\| |// `.
/ \\||| : |||// \
/ _||||| -:- |||||- \
- 阅读剩余部分 -
/**
*
* ━━━━━━神兽出没━━━━━━
* ┏┓ ┏┓
* ┏┛┻━━━┛┻┓
* ┃ ┃
* ┃ ━ ┃
* ┃ ┳┛ ┗┳ ┃
* ┃ ┃
* ┃ ┻ ┃
* ┃ ┃
* ┗━┓ ┏━┛Code is far away from bug with the animal protecting
* ┃ ┃ 神兽保佑
* ┃ ┃ 代码无bug
* ┃ ┗━━━┓
* ┃ ┣- 阅读剩余部分 -
- « 前一页
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 后一页 »