SASS入门教程及用法指南

作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,不可以引用等等。面对这些问题,我们现在来引进一个SASS,简单的说,他是css的升级版,他可以自定义变量,可以有if语句,还可以嵌套等等,很神奇吧!那下面我们就来介绍这个神奇的SASS!

enter image description here

一、什么是SASS

SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。 本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了。

二、安装和使用

2.1 安装

javascript execCommand,复文本框神器

下面我们来介绍一下javascript execCommand方法,可以说javascript execCommand是复文本框必不可少的方法。今天上午的文章js复文本函数,是用自己封装的函数方法来写的,通常项目中一般不这么写,复文本加粗,倾斜,下划线,字体等等方法,大多是用document.execCommand方法。

下面对document.execCommand方法做一下简单介绍:

当document对象被转换为设计模式的时候(选中,设置contentEditable等),document对象提供了一个execCommand方法,通过给这个方法传递参数命令可以操作可编辑区域的内容。这个方法的命令大多数是对document选中区域的操作 (如bold, italics等), 也可以插入一个元素(如增加一个a链接) 或者修改一个完整行 (如缩进).。当元素被设置了contentEditable,通过执行execCommand 方法可以对当前活动元素进行很多操作。

语法

execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)

参数

String aCommandName  //命令名称
Boolean aShowDefaultUI  // 是否展示用户界面,默认为false。Mozilla没有实现
String aValueArgument  // 一些命令需要一些额外的参数值(如insertimage需要提供这个image的url)。默认为null。

命令名称介绍(第一个参数)

js复文本函数及常用的js验证

我们在做后台发布文章或者输入的时候,通常用复文本框,我前面文章总结了前端常用的复文本,但是,我们在前台用户输入的时候,通常限制复文本的输入,当然,你也可以允许用户用复文本,不过要在提交的时候或者后台对提交的内容进行过滤或者审核。

下面我们来总结一下前端js复文本常用的函数。

下面是斜体、下划线、居中、粗体,插入图片、创建工具条的函数

//斜体
function italicize(obj) {
if (document.selection && document.selection.type == "Text") {
   AddTxt="[i]"+text+"[/i]";
   AddText(obj,AddTxt);
} else {
   txt=prompt('文字将变斜体','文字');
   if (txt!=null) {
    AddTxt="[i]"+txt+"[/i]";
    AddText(obj,AddTxt);
   }
}
}
//下划线
function underline(obj) {
    if (document.selection && document.selection.type == "Text") {
   AddTxt="[u]"+text+"[/u]";
   AddText(obj,AddTxt);
} else {
   txt=prompt('下划线文字','文字');
   if (txt!=null) {
    AddTxt="[u]"+txt+"[/u]";
    AddText(obj,AddTxt);
   }
}
}
//居中
function center(obj) {
   if (document.selection && document.selection.type == "Text") {
   AddTxt="[align=center]"+text+"[/align]";
   AddText(obj,AddTxt);
} else {
   txt2=prompt('对齐样式\n输入 ’center’ 表示居中, ’left’ 表示左对齐, ’right’ 表示右对齐.',"center");
   while ((txt2!="") && (txt2!="center") && (txt2!="left") && (txt2!="right") && (txt2!=null)) {
    txt2=prompt('错误!\n类型只能输入 ’center’ 、 ’left’ 或者 ’right’.',"");
   }
   txt=prompt('要对齐的文本','文字');
   if (txt!=null) {
    AddTxt="[align="+txt2+"]"+txt+"[/align]";
    AddText(obj,AddTxt);
   }
}
}
//粗体
function bold(obj) {
if (document.selection && document.selection.type == "Text") {
   AddTxt="[b]"+text+"[/b]";
   AddText(obj,AddTxt);
} else {
   txt=prompt('文字将被变粗.','文字');
   if (txt!=null) {
    AddTxt="[b]"+txt+"[/b]";
    AddText(obj,AddTxt);
   }
}
}
//插入图片
function insimg(obj){
if (document.selection && document.selection.type == "Text") {
   AddTxt="[img]"+text+"[/img]";
   AddText(obj,AddTxt);
} else {
   txt=prompt('请输入图片完整URL地址:','http://');
   if (txt!=null) {
    AddTxt="[img]"+txt+"[/img]";
    AddText(obj,AddTxt);
   }
}
}

javascript时间戳函数-时间戳总结

javascript时间戳经常用到,现在总结一下。

一、时间戳函数

<script>   
function getLocalTime(nS) {   
   return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');   
}   
alert(getLocalTime(1293072805));   
</script> 

也可以用如下,想取几位就几位,注意,空格也算!

<script>   
function getLocalTime(nS) {   
    return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,14)}   
alert(getLocalTime(1293072805));   
</script>   

如果想弹出:2014-08-20 10:00:00这个格式的也好办

<script>   
function getLocalTime(nS) {   
   return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");    
}   
alert(getLocalTime(1177824835));   
</script>

另外,也可以这么写:

function   formatDate(now)   {   
          var   year=now.getYear();   
          var   month=now.getMonth()+1;   
          var   date=now.getDate();   
          var   hour=now.getHours();   
          var   minute=now.getMinutes();   
          var   second=now.getSeconds();   
          return   year+"-"+month+"-"+date+"   "+hour+":"+minute+":"+second;   
          }   

          var   d=new   Date(1230999938);   
          alert(formatDate(d));

二、知识普及

Ecshop解决与jquery冲突问题

易造价商城后台是用Ecshop开发的,但是易造价前台中您看不出ecshop的任何端倪。对于Ecshop,我一开始也是小白,近期才少有深入了解。但是我同事是ECSHOP的大神,他的博客中有不少关于ecshop的文章,鉴于他的博客,我对ecshop相关问题也写一下,以便后来只用!

切入正题,jquery是我们PC端开发必不可少的工具,但是jquery和ECSHOP有一定的兼容问题,给我们带来了不少的不便,下面这篇文章就叫你如何解决ecshop和jquery的冲突问题:

大体思路是屏蔽ECshop扩展的toJSONString方法,用别的函数代替。

1.首先复制一份 transport.js 改名为 transport.org.js 提供给后台使用

2.屏蔽掉transport.js里的toJSON功能 行数大概有497-737行之间

//修改352行为:
legalParams = 'JSON=' + $.toJSON(params);
//修改408行为:
result = $.evalJSON(result);