JavaScript倒计时

2016-08-08, 星期一 |
前端JS函数

JavaScript的Date对象提供了一些不错的方法,配合setInterval()可以用来作一个简单的倒计时工具。

距离今天的某个时间还有多少小时,多少分,多少秒。getHMSLeft(h, m, s)

var getHMSLeft = function(h, m, s){
  h = h||20;
  m = m||0;
  s = s||0;
  var today = new Date();
  var date = new Date(today.getFullYear(), today.getMonth(), today.getDate(), h, m, s);
  date.setTime(date-today);
  var left = [0, 0, 0];
  left[0] = date.getUTCHours();
  left[1] = date.getUTCMinutes();
  left[2] = date.getUTCSeconds();
  return left;
}

需要注意的是JavaScript的Date()在构造时月份会少一个月,也就是从

JavaScript将二维数组保存成字符串

2016-08-08, 星期一 |
前端JS函数

在JavaScript中,用js的toString()方法将二维数组直接保存成字符串,格式会丢失,不利于还原。利如形如

var arr = [[1,2], [3,7], [8,9,3]]
alert()或toString()方法处理arr时,结果大概会是
1,2,3,7,8,9,3
为了转化时二维数组的格式得以保存,需要自行构造一个函数。

var array2String = function(arr){
    // var arr = [[1,2,3], [4,6,9], [2,3,7]];
    var s = '';
    for (var i = 0; i < arr.length; i++) {
        s += '[';
        for(var j = 0; j<arr[i].length-1; j++){
            s += arr[i][j] + ',';
        }
        s += arr[i][arr[i].length-1] + '],';
    }
    return '[' + s.substr(0

简明瀑布流算法

2016-08-01, 星期一 |
前端

图片类网站经常用到瀑布流的形式来排列自己的图片,例如pinterest, 花瓣网。有很多开源的jQuery框架可以实现瀑布流,但是比较复杂。这篇文章主要讲诉图片类瀑布流的布局组织的算法,用纯js实现。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pinterest demo</title>
    <style>
        body{
            background-color: silver;
        }
        .item{
            position: absolute;
            border: 15px solid white;
        }
        .container{
            position: relative !important;
        }
    </

不翻墙打开docs.angularjs.org

2016-07-29, 星期五 |
解决方案extensioncoding前端

http://docs.angularjs.org打不开,是因为用的是googleapi.com作为angularjs的cdn网站。而googleapi.com被墙,要想打开angular的官方主页angularjs.org要么翻墙,要么出国,或者替换掉ajax.googleapi.com为cdn.bootcdn.com。

(function(){
    function replaceUri(){
        var scripts = document.getElementsByTagName("script");

        // bootcdn.cn
        var baseUrl = '//cdn.bootcss.com/angular.js/1.5.8/';
        for(var i=0; i<scripts.length;i++){
            // if exists of googleapis.com ->
            var src = scripts[i].src;
            if(s

最简单js,表格隔行变色

2016-07-26, 星期二 |
Jquery前端

jQuery实现 有利用到jQuery的伪选择器:odd Selector, :even Selector, 事件hover( handlerIn, handlerOut )

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11 demo - table odd color</title>

  <style>
    table{
      border-collapse: collapse;
    }
    table, td, th{
      border: 1px solid #ccc;
    }
    th, td{
      padding:8px;
    }
    .silver{
      background-color: green !important;
    }
  </style>
</head>
<body>
  &l