saber酱的抱枕

Here We Are Again (《喜剧之王》插曲)

@saber1分钟前

02/20
16:45
学习

SuperSlide的一些坑

刚才用SuperSlide做一个banner图切换的效果。SuperSlide的demo里的图片都是固定宽度(单位px)的,然而我的banner图是按百分比的(100%)。原图宽1920px,用SuperSlide的banner图效果的话,图片在小于1920px的屏幕里就会被压扁。

原因在于SuperSlide是用img标签加载的图片,那我们把图片改成背景图并居中就行了。

SuperSlide中banner图的代码:

<li><a href="" target="_blank"><img src="bimages/banner1.jpg"></a></li>

修改后的代码:

<li><a href="" target="_blank"><img style="background: url(images/banner1.jpg) center top no-repeat;"></a></li>

SuperSlide的一些坑

@saber8小时前

02/20
08:59
学习

url参数中特殊字符的转义处理

如果url中有特殊字符符号,可能会导致url不能被正确识别。

我们可以在传递参数前将url编码来解决这个问题。不过需要注意的是,有些字符在url中有独特的作用的(例如#表示锚点位置,&表示连接多个参数),所以JavaScript的encodeURI函数(意思是编码url)是不能编码这些有单独意义的字符的的。需要把它们也转码的话需要用encodeURIComponent函数(意思是编码url组件)。

下面直接列出一下有特殊含义的字符及其编码后的结果:

+    URL 中+号表示空格                                %2B
空格 URL中的空格可以用+号或者编码             %20
/   分隔目录和子目录                                     %2F
?    分隔实际的URL和参数                              %3
%    指定特殊字符                                         %25
#    表示书签                                                %23
&    URL 中指定的参数间的分隔符                  %26
=    URL 中指定参数的值                                %3D

url参数中特殊字符的转义处理

@saber3天前

02/17
08:00
学习

移动设备触摸手势库——Hammer.JS

一直以来,JavaScript对于鼠标事件和触摸事件提供的支持都比较初级,此问题在pc端不是很明显,但是移动端的触摸手势就比较多样化了,为此我们有必要使用js库来帮助我们处理触摸事件。

Hammer.JS是一款轻量级的移动设备触摸手势库,不依赖其他js库,兼容性好(支持WP),支持常见的点击、拖动、缩放、旋转等触摸事件,也可支持多点触控。

Hammer.JS支持的六大事件:

移动设备触摸手势库——hammer.js

Hammer.JS支持在pc端浏览器上用鼠标模拟触摸事件,这样我们开发时可以在pc上进行测试,极大提高了开发效率(看它官网的描述,似乎是可以在pc上模拟出全部的6种动作。不过缩放和旋转我试不出来,按下shift模拟双指操作也没反应①)。

简单的使用示例:

<div id="test"></div>
<script type="text/javascript">
    //创建一个新的hammer对象并且在初始化时指定要处理的dom元素
    var hammertime = new Hammer(document.getElementById("test"));
    //为该dom元素指定触屏移动事件
     hammertime.on("pan", function (ev) {
         //控制台输出
         console.log(ev);
     });
</script>

参考资料


① 有资料说,pinch 和rotate 默认情况下是禁用的,因为他们会使元件闭锁(这里貌似是机翻),如有需要可以通过下面的方法调用:

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

在现在的Hammer.JS中不知还是否需要如此处理。有空了我试试吧。

移动设备触摸手势库——Hammer.JS

@saber4天前

02/16
17:17
学习

用PHP做一个设置网站副标题的接口

用PHP做一个设置网站副标题的接口 WordPress php 副标题 JavaScript aja mysql 数据库

WordPress设置网站副标题需要到后台的设置项里设置,操作起来太繁琐,于是我用php做了个设置网站副标题的接口。这个没什么技术含量,主要是熟悉下php对mysql数据库的基本操作流程。

首先是到数据库里找到网站副标题的字段:

用PHP做一个设置网站副标题的接口 WordPress php 副标题 JavaScript aja mysql 数据库

找到之后写出用于修改它的sql语句,如下:

UPDATE wp_options SET option_value = '大好き' WHERE option_name = 'blogdescription'

接下来做一个html文件和一个php文件,用html文件给php文件发送要设置的副标题,php接到请求后执行数据库操作。

功能做好之后,把html传到网站上,并保存成书签。以后想修改修改副标题只要打开这个书签,输入文字就可以了。
Read More →

用PHP做一个设置网站副标题的接口

@saber2周前

02/9
16:19
学习

封装document.querySelector和document.querySelectorAll方法

JavaScript原生的document.querySelector和document.querySelectorAll方法很好用,不过依旧摆脱不了原生方法名太长的麻烦。所以我们可以封装下,如:

function $(selector) {
  return document.querySelector(selector)
}

function $$(selector) {
  return Array.prototype.slice.call(document.querySelectorAll(selector))
}

这里用了$、$$作为方法名,分别对document.querySelector方法和document.querySelectorAll方法进行封装。

$方法返回单个元素(第一个符合的元素),$$以数组形式返回所有符合的元素(即使符合的元素只有一个)。

这样我们就可以方便的使用封装的方法来选择DOM元素了:

$("#div .class img")
$$("#div .class img")

不过如果$、$$的定义冲突了可能会出问题,所以如果页面上引用jQuery了的话,可以换个方法名。

ps:至于为什么方法名要用$和$$呢,并不是模仿jQuery,而是模仿chrome(至于chrome是不是模仿jQuery的方法名那我就不清楚了)。

chrome浏览器控制台里内置了封装好的$、$$方法,可以直接使用。(当然,如果$、$$的定义被页面上的代码覆盖了就不行了)

如图:

封装document.querySelector和document.querySelectorAll方法

封装document.querySelector和document.querySelectorAll方法

封装document.querySelector和document.querySelectorAll方法

@saber4周前

01/22
15:31
学习

动态设置rem使页面自适应缩放

在页面布局中,通过动态设置rem并使用rem设置宽高、大小,使得页面元素的宽高可以随设备宽度而变化,保持布局的一致性。

我们先在头部加入meta信息:

<meta name="viewport" content="width=device-width, initial-scale=1" />

然后使用JavaScript动态设置rem:

(function (doc, win) {
	var docEl = doc.documentElement,
	  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	  recalc = function () {
	      var clientWidth = docEl.clientWidth;
	      if (!clientWidth) return;
	      docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
	  };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

公式是这样的:

100 * ( 浏览器页面宽度 / 设计稿宽度 )

第一部分:100是什么

这个100其实是我们使用的rem基础值,等于设置html标签的font-size=100px,这样,1rem也就是100px。

当1rem为100px时,页面上所有元素设置宽高大小时都除以100,就得出了该元素的rem值。比如设计稿上300px宽的元素,用rem设置就是width=3rem。

1rem并不是非要设置为100px,我们也可以设置成别的,比如设置1rem=50px,那么300px的元素是6rem。我们一般取1rem=100px是为了方便计算。如果实际项目中计算页面元素的rem值时不是按1rem=100px来算的,则需要修改公式里的100为实际使用的1rem值。

第二部分:浏览器页面宽度 / 设计稿宽度 是什么

这个可以理解为页面在设备上的缩放比例。比如iphone 6 plus的设备宽度是414px,我们的设计稿是640px。

414/640=0.646875,得出我们的页面在iphone 6 plus上应该显示为设计稿大小的0.646875倍。

最后我们把rem的基础值与页面缩放比例相乘,得出实际使用的rem基础值。rem的基础值变了,页面上所有元素的宽高、大小也会随之改变,这样就达到了页面自适应的效果。
Read More →

动态设置rem使页面自适应缩放

@saber1月前

01/9
08:00
学习

使用js的insertAdjacentHTML方法插入元素

以往我们插入、移动DOM元素经常是使用appendChild和insertBefore方法。

appendChild:在父级元素内追加新元素。
insertBefore:在父级元素内的某个元素之前插入新元素。

但是这两个方法的参数只能接收元素对象,不能使用字符形式的html代码,而且它们插入元素的位置也不够灵活。我们可以使用insertAdjacentHTML方法来更方便的插入元素。

insertAdjacentHTML可以将字符串形式的html代码(需要能解析为DOM元素)解析为一个节点,并将其追加到指定元素的指定位置。

insertAdjacentHTML方法的语法如下:

element.insertAdjacentHTML(position, text);

position参数有以下四个值(都是字符串形式):

beforebegin:在元素的开始位置之前插入。
beforeend:在元素的结束位置之前插入。
afterbegin:在元素的开始位置之后插入。
afterend:在元素的结束位置之后插入。

text参数则是字符串形式的html代码。

根据position参数,我们可以将新元素插入到到指定元素的四个位置:

使用js的insertAdjacentHTML方法插入元素

示例:

<div id="a">
	<div></div>
</div>
<script type="text/javascript" defer>
	var a=document.querySelector("#a");
	a.insertAdjacentHTML("afterbegin","<a href='' >xxx</a");
</script>

结果如下:

<div id="a">
	<a href="">xxx</a>
	<div></div>
</div>

insertAdjacentHTML方法的兼容性表现良好,主流浏览器均已支持。我们也可以如下语句来检查浏览器是否支持方法:

document.documentElement.insertAdjacentHTML

此外,由于insertAdjacentHTML是根据位置插入元素的,因此它不能把新元素插入到img、input等单标签元素里(想这么做的人才是有毛病吧)。

相关文档:《https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML》


ps:与insertAdjacentHTML系列“同一系列”的还有insertAdjacentElement方法和insertAdjacentText方法。

insertAdjacentElement方法除了第二个参数是DOM节点(不能是字符串形式)外和insertAdjacentHTML方法都一样。

insertAdjacentText方法则只接收字符串格式的参数,并输出为字符串。其他地方也和insertAdjacentHTML方法一样。

使用js的insertAdjacentHTML方法插入元素

@saber1月前

01/8
12:45
学习

bilibili上使用的一个下雪效果

今天fgo开了圣诞活动,bilibili上的活动页面上下着雪,于是我把代码扒了下来。

这个下雪的js依赖jquery,实际使用中感觉效果一般←_←

<body style="background: #000;">
    <canvas class="snow-canvas" speed="1" interaction="true" size="8" count="40" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" opacity="0.00001" wind-power="2" image="false"></canvas>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
    <script src="http://static.biligame.net/fgo/event_santa/pc/js/snow.js?v=d659f803.js"></script>
    <script>
    	$(".snow-canvas").snow();
    </script>
    <style>
    	.snow-canvas { position: fixed; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
    </style>
</body>

demo如下:

效果不是很好……不过如果像活动页面那样,有背景图片什么的,瑕疵应该不会很明显。

bilibili上使用的一个下雪效果

@saber2月前

01/3
08:00
学习

JavaScript实现全国三级城市联动select选择

JavaScript实现全国三级城市联动select选择

刚才在懒人之家找了一个JavaScript做的全国省市县三级联动的下拉选择插件,记录一下。

下载压缩包

这个js文件的日期是2014年,使用方法如下:

<select id="s_province" name="s_province"></select>  
<select id="s_city" name="s_city" ></select>  
<select id="s_county" name="s_county"></select>
<script src="form/area.js" type="text/javascript"></script>
<script type="text/javascript">_init_area();</script>

JavaScript实现全国三级城市联动select选择

@saber2月前

01/2
08:00
学习

使用JotForm在线创建表单

使用JotForm在线创建表单

创建表单一直是令我头疼的问题。对于复杂些的表单,使用可视化工具来制作明显更有效率。

JotForm就是一个在线创建表单的网站,使用拖拽操作,所见即所得。我们只需要免费创建一个账号,就可以使用JotForm来创建表单了。

JotForm不使用table标签做的布局,而是使用更加简洁的div、ul、li等标签,还会自动加上label。

设计界面如下:

使用JotForm在线创建表单

同时每个控件都可以点击右上角的齿轮图标进入进阶设置:

使用JotForm在线创建表单

进阶设置是很有用的,我们可以在进阶设置里设置输入框长度、预设文字、添加辅助说明、设置复选框列数等。

虽然在线设计的表单在布局上可能难以完美实现我们的需求,不过它帮我们完成了最繁琐的部分,我们接下来可以再按照自己的需求调整它,工作量仍然小了许多。
Read More →

使用JotForm在线创建表单