JS技巧

一 判断移动终端类型

1. 判断是否是IE浏览系统

 isIE: function() {

   return (/msie/i).test(navigator.userAgent);

}

 

2. 判断是否是Android浏览系统

isAndroid: function() {

        var isAndroid = false, androidVersion;



        if(navigator.userAgent.indexOf("Android") >= 0 ) {

          androidVersion = parseFloat(navigator.userAgent.slice(navigator.userAgent.indexOf("Android")+8));

          if (androidVersion <= 2.4) {

              isAndroid = true;

          }

        }



        return isAndroid;

 }

 

3. 判断是否是Windows Phone 7浏览系统

 fontFaceCheck: function() {

        if (/Windows Phone OS 7/.test(navigator.userAgent)) {

          Modernizr.fontface = false;

          $("html").removeClass("fontface").addClass("no-fontface");

        }

}

 

二 URL Params

/*

 * URL Params - v1.0 - 8/28/2013

 * http://pastebin.com/yvfeK76y

 *

 * Include this in the document <head> for best results. It will create a global 

 * object "urlParams" that stores all querystring parameters in a URL.

 *

 * Uses/examples:

 * if ("foo" in urlParams) { ... }

 * var foo_value = urlParams["foo"];

 *

 */

var urlParams = {};



(function() {

    var e, a = /\+/g, r = /([^&=]+)=?([^&]*)/g, d = function(s) {

        return decodeURIComponent(s.replace(a, " "));

    }, q = window.location.search.substring(1);

    while (e = r.exec(q)) urlParams[d(e[1])] = d(e[2]);

})();

 

三 获得当天时间

new Date().getTime()

 

四 跳转页面

var address = "***" ;

window.location.href="${request.contextPath}"+ address ;

 

五 重新加载页面

location.reload();

 

六 JSTL超过一定长度显示省略字符 ...

<c:choose>

        <c:when test="${fn:length(product.description) ge 250 }">

            <p>

                <span class="modelHighlightsDescription">${fn:substring(product.description, 0, 200)}...</span>

            </p>

        </c:when>

        <c:otherwise>

            <p>

                <span class="modelHighlightsDescription"> ${product.description }</span>

            </p>

            </c:otherwise>

</c:choose>

 

七 JSTL格式化货币

1)新建一个price.tag 文件,放在 %/WEB-INF/tags/shared/format 目录下。

<%@ tag body-content="empty" trimDirectiveWhitespaces="true" %>

<%@ attribute name="priceData" required="true" type="de.hybris.platform.commercefacades.product.data.PriceData" %>

<%@ attribute name="displayFreeForZero" required="false" type="java.lang.Boolean" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>



<%--

 Tag to render a currency formatted price.

 Includes the currency symbol for the specific currency.

--%>

<c:choose>

    <c:when test="${priceData.value > 0}">

        ${priceData.formattedValue}

    </c:when>

    <c:otherwise>

        <c:if test="${displayFreeForZero}">

            <spring:theme code="text.free" text="FREE"/>

        </c:if>

        <c:if test="${not displayFreeForZero}">

            ${priceData.formattedValue}

        </c:if>

    </c:otherwise>

</c:choose>

 

2)新建一个tag文件,cartItems.tag,引入刚才新建的 price.tag文件

<%@ taglib prefix="format" tagdir="/WEB-INF/tags/shared/format"%>



<format:price priceData="${entry.priceWithoutCoupon}" displayFreeForZero="true" />

 

八 JSTL根据条件显示不同的库存量

<c:if test="${product.stock.stockLevel gt 0}">

        <c:set var="productStockLevel">${product.stock.stockLevel}&nbsp;<spring:theme code="product.variants.in.stock"/></c:set>

</c:if>

<c:if test="${product.stock.stockLevelStatus.code eq 'lowStock'}">

        <c:set var="productStockLevel"><spring:theme code="product.variants.only.left" arguments="${product.stock.stockLevel}"/></c:set>

</c:if>

<c:if test="${product.stock.stockLevelStatus.code eq 'inStock' and empty product.stock.stockLevel}">

         <c:set var="productStockLevel"><spring:theme code="product.variants.available"/></c:set>

</c:if>

<span class="rci-msg"  style="color: #9c3022;font-weight: bold;">${productStockLevel}</span>

 

九 JSTL 使用动态变量

<c:url value="${facetValue.query.url}" var="facetValueQueryUrl"/>
<input type="radio" onclick="javascript:location.href='${facetValueQueryUrl}&amp;text=${searchPageData.freeTextSearch}';" >

 

十 window 加载 javascript代码

<script type="text/javascript">





function downloadJSAtOnload() {

    var loadScript = document.createElement("script");

    loadScript.src="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${webroot}resources/vendor/requirejs/require.js";

    loadScript.setAttribute("data-main","${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${webroot}resources/singlePage");

    document.body.appendChild(loadScript);

}



if (window.addEventListener)

    window.addEventListener("load", downloadJSAtOnload, false);

else if (window.attachEvent)

    window.attachEvent("onload", downloadJSAtOnload);

else window.onload = downloadJSAtOnload;





</script>

 

 十一  字符串转数组

// 字符串转数组

function convertToArray(original) {

    var arr = original.trim().split(/\s*,\s*/);

    if(arr[arr.length-1] == "") {

            arr.pop();

    }

    return arr;

}

 

十二 计算百分比率

function calcPercent(n1, n2) {

    var num1 = parseInt(n1);

    var num2 = parseInt(n2);

    if(num1 && num2) {

        return Math.round((num1 / num2) * 100);

    }else {

        return 0;

    }

}

 

你可能感兴趣的:(js技巧)