分享
是一种美德

JS中常见问题

mrnaas阅读(66)

//s金额   n保留几位小数 默认保留两位小数 s代表金额,n代表保留的小数位数
function formatMoney(s, n) {
            n = n > 0 && n <= 20 ? n : 2;
            s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
            var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1];
            t = "";
            for (i = 0; i < l.length; i++) {
                t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
            }
            return t.split("").reverse().join("") + "." + r;
}
//小数点往后移动两位[实际上是*100,但是例如:1.0011*100在JS中结果不对。]
function numberChange(i){
    if(i==0){
        return 0;
    }
    var str = i.toString(),len = 0,arr=[],newStr='';
    for(var i = 0;i<str.length;i++){
        if(str[i]=='.'){
            len = i;
        }
        arr.push(str[i])
    }
    arr[len] = arr[len+1];
    arr[len+1] = arr[len+2];
    arr[len+2] = '.';
    for(var i = 0;i<arr.length;i++){
        newStr+=arr[i];
    }
    return Number(newStr);
}
//1。获得屏幕的分辨率: 
screen.width 
screen.height 
//2。获得窗口大小: 
document.body.clientWidth 
document.body.clientHeight 
//3。获得窗口大小(包含Border、Scroll等元素) 
document.body.offsetWidth 
document.body.offsetHeight  
document.documentElement.clientHeight  //获取当前浏览器窗口可工作高度
//鼠标相对于网页的坐标
function mousePos(e){
     var x,y;
     var e = e||window.event;
     return {
          x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
          y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop
     };
};
~function (e){
     var e = e||window.event;
     alert(‘X:'+mousePos(e).x+’|||Y:'+mousePos(e).y);
}()

js 中的奇葩问题

1、eg:000101 = 65;

000101为获取到的字符串类型,通过click事件传递,000101变为了65;

解决方法:jq中直接运行的代码中获取到的000101为字符串类型,但是后边人为运行此代码相关的代码时获取到的000101就为number类型。由此可见在JS中数字前面加0代表此数字为八进制。可以将000101作为属性传递,或者将000101通过代码直接执行时获取到的是字符串的机制来经行判断转换然后再传递,从而在事件中再去获取判断。

2、执行函数以及引用函数同时出现;

eg:fun(successCallBack(data),failCallBack);successCallBack和failCallBack都是函数,调用fun函数返回成功时,必然走成功,没有问题,但是返回失败时,必走成功,失败同时也会掉,2个同时执行,所以调用un函数时success 和 fail 应该都为执行函数或者引用函数,这样就不会出现返回失败走成功回调的情况。

java获取当天,前天,明天,本周,本月,本年的开始日期时间和结束日期时间

mrnaas阅读(90)

package demoone;
import java.sql.Timestamp;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.GregorianCalendar;
import java.util.List;
public class DateUtils {
    //获取当天的开始时间
    public static java.util.Date getDayBegin() {
        Calendar cal = new GregorianCalendar();
        cal.set(Calendar.HOUR_OF_DAY, 0);
        cal.set(Calendar.MINUTE, 0);
        cal.set(Calendar.SECOND, 0);
        cal.set(Calendar.MILLISECOND, 0);
        return cal.getTime();
    }
    //获取当天的结束时间
    public static java.util.Date getDayEnd() {
        Calendar cal = new GregorianCalendar();
        cal.set(Calendar.HOUR_OF_DAY, 23);
        cal.set(Calendar.MINUTE, 59);
        cal.set(Calendar.SECOND, 59);
        return cal.getTime();
    }
    //获取昨天的开始时间
    public static Date getBeginDayOfYesterday() {
        Calendar cal = new GregorianCalendar();
        cal.setTime(getDayBegin());
        cal.add(Calendar.DAY_OF_MONTH, -1);
        return cal.getTime();
    }
    //获取昨天的结束时间
    public static Date getEndDayOfYesterDay() {
        Calendar cal = new GregorianCalendar();
        cal.setTime(getDayEnd());
        cal.add(Calendar.DAY_OF_MONTH, -1);
        return cal.getTime();
    }
    //获取明天的开始时间
    public static Date getBeginDayOfTomorrow() {
        Calendar cal = new GregorianCalendar();
        cal.setTime(getDayBegin());
        cal.add(Calendar.DAY_OF_MONTH, 1);
        return cal.getTime();
    }
    //获取明天的结束时间
    public static Date getEndDayOfTomorrow() {
        Calendar cal = new GregorianCalendar();
        cal.setTime(getDayEnd());
        cal.add(Calendar.DAY_OF_MONTH, 1);
        return cal.getTime();
    }
    //获取本周的开始时间
    public static Date getBeginDayOfWeek() {
        Date date = new Date();
        if (date == null) {
            return null;
        }
        Calendar cal = Calendar.getInstance();
        cal.setTime(date);
        int dayofweek = cal.get(Calendar.DAY_OF_WEEK);
        if (dayofweek == 1) {
            dayofweek += 7;
        }
        cal.add(Calendar.DATE, 2 - dayofweek);
        return getDayStartTime(cal.getTime());
    }
    //获取本周的结束时间
    public static Date getEndDayOfWeek(){
        Calendar cal = Calendar.getInstance();
        cal.setTime(getBeginDayOfWeek());  
        cal.add(Calendar.DAY_OF_WEEK, 6); 
        Date weekEndSta = cal.getTime();
        return getDayEndTime(weekEndSta);
    }
    //获取本月的开始时间
     public static Date getBeginDayOfMonth() {
            Calendar calendar = Calendar.getInstance();
            calendar.set(getNowYear(), getNowMonth() - 1, 1);
            return getDayStartTime(calendar.getTime());
        }
    //获取本月的结束时间
     public static Date getEndDayOfMonth() {
            Calendar calendar = Calendar.getInstance();
            calendar.set(getNowYear(), getNowMonth() - 1, 1);
            int day = calendar.getActualMaximum(5);
            calendar.set(getNowYear(), getNowMonth() - 1, day);
            return getDayEndTime(calendar.getTime());
        }
     //获取本年的开始时间
     public static java.util.Date getBeginDayOfYear() {
            Calendar cal = Calendar.getInstance();
            cal.set(Calendar.YEAR, getNowYear());
            // cal.set
            cal.set(Calendar.MONTH, Calendar.JANUARY);
            cal.set(Calendar.DATE, 1);
            return getDayStartTime(cal.getTime());
        }
     //获取本年的结束时间
     public static java.util.Date getEndDayOfYear() {
            Calendar cal = Calendar.getInstance();
            cal.set(Calendar.YEAR, getNowYear());
            cal.set(Calendar.MONTH, Calendar.DECEMBER);
            cal.set(Calendar.DATE, 31);
            return getDayEndTime(cal.getTime());
        }
    //获取某个日期的开始时间
    public static Timestamp getDayStartTime(Date d) {
        Calendar calendar = Calendar.getInstance();
        if(null != d) calendar.setTime(d);
        calendar.set(calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH),    calendar.get(Calendar.DAY_OF_MONTH), 0, 0, 0);
        calendar.set(Calendar.MILLISECOND, 0);
        return new Timestamp(calendar.getTimeInMillis());
    }
    //获取某个日期的结束时间
    public static Timestamp getDayEndTime(Date d) {
        Calendar calendar = Calendar.getInstance();
        if(null != d) calendar.setTime(d);
        calendar.set(calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH),    calendar.get(Calendar.DAY_OF_MONTH), 23, 59, 59);
        calendar.set(Calendar.MILLISECOND, 999);
        return new Timestamp(calendar.getTimeInMillis());
    }
    //获取今年是哪一年
     public static Integer getNowYear() {
             Date date = new Date();
            GregorianCalendar gc = (GregorianCalendar) Calendar.getInstance();
            gc.setTime(date);
            return Integer.valueOf(gc.get(1));
        }
     //获取本月是哪一月
     public static int getNowMonth() {
             Date date = new Date();
            GregorianCalendar gc = (GregorianCalendar) Calendar.getInstance();
            gc.setTime(date);
            return gc.get(2) + 1;
        }
     //两个日期相减得到的天数
     public static int getDiffDays(Date beginDate, Date endDate) {
            if (beginDate == null || endDate == null) {
                throw new IllegalArgumentException("getDiffDays param is null!");
            }
            long diff = (endDate.getTime() - beginDate.getTime())
                    / (1000 * 60 * 60 * 24);
            int days = new Long(diff).intValue();
            return days;
        }
    //两个日期相减得到的毫秒数
     public static long dateDiff(Date beginDate, Date endDate) {
            long date1ms = beginDate.getTime();
            long date2ms = endDate.getTime();
            return date2ms - date1ms;
        }
     //获取两个日期中的最大日期
     public static Date max(Date beginDate, Date endDate) {
            if (beginDate == null) {
                return endDate;
            }
            if (endDate == null) {
                return beginDate;
            }
            if (beginDate.after(endDate)) {
                return beginDate;
            }
            return endDate;
        }
     //获取两个日期中的最小日期
     public static Date min(Date beginDate, Date endDate) {
            if (beginDate == null) {
                return endDate;
            }
            if (endDate == null) {
                return beginDate;
            }
            if (beginDate.after(endDate)) {
                return endDate;
            }
            return beginDate;
        }
     //返回某月该季度的第一个月
     public static Date getFirstSeasonDate(Date date) {
             final int[] SEASON = { 1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4 };
            Calendar cal = Calendar.getInstance();
            cal.setTime(date);
            int sean = SEASON[cal.get(Calendar.MONTH)];
            cal.set(Calendar.MONTH, sean * 3 - 3);
            return cal.getTime();
        }
     //返回某个日期下几天的日期
     public static Date getNextDay(Date date, int i) {
            Calendar cal = new GregorianCalendar();
            cal.setTime(date);
            cal.set(Calendar.DATE, cal.get(Calendar.DATE) + i);
            return cal.getTime();
        }
     //返回某个日期前几天的日期
     public static Date getFrontDay(Date date, int i) {
            Calendar cal = new GregorianCalendar();
            cal.setTime(date);
            cal.set(Calendar.DATE, cal.get(Calendar.DATE) - i);
            return cal.getTime();
        }
     //获取某年某月到某年某月按天的切片日期集合(间隔天数的日期集合)
     public static List getTimeList(int beginYear, int beginMonth, int endYear,
                int endMonth, int k) {
            List list = new ArrayList();
            if (beginYear == endYear) {
                for (int j = beginMonth; j <= endMonth; j++) {
                    list.add(getTimeList(beginYear, j, k));
                }
            } else {
                {
                    for (int j = beginMonth; j < 12; j++) {
                        list.add(getTimeList(beginYear, j, k));
                    }
                    for (int i = beginYear + 1; i < endYear; i++) {
                        for (int j = 0; j < 12; j++) {
                            list.add(getTimeList(i, j, k));
                        }
                    }
                    for (int j = 0; j <= endMonth; j++) {
                        list.add(getTimeList(endYear, j, k));
                    }
                }
            }
            return list;
        }
     //获取某年某月按天切片日期集合(某个月间隔多少天的日期集合)
     public static List getTimeList(int beginYear, int beginMonth, int k) {
            List list = new ArrayList();
            Calendar begincal = new GregorianCalendar(beginYear, beginMonth, 1);
            int max = begincal.getActualMaximum(Calendar.DATE);
            for (int i = 1; i < max; i = i + k) {
                list.add(begincal.getTime());
                begincal.add(Calendar.DATE, k);
            }
            begincal = new GregorianCalendar(beginYear, beginMonth, max);
            list.add(begincal.getTime());
            return list;
        }
}
//获取某年某月的第一天日期
 public static Date getStartMonthDate(int year, int month) {
        Calendar calendar = Calendar.getInstance();
        calendar.set(year, month - 1, 1);
        return calendar.getTime();
    }
//获取某年某月的最后一天日期
   public static Date getEndMonthDate(int year, int month) {
        Calendar calendar = Calendar.getInstance();
        calendar.set(year, month - 1, 1);
        int day = calendar.getActualMaximum(5);
        calendar.set(year, month - 1, day);
        return calendar.getTime();
    }

jQuery移除或禁用html元素的点击事件

mrnaas阅读(119)

移除或禁用html元素的点击事件可以通过css实现也可以通过js或jQuery实现。

一、CSS方法

.disabled { pointer-events: none; }

二、jQuery方法

方法一

$(this).click(function (event) {  
event.preventDefault();  
}

方法二

$('a').live('click', function(event) {  
       alert("抱歉,已停用!");    
      event.preventDefault();     
    });

注:此方法中的live亦可以为on,bind等方法

方法三

$('.disableCss').removeAttr('onclick');//去掉标签中的onclick事件

通过removeAttr方法来控制html标签的属性已达到启用或禁用事件。另,使用这种方式也可以控制其他事件或其他效果。

方法四

$('#button').attr('disabled',"true");//添加disabled属性  
$('#button').removeAttr("disabled"); //移除disabled属性

注:和方法三是一样的,不过disabled属性一般用在类型为button或submit的input上

阻止子元素的点击事件

mrnaas阅读(74)

问题描述:
今天在调试页面的时候遇到一个奇怪的现象,在一个父元素上面定义了一个点击事件,在父元素下面是一个一个的li标签,这上面没有任何点击事件。现象是当点击其中一个li标签时会发生一些动作。

这个问题困惑了我好久,我对代码翻了好几遍,最后才确定是,点击子元素时也将会触发父元素的事件。当时我把这种现象是在父元素上定义点击事件时,实际上是在这个区域中都定义了点击事件,所以当点击子元素时,实际上也是在点击父元素。

但是更科学的解释是:如果在点击子元素时,如果子元素中没有点击事件,那么该点击事件将自动冒泡到父元素,直到能找到一个可以处理点击事件的函数。

那这种解释可以带来的好处是,可以有方法来屏蔽这种现象,那就是阻止点击事件的冒泡。对于jQuery而言,就是stopPropagation().对于下面的代码而言,大家可以尝试下,如果没有stopPropagation和有stopPropagation之间的差别。

代码如下:

<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf8">
<link rel="stylesheet" type="text/css" href="">
<script src="./jQuery/jquery-2.1.4.js"></script>
<script type="text/javascript">
    $(function() {
        $("#maindiv").click(function(event) {
            if($(this).children('ul').css("display") == "none")
                $(this).children('ul').css("display","block");
            else
                $(this).children('ul').css('display',"none");
        }); 
        //阻止向上冒泡
        $("#maindiv > ul").click(function(event) {
            event.stopPropagation();
        });
    });
</script>
<title>测试如何屏蔽子元素的事件</title>
<body>
    <div id="maindiv">
        <button>click me</button>
        <ul style="display:none">
            <li>first</li>
            <li>second</li>
            <li>third</li>
        </ul>
    </div>
</body>
</html>

js 字符串转换成数字的三种方法

mrnaas阅读(114)

在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形式的.在网上找了一下js字符串转数字的文章,这个比较全

方法主要有三种

转换函数、强制类型转换、利用js变量弱类型转换。

1. 转换函数:

js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的都是NaN(Not a Number)。

一些示例如下:

parseInt("1234blue");   //returns   1234
parseInt("0xA");   //returns   10
parseInt("22.5");   //returns   22
parseInt("blue");   //returns   NaN

parseInt()方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的,示例如下:

parseInt("AF",   16);   //returns   175
parseInt("10",   2);   //returns   2
parseInt("10",   8);   //returns   8
parseInt("10",   10);   //returns   10

parseFloat()方法与parseInt()方法的处理方式相似。
使用parseFloat()方法的另一不同之处在于,字符串必须以十进制形式表示浮点数,parseFloat()没有基模式。

下面是使用parseFloat()方法的示例:

parseFloat("1234blue");   //returns   1234.0
parseFloat("0xA");   //returns   NaN
parseFloat("22.5");   //returns   22.5
parseFloat("22.34.5");   //returns   22.34
parseFloat("0908");   //returns   908
parseFloat("blue");   //returns   NaN

2. 强制类型转换

还可使用强制类型转换(type casting)处理转换值的类型。使用强制类型转换可以访问特定的值,即使它是另一种类型的。
ECMAScript中可用的3种强制类型转换如下:
Boolean(value)——把给定的值转换成Boolean型;
Number(value)——把给定的值转换成数字(可以是整数或浮点数);
String(value)——把给定的值转换成字符串。
用这三个函数之一转换值,将创建一个新值,存放由原始值直接转换成的值。这会造成意想不到的后果。
当要转换的值是至少有一个字符的字符串、非0数字或对象(下一节将讨论这一点)时,Boolean()函数将返回true。如果该值是空字符串、数字0、undefined或null,它将返回false。

可以用下面的代码段测试Boolean型的强制类型转换。

Boolean("");   //false   –   empty   string
Boolean("hi");   //true   –   non-empty   string
Boolean(100);   //true   –   non-zero   number
Boolean(null);   //false   -   null
Boolean(0);   //false   -   zero
Boolean(new   Object());   //true   –   object

Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式相似,只是它转换的是整个值,而不是部分值。示例如下:

用  法                   结  果
Number(false)                  0
Number(true)                   1
Number(undefined)              NaN
Number(null)                   0
Number( "5.5 ")                5.5
Number( "56 ")                 56
Number( "5.6.7 ")              NaN
Number(new   Object())         NaN
Number(100)                    100

最后一种强制类型转换方法String()是最简单的,示例如下:

var   s1   =   String(null);   //"null"
var   oNull   =   null;
var   s2   =   oNull.toString();   //won't   work,   causes   an   error

3. 利用js变量弱类型转换

举个小例子,一看,就会明白了。

<script>
var   str= '012.345 ';
var   x   =   str-0;
x   =   x*1;
</script>

上例利用了js的弱类型的特点,只进行了算术运算,实现了字符串到数字的类型转换,不过这个方法还是不推荐的

自适应屏幕轮播图详解

mrnaas阅读(150)

相应的工具:

  • bootstrap
  • jQuery

材料:

  • 4张640×340的图片
  • 4张2000×410内容相同的图片

原理及实现方法:

  1. 当屏幕宽度大于等于768px时,图片使用大图,轮播图里的div高度固定,宽度为窗口的宽度(随窗口宽度的变化而变化)
  2. 当屏幕宽度小于768px(手机)时,将图片换为小图,并在div里生成img标签,img的宽高随窗口变化而变化,包裹img的div也随之变化
  3. html代码
<section id="main_ad" class="carousel slide" data-ride="carousel">
    <!-- 活动指示器 -->
    <ol class="carousel-indicators">
      <li data-target="#main_ad" data-slide-to="0" class="active"></li>
      <li data-target="#main_ad" data-slide-to="1"></li>
      <li data-target="#main_ad" data-slide-to="2"></li>
      <li data-target="#main_ad" data-slide-to="3"></li>
    </ol>
    <!-- 轮播项 -->
    <div class="carousel-inner" role="listbox">
      <div class="item active" data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg"></div>
      <div class="item" data-image-lg="img/slide_02_2000x410.jpg" data-image-xs="img/slide_02_640x340.jpg"></div>
      <div class="item" data-image-lg="img/slide_03_2000x410.jpg" data-image-xs="img/slide_03_640x340.jpg"></div>
      <div class="item" data-image-lg="img/slide_04_2000x410.jpg" data-image-xs="img/slide_04_640x340.jpg"></div>
    </div>
    <!-- 控制按钮 -->
    <a class="left carousel-control" href="#main_ad" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#main_ad" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </section>

4、css代码

#main_ad .carousel-inner .item{
    background-size: cover; /*让图片覆盖满整个div*/
    background-position: center,center; /*让图片在div里水平垂直居中*/
    background-repeat: no-repeat;
    height: 410px;
}
@media (max-width:768px) {
    #main_ad .carousel-inner .item {
        height: auto;
    }
    #main_ad .carousel-inner .item img{
        width: 100%;
    }
}

5、js代码

$(function() {
  /**
   * 根据屏幕宽度的变化决定轮播图片应该展示什么 5    */
  function resize() {
    // 获取屏幕宽度
    var windowWidth = $(window).width();
    // 判断屏幕属于大还是小
    var isSmallScreen = windowWidth < 768;
    // 根据大小为界面上的每一张轮播图设置背景
    $('#main_ad > .carousel-inner > .item').each(function(i, item) {
      var $item = $(item);
      // var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
      var imgSrc =
        isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
      // 设置背景图片
      $item.css('backgroundImage', 'url("' + imgSrc + '")');
      //
      // 因为我们需要小图时 尺寸等比例变化,所以小图时我们使用img方式
      if (isSmallScreen) {
        $item.html('<img src="' + imgSrc + '" alt="" />');
      } else {
        $item.empty();
      }
    });
  }
  // // 让window对象立即触发一下resize,初始化div的背景图
  // $(window).trigger('resize');
  $(window).on('resize', resize).trigger('resize');
});

在移动端手指触摸轮播图切换效果:

var carousels = $(".carousel");  //获取所有的轮播图
    var startX,endX,finalMove;
    var diviation = 60;  //让手指滑动一定距离轮播图才工作
    carousels.on("touchstart",function(event) {
       // console.log(event.originalEvent.touches[0].pageX);
        startX = event.originalEvent.touches[0].pageX;//获取手指接触屏幕时的位置
    });
    carousels.on("touchmove",function(event) {
       // console.log(event.originalEvent.touches[0].pageX);
        endX = event.originalEvent.touches[0].pageX;//手指滑动时该值一直刷新,当手指离开时保留最后一次手指的位置
    })
    carousels.on("touchend",function(event) {
        //console.log(event.originalEvent.touches[0].pageX);
        finalMove = Math.abs(startX - endX) - diviation;
        if(finalMove > 0 && (startX - endX) > 0) {//如果手指滑动方向向左,轮播图向右播放一张图片
            $(this).carousel('next);
        }
        else if (finalMove > 0 && (startX - endX) < 0) {
            $(this).carousel('prev');
        }
    })

一些补充:

  1. 为什么不一开始就用img标签?

    因为要让图片水平垂直居中,这样更方便

  2.bootstrap文档地址:v3.bootcss.com

  3.@media 可以针对不同的屏幕尺寸设置不同的样式

  4.超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px)中等屏幕 桌 面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)

如何用纯js(angular)写一个返回顶部的按钮?

mrnaas阅读(97)

document.getElementById("btn").onclick=function(){
    window.scrollTo(0,0);
}
$(window).scroll(function() {
  if ($(window).scrollTop() > 100) {
  $("#back-to-top").fadeIn(1500);
  } else {
  $("#back-to-top").fadeOut(1500);
  }
});
js: window.scrollTo(0,0); //直接上移
jq: $(document).animate({
       scrollTop: "0px"
    }, 1000);  //带运动上移
html: 锚点 //直接上移