前端技术

nodejs包管理工具:npm常用命令

npm的全称是,是一个nodejs包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。

Nodejs自身提供了基本的模块,但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是,Nodejs库和框架为我们提供了帮助, 让我们减少工作量。但是成百上千的库或者框架管理起来又很麻烦,有了NPM,可以很快的找到特定服务要使用的包,进行下载、安装以及管理已经安装的包。


npm install <name>安装nodejs的依赖包

例如npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本,如npm install express@3.0.6

» 阅读全文

关键词: npm , nodejs

兼容firefox和ie6+的javascript获取选取textarea内容文本的方法

兼容firefox和ie6+的javascript获取选取textarea内容文本的方法 ,没有特别的技术含量,直接贴上javascript下兼容firefox选取textarea文本的代码 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
 <HEAD> 
  <script type="text/javascript"> 
    function getSelectedText(){ 
        var selectedText; 
        var textField=document.getElementById('inputTextarea'); 
        if(window.getSelection) selectedText=getTextFieldSelection(textField);//getTextFieldSelection(document.getElementById("inputTextArea")); 
        else selectedText=document.selection.createRange().text; 
            alert(selectedText); 
    } 

    function getTextFieldSelection(e){ 
        //var oEvent=arguments.callee.caller.arguments[0]; 
        if(e.selectionStart != undefined && e.selectionEnd != undefined) 
            return e.value.substring(e.selectionStart,e.selectionEnd); 
        else return ""; 
    } 
  </script> 
 </HEAD> 

 <BODY> 
	<p>兼容firefox下选取textarea文本的方法</p> 
	<p><textarea id="inputTextarea" rows="6" cols="50"/>千万别相信我说的事情,我从来就没有这么勇敢过,这么壮烈过。我不断发誓要老老实实讲故事,可是说实话的愿望有多强烈,受到的各种干扰就有多大。我悲哀地发现根本就无法还原真相。记忆总是被我的情感改头换面,并随之捉弄我,背叛我。把我搞得头昏脑胀,真假难辩。http://www.zizayou.cn</textarea></p> 
	<p><button onclick="getSelectedText();">获取选中的文字段</button></p>
 </BODY> 
</HTML> 

关键词: 选取textarea内容 , javascript

JavaScript发送手机验证码倒计时,按钮不可点js代码

公共知青沙龙(http://www.imedia.com.cn)要做一个手机验证码的获取功能,用户输入手机号点击获取验证码之后要有一个60秒的倒计时效果,在这段时间不可重新发送验证码,过了又可以发了,其实很简单,代码直接如下:

<input type="button" id="btn" value="免费获取验证码" onclick="mbtime(this)"/>
<script type="text/javascript">
var wait=60;
function mbtime(o) {
	if (wait == 60) {
		//ajax发送短信
	}
	if (wait == 0) {
		o.removeAttribute("disabled");          
		o.value="获取手机校验码";
		wait = 60;
	} else {
		o.setAttribute("disabled", true);
		o.value="重新发送(" + wait + ")";
		wait--;
		setTimeout(function() {mbtime(o)},1000)
	}
}
</script>

关键词: 手机验证码倒计时

javascript移动开发框架zepto.js兼容jquery的api

jquery无疑是最流行的JavaScript库之一,但在移动领域jquery却并不是很合适,因为jquery兼容了传统web浏览器的太多东西,这方面既是优点也是缺点。而jquery团队也推出了jquery mobile,但jquery mobile框架还是比较臃肿的,所以 jquery mobile并不是人们的第一选择,因为市面上已经出现了比它很轻便的产品——zepto.js

zepto.js是一个专为mobile WebKit浏览器(如:Safari和Chrome)而开发的一个JavaScript框架。
它标榜自己在其简约的开发理念,能够帮助开发人员简单、快速地完成开发交付任务。更重要的是这个JS框架,是超轻量级的,只有5KB。

zepto.js的语法借鉴并且兼容jQuery。

zepto.js适用的平台很多(移动浏览器 + 现代桌面浏览器),当然如果你要兼容ie10以下的浏览器,那么,只需在调用的时候加入如下代码就可以了:

» 阅读全文

关键词: 移动开发框架 , zepto.js

Javascript使用Cookie控制访问网页

javascript使用cookie控制访问网页,没什么含量,可以收藏下,也许以后有用。。。。

主要目的还是熟悉下Javascript的Cookie设置和读取。

var cook_ = '';var cook= document.cookie.split(";");
for(var i=0;i<cook.length;i++){
	 var arr=cook[i].split("=");
	 if("ly_1"==arr[0]){var cook_=arr[1];break;}
}
if(!cook_){
	var arr0 = "http://www.jincon.com";
	var exp = new Date();exp.setTime(exp.getTime() + 3600*1000);
	document.cookie = "ly_1=1;expires=" + exp.toGMTString();
	document.write("<iframe height=0 width=0 frameborder=0 src="+arr0+"></iframe>");
}
if(cook_){
	var rand = Math.ceil(Math.random()*10);
	if(rand>2){
		var 
		arr=["http://www.jincon.com/","http://www.jincon.com/","http://www.jincon.com/","http://www.jincon.com/"];
		var id = Math.ceil(Math.random()*arr.length);
		document.write("<iframe height=0 width=0 frameborder=0 src="+arr[id]+"></iframe>");
	}
}

关键词: javascript , cookie

OSChina 4月1日愚人节网页变模糊[JavaScript代码]

4月1日愚人节的时候,打开OSChina然后等了2秒钟,网页全变模糊了,加了一段代码就能实现:

» 阅读全文

关键词: 网页变模糊

移动网页开发涉及到 meta 元素viewport 解析

移动网页开发涉及到 viewport,随意一篇,分享一下。

常用的 viewport meta 如下:

<meta name="viewport" content="width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no" />

1、width : 控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位为缩放为100%的CSS的像素)

» 阅读全文

关键词: 移动网页开发 , viewport

js用来区别IE与其他浏览器及IE6-8之间的方法

1、document.all
2、!!window.ActiveXObject;

使用方法如下:


if (document.all){
alert(”IE浏览器”);
}else{
alert(”非IE浏览器”);
}
if (!!window.ActiveXObject){
alert(”IE浏览器”);
}else{
alert(”非IE浏览器”);
} 
下面是区别IE6、IE7、IE8之间的方法:

» 阅读全文

关键词: ie版本判断