jquery块图

Continue Read..
点击查看原图

html:
<div class="clear tb-boxs" id="wins">
<div class="fl"  style="width:25%;">
<div class="tb-box">
<i class="tb-i19"></i>
<div class="tb-h">
<h2>新用户数</h2>
</div>
<div class="tb-b">
<div class="tb-num"><b class="hform" name="xyhs" fn="fna" fn="fna"></b></div>
<!-- <div class="tb-btf">本周累计<span class="hform" name="sumtopinstall_dev_cnt" fn="fna"></span></div> -->
</div>
</div>
</div>
<div class="fl"  style="width:25%;">
<div class="tb-box">
<i class="tb-i23"></i>
<div class="tb-h">
<h2>次日留存率</h2>
</div>
<div class="tb-b">
<div class="tb-num hform"><b class="hform" name="crlcl" fn="fna"></b></div>
<!-- <div class="tb-btf">本周累计<span class="hform" name="sumtopfirst_login_cnt" fn="fna"></span></div> -->
</div>
</div>
</div>
<div class="fl"  style="width:25%;">
<div class="tb-box">
<i class="tb-i6"></i>
<div class="tb-h">
<h2>3日留存率</h2>
</div>
<div class="tb-b">
<div class="tb-num hform"><b class="hform" name="3rlcl" fn="fna"></b></div>
<!-- <div class="tb-btf">本周累计<span class="hform" name="sumtoprecharge_cnt" fn="fna"></span></div> -->
</div>
</div>
</div>
<div class="fl"  style="width:25%;">
<div class="tb-box">
<i class="tb-i7"></i>
<div class="tb-h">
<h2>7日留存率</h2>
</div>
<div class="tb-b">
<div class="tb-num hform"><b class="hform" name="7rlcl" fn="fna"></b></div>
<!-- <div class="tb-btf">本周累计<span class="hform" name="sumtoprecharge" fn="fna"></span></div> -->
</div>
</div>
</div>
</div>


css:
/*tb-box样式*/
.tb-boxs{margin:0 5px 0 1px;}
.tb-box{border: 1px solid #d0cfcb;font-size: 12px;background-color:#fdfdfd;min-height:100px;margin-left:-1px;}
.tb-box > i{float:left;width:32px;height:32px;margin:36px 0 0 10px;background: url(../img/icos.png) -133px -193px no-repeat;}
.tb-box .tb-h{line-height: 30px;color: #666666;font-size: 14px;margin-left:58px;font-family:"微软雅黑";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tb-box .tb-b{margin-left:55px;}
.tb-box .tb-ico{float: right;padding-right: 15px;margin-right: 10px; font: 14px;line-height: 36px;font-family: arial;font-weight:bold;}
.tb-box .tb-ico.tb-top{background: url(../img/tb-ico.png) right 10px no-repeat;}
.tb-box .tb-ico.tb-bottom{background: url(../img/tb-ico.png) right -52px no-repeat;}
.tb-box .tb-num{line-height: 45px;height:45px;font-family: arial,'微软雅黑';overflow: hidden;}
.tb-box .tb-num .num{color:#666666;}
.tb-box .tb-num b{font-size: 24px;color:333333;float: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.tb-box .tb-num b.bn{font-weight:normal;}
.tb-box .tb-num span,.updown{margin-left: 15px;font-size: 14px;color: #1889b4;float: left;font-weight: bold;padding-left:15px;height:40px;width:60px;}
.updown{line-height:45px;}
.tb-box .updown.fr{width:auto;float:right;margin:-8px 5px 0 0;}

.tb-box .tb-num span,.down{margin-left: 15px;padding-left:15px;height:20px;width:60px;}

.tb-box > i.tb-i1{background-position:-133px -193px;} /*--深橘黄色背景一个小人头*/
.tb-box > i.tb-i2{background-position:-172px -193px;} /*--浅橘黄色背景双小人头*/
.tb-box > i.tb-i3{background-position:-211px -193px;} /*--绿色背景一个小人头*/
.tb-box > i.tb-i4{background-position:-251px -193px;} /*--蓝色背景四个小方块*/
.tb-box > i.tb-i5{background-position:-291px -193px;} /*--水红色背景四个小方块*/
.tb-box > i.tb-i6{background-position:-331px -193px;} /*--浅橘黄色背景四个小方块*/
.tb-box > i.tb-i7{background-position:-370px -193px;} /*--绿色背景四个小方块*/
.tb-box > i.tb-i8{background-position:-410px -193px;} /*--深橘黄色背景四个小方块*/
.tb-box > i.tb-i9{background-position:-133px -235px;} /*--蓝色背景¥*/
.tb-box > i.tb-i10{background-position:-172px -235px;} /*--水红色背景双小人头S*/
.tb-box > i.tb-i11{background-position:-211px -235px;} /*--浅橘黄色背景¥*/
.tb-box > i.tb-i12{background-position:-251px -235px;} /*--绿色背景三个柱形*/
.tb-box > i.tb-i13{background-position:-291px -235px;} /*--蓝色背景单小人头S*/
.tb-box > i.tb-i14{background-position:-331px -235px;} /*--水红色背景¥*/
.tb-box > i.tb-i15{background-position:-370px -235px;} /*--浅橘黄色背景双小人头S*/
.tb-box > i.tb-i16{background-position:-410px -235px;} /*--绿色背景¥*/
.tb-box > i.tb-i17{background-position:-133px -277px;} /*--水红色背景手机形*/
.tb-box > i.tb-i18{background-position:-172px -277px;} /*--深橘黄色背景单小人头S*/
.tb-box > i.tb-i19{background-position:-211px -277px;} /*--蓝色背景单小人头*/
.tb-box > i.tb-i20{background-position:-250px -277px;} /*--水红色背景单小人头*/
.tb-box > i.tb-i21{background-position:-289px -277px;} /*--绿色背景双小人头*/
.tb-box > i.tb-i22{background-position:-328px -277px;} /*--水红色背景单小人头S*/
/*实时流水页面*/
.tb-box > i.tb-i24{background-position:-371px -277px;} /*--水红色背景$*/
.tb-box > i.tb-i25{background-position:-410px -277px;} /*--绿色背景$*/
.tb-box > i.tb-i26{background-position:-134px -320px;} /*--深橘黄色背景$*/
.tb-box > i.tb-i27{background-position:-172px -320px;} /*--浅橘黄色背景$*/
/*实时流水页面*/
.tb-box > i.tb-i28{background-position:-211px -320px;} /*--浅橘黄色背景单小人头*/
.tb-box > i.tb-i29{background-position:-250px -320px;} /*--深橘黄色背景小闹钟*/
.tb-box > i.tb-i30{background-position:-291px -320px;} /*--蓝色背景双小人头*/
.tb-box > i.tb-i31{background-position:-331px -320px;} /*--蓝色背景小闹钟*/
.tb-box > i.tb-i32{background-position:-371px -320px;} /*--紫色单人头*/
.tb-box > i.tb-i33{background-position:-134px -360px;} /*--浅橘黄色背景 时间*/
.tb-box > i.tb-i34{background-position:-410px -320px;} /*--绿色背景 时间*/

js:
_fns.ajax({
url : _urls.table,
data : {},
cb : function(re) {
var obj = $.extend({},re.data.result1[0]);
_fns.hform($el.find("#wins"), obj,true,fns);
}
});


json:
{
"message":"操作成功!",
"data":{
"result1":[
{"xyhs":"150005","crlcl":"96.36%","3rlcl":"54%","7rlcl":"36%"}
],
"totalCount":100,
"totalPages":5,
"pageNo":1
},
"code":200
}

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

jquery渲染图2(不带滚动条)

Continue Read..
html:

<!-- 块形转化率图 start -->
<div class="block-trans-box" id="blockTrans1" style="margin:10px;"></div>
<!-- 块形转化率图 end -->

css:
/*块形转化率图*/
.block-trans-box{margin:10px 20px;}
.block-trans{overflow: hidden;max-height: 250px;}
.block-trans .br-blocks{float: left;width: 120px;cursor:pointer;}
.block-trans .br-title{line-height: 30px;color: #333333;font-weight: bold;text-align: center;font-size: 14px;}
.block-trans .br-vk{background-color: #f0f0f0;color: #666666;padding-left: 10px;}
.block-trans .br-v{line-height: 23px;}
.block-trans .br-k{line-height: 30px;font-size: 16px;font-weight: bold;}
.block-trans .br-rate{height: 150px;background-color: #68b4ec;position: relative;}
.block-trans .br-rate span{position: absolute;top: 50%;left:0;margin-top: -15px;width: 100%;height: 30px;line-height: 30px;font-size: 18px;color: #FFF;text-align: center;}
.block-trans .br-gaps{float: left;width: 65px;height: 50px;padding-top: 92px;text-align: center;color: #666666;font-weight: bold; background: url("../img/arrs.png") center 109px no-repeat;background-size: 66% auto;}
/*后添加的样式*/
.block-trans .br-vname{line-height: 23px;font-size: 15px;font-weight: bold;font-family:"微软雅黑";}
.block-trans .br-key{line-height: 30px;font-size: 18px;font-weight: bold;}
.block-trans .br-gaps-s{float: left;width: 65px;height: 80px;padding: 82px 12px 0;text-align: center;color: #666666;font-weight: bold; background: url("../img/arrs.png") center 119px no-repeat;background-size: 66% auto;}
.block-trans .br-gasp-name{color:#f00;font-size: 15px;font-family:"微软雅黑";font-weight: normal;}
.block-trans .br-gasp-key{}



js:
/*块2 start*/
var btOpt1 = {
dom : $el.find("#blockTrans1"), //容器
data : null, //数据源
titles : ['第一', '第二', '第三', '第四', '第五'], //标题
resultKey : 'result4', //读取的key
name : '点击次数', //名称
numKey : 'd', //值key
secname:'市场费用',
   secnumKey:'d',
rateKey : 'c', //占比key
transRateName:'点击率',
transRateKey : 'c', 
test:'test' , //转化率key
clickCb : function(d,num){
console.log(num);
}
};
_fns.ajax({
url : _urls.table,
data : {},
cb : function(re){

btOpt1.data = re.data;
_fns.blockTransformShow(btOpt1);
}
});
/*块2 end*/

脚本调用函数:
//块形转化率图
  blockTransformShow : function(opt){
      opt = $.extend({
  dom : null, //容器
  data : null, //数据源
  resultKey : 'result', //数据源读取的key
  titles : [], //每块的标题
  name : '', //名称
  numKey : '', //值
  secname:'',
  secnumKey:'',
  rateKey : '', //占比
  transRateName:'',
  transRateKey : '' //转化率
  }, opt);
  var _fns = this;
  if(!opt.dom.length || !opt.data || !opt.data[opt.resultKey] || !opt.titles.length){return;}
  var wd = opt.dom.attr("width");
  var width = wd ? Number(wd)  :opt.dom.width() - 20;//容器总宽度
  if(!wd){opt.dom.attr("width", width);}
  var len = opt.titles.length;
  var blockWidth = width/((len - 1) * 0.88 +len); //块宽度
  var gapWidth = blockWidth * 0.38; //间隙宽度
  var h = 150; //块100%高度
  var colors = function(eq){
      var color = Highcharts.getOptions().colors;
      if(eq > 10){eq = eq%11;}
      return color[eq];
  };
  var $box = $('<div class="block-trans"></div>');
  $.each(opt.titles, function(i, j){
  var hh = h*opt.data[opt.resultKey][i][opt.rateKey]/100;
  var scolor = hh < 15 ? ' style="color:#333333;"' : '';
  //var gapStr = i ? ('<div class="br-gaps" style="width:'+gapWidth+'px;">'+opt.data[opt.resultKey][i][opt.transRateKey]+'%</div>') : '';
  //console.log(_fns.qfw(opt.data[opt.resultKey][i][opt.numKey]));
  var gapStr=i?('<div class="br-gaps-s" style="width:'+gapWidth+'px;"><div class="br-gasp-name">'+opt.transRateName+'</div><div class="br-gasp-key">'+opt.data[opt.resultKey][i][opt.transRateKey]+'%</div></div>') : '';
     var blockStr = '<div class="br-blocks" num="'+i+'" style="width:'+blockWidth+'px;"><div class="br-vk"><div class="br-vname">'+opt.name+'</div><div class="br-key">'+_fns.qfw(opt.data[opt.resultKey][i][opt.numKey])+'</div><div class="br-vname">'+opt.secname+'</div><div class="br-key">'+_fns.qfw(opt.data[opt.resultKey][i][opt.secnumKey])+'</div></div><div class="br-rate" style="background-color:'+colors(i)+';height:'+hh+'px;"><span'+scolor+'>'+opt.data[opt.resultKey][i][opt.rateKey]+'%</span></div></div>';
     $box.append(gapStr + blockStr); 
  });
  

  $box.find(".br-blocks").click(function(){
  $brstr=$(this);
  if(typeof opt.clickCb === 'function'){
  opt.clickCb(opt,$brstr.attr('num'));
  }
  });
  opt.dom.html($box);
  }

json:
{
"message":"操作成功!",
"data":{
"result":[
{"id":1,"a":2,"b":1,"c":5,"d":100,"e":"asb"},
{"id":2,"a":3,"b":3,"c":9,"d":80,"e":"aabb"},
{"id":3,"a":5,"b":6,"c":20,"d":60,"e":"aab"},
{"id":4,"a":10,"b":8,"c":25,"d":50,"e":"zab"},
{"id":5,"a":20,"b":9,"c":25,"d":31,"e":"flex"},
{"id":6,"a":8,"b":10,"c":12,"d":20,"e":"photo"},
{"id":7,"a":12,"b":11,"c":15,"d":36,"e":"2014-04-05"},
{"id":8,"a":22,"b":11,"c":18,"d":36,"e":"2014-12-26"},
{"id":9,"a":9,"b":17,"c":20,"d":39,"e":"work"},
{"id":10,"a":80,"b":100,"c":25,"d":31,"e":"sublime"},
{"id":11,"a":8,"b":10,"c":12,"d":35,"e":"dream"},
{"id":12,"a":12,"b":11,"c":15,"d":36,"e":"weaver"},
{"id":13,"a":22,"b":11,"c":18,"d":36,"e":"node"},
{"id":14,"a":9,"b":17,"c":20,"d":39,"e":"pad"},
{"id":15,"a":1,"b":10,"c":0,"d":40,"e":"ffu"}
],
"totalCount":100,
"totalPages":5,
"pageNo":1
},
"code":200
}

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

jquery渲染图

Continue Read..
点击查看原图点击查看原图


html:

<!-- 块形转化率图 start -->
<div class="block-trans-box" id="blockTrans"></div>
<div class="tbar" id="tBar"></div>
<!-- 块形转化率图 end -->

css:
/*块形转化率图*/
.block-trans-box{margin:10px 20px;}
.block-trans{overflow: hidden;max-height: 250px;}
.block-trans .br-blocks{float: left;width: 120px;cursor:pointer;}
.block-trans .br-title{line-height: 30px;color: #333333;font-weight: bold;text-align: center;font-size: 14px;}
.block-trans .br-vk{background-color: #f0f0f0;color: #666666;padding-left: 10px;}
.block-trans .br-v{line-height: 23px;}
.block-trans .br-k{line-height: 30px;font-size: 16px;font-weight: bold;}
.block-trans .br-rate{height: 150px;background-color: #68b4ec;position: relative;}
.block-trans .br-rate span{position: absolute;top: 50%;left:0;margin-top: -15px;width: 100%;height: 30px;line-height: 30px;font-size: 18px;color: #FFF;text-align: center;}
.block-trans .br-gaps{float: left;width: 65px;height: 50px;padding-top: 92px;text-align: center;color: #666666;font-weight: bold; background: url("../img/arrs.png") center 109px no-repeat;background-size: 66% auto;}


js:
//块形转化率图(先通过AJAX获取数据,再执行_fns.blockTransform函数)
var btOpt = {
dom : $el.find("#blockTrans"), //容器
data : null, //数据源
titles : ['第一', '第二', '第三', '第四', '第五', '第六'], //标题
resultKey : 'result', //读取的key
name : '点击次数', //名称
numKey : 'e', //值key
rateKey : 'd', //占比key
transRateKey : 'c', 
test:'test' , //转化率key
clickCb : function(d,num){
console.log(num);
}
};
_fns.ajax({
url : _urls.table,
data : {},
cb : function(re){

btOpt.data = re.data;
console.log(btOpt);
_fns.blockTransform(btOpt);
}
});
//初始化拖动条
_fns.tbar($auBox.children("#tBar"), {nums : 30}, function(arrs){
_fns.blockTransform(btOpt);
});

脚本调用函数:
//块形转化率图
  blockTransform : function(opt){
      opt = $.extend({
  dom : null, //容器
  data : null, //数据源
  resultKey : 'result', //数据源读取的key
  titles : [], //每块的标题
  name : '', //名称
  numKey : '', //值
  rateKey : '', //占比
  transRateKey : '' //转化率
  }, opt);
  if(!opt.dom.length || !opt.data || !opt.data[opt.resultKey] || !opt.titles.length){return;}
  var wd = opt.dom.attr("width");
  var width = wd ? Number(wd)  :opt.dom.width() - 20;//容器总宽度
  if(!wd){opt.dom.attr("width", width);}
  var len = opt.titles.length;
  var blockWidth = width/((len - 1) * 0.68 +len); //块宽度
  var gapWidth = blockWidth * 0.68; //间隙宽度
  var h = 150; //块100%高度
  var colors = function(eq){
      var color = Highcharts.getOptions().colors;
      if(eq > 10){eq = eq%11;}
      return color[eq];
  };
  var $box = $('<div class="block-trans"></div>');
  $.each(opt.titles, function(i, j){
  var hh = h*opt.data[opt.resultKey][i][opt.rateKey]/100;
  var scolor = hh < 15 ? ' style="color:#333333;"' : '';
  var gapStr = i ? ('<div class="br-gaps" style="width:'+gapWidth+'px;">'+opt.data[opt.resultKey][i][opt.transRateKey]+'%</div>') : '';
     var blockStr = '<div class="br-blocks" num="'+i+'" style="width:'+blockWidth+'px;"><div class="br-title">'+j+'</div><div class="br-vk"><div class="br-v">'+opt.name+'</div><div class="br-k">'+opt.data[opt.resultKey][i][opt.numKey]+'</div></div><div class="br-rate" style="background-color:'+colors(i)+';height:'+hh+'px;"><span'+scolor+'>'+opt.data[opt.resultKey][i][opt.rateKey]+'%</span></div></div>';
     $box.append(gapStr + blockStr); 
  });
  

  $box.find(".br-blocks").click(function(){
  $brstr=$(this);
  if(typeof opt.clickCb === 'function'){
  opt.clickCb(opt,$brstr.attr('num'));
  }
  });
  opt.dom.html($box);
  }


json:
{
"message":"操作成功!",
"data":{
"result":[
{"id":1,"a":2,"b":1,"c":5,"d":100,"e":"asb"},
{"id":2,"a":3,"b":3,"c":9,"d":80,"e":"aabb"},
{"id":3,"a":5,"b":6,"c":20,"d":60,"e":"aab"},
{"id":4,"a":10,"b":8,"c":25,"d":50,"e":"zab"},
{"id":5,"a":20,"b":9,"c":25,"d":31,"e":"flex"},
{"id":6,"a":8,"b":10,"c":12,"d":20,"e":"photo"},
{"id":7,"a":12,"b":11,"c":15,"d":36,"e":"2014-04-05"},
{"id":8,"a":22,"b":11,"c":18,"d":36,"e":"2014-12-26"},
{"id":9,"a":9,"b":17,"c":20,"d":39,"e":"work"},
{"id":10,"a":80,"b":100,"c":25,"d":31,"e":"sublime"},
{"id":11,"a":8,"b":10,"c":12,"d":35,"e":"dream"},
{"id":12,"a":12,"b":11,"c":15,"d":36,"e":"weaver"},
{"id":13,"a":22,"b":11,"c":18,"d":36,"e":"node"},
{"id":14,"a":9,"b":17,"c":20,"d":39,"e":"pad"},
{"id":15,"a":1,"b":10,"c":0,"d":40,"e":"ffu"}
],
"totalCount":100,
"totalPages":5,
"pageNo":1
},
"code":200
}

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

jquery生成进度圆圈

Continue Read..

点击查看原图

html:

<div class="fl" id="aveList" style="width:50%;">

<div class="ave-block" style="margin-left:-30px;"></div>

<div class="ave-block" style="margin-left:-30px;"></div>

</div>

js:

//渲染付费

var aveList = [

   {

    name : '当月第3日/总30日', //名称

    percentage : null, //百分比

    value : 47.39, //值

    growthRate : '时间进度' //增长率

   },

   {

    name : '当月$112,369.56/上月$124,547.36', //名称

    percentage : null, //百分比

    value : 20.58, //值

    growthRate : '流水进度' //增长率

   }

];

$el.find("#aveList > .ave-block").each(function(i){

_fns.cirProgress($(this), aveList[i]);

});

 

 

js调用方法函数:

//圆形进度功能($el-容器,opt-参数)

  cirProgress : function($el, opt){

  if($el.length <= 0){return;}

  opt = $.extend({

  name : '', //名称

  percentage : 0, //百分比

  value : 0, //值

      growthRate : 0, //增长率

      radius : 60 //园的半径

  }, opt);

  var _fns = this;

  if(opt.percentage!=null&&opt.percentage > 100){opt.percentage = 100;}

  $el.empty();

  var w = $el.width();

  var h = $el.height();

  var renderer = new Highcharts.Renderer($el[0], w, h);

  renderer.circle(w/2, h/2, opt.radius).attr({

       fill: '#FFF',

       stroke: '#e2e5e8',

       'stroke-width': 10

  }).add();

 

  //填充进度颜色

  if(opt.percentage!=null)

  {

  renderer.arc(w/2, h/2, opt.radius-5, opt.radius+5, -Math.PI/2, opt.percentage*Math.PI/50-Math.PI/2).attr({

       fill: opt.percentage === 100 ? '#00c5b5' : '#0095c3'

  }).add();

}

  else

  {

renderer.arc(w/2, h/2, opt.radius-5, opt.radius+5, -Math.PI/2, opt.value*Math.PI/50-Math.PI/2).attr({

       fill: opt.value === 100 ? '#00c5b5' : '#0095c3'

  }).add();

  }

 

  var group = renderer.g().css({fontFamily:'arial',color:'#666666',fontSize:'14px'}).add();

 

  //百分比

  if(opt.percentage==null){

  renderer.text('');

  }

  else{

renderer.text(_fns.numFixd(opt.percentage)+'%', w/2, h/2-30).attr({"text-anchor":"middle"}).add(group).css({fontWeight:'bold'}).add(group);

  }

 

  //值

var express = /^\d+$/;

if (express.test(opt.value)) {

  // 则为整数

  renderer.text(_fns.qfw(opt.value), w/2, h/2+5).attr({"text-anchor":"middle"}).css({fontSize:'20px',fontWeight:'bold'}).add(group);

}

else{

renderer.text(opt.value+'%', w/2, h/2+5).attr({"text-anchor":"middle"}).css({fontSize:'20px',fontWeight:'bold'}).add(group);

}

 

//增长率

  if(isNaN(opt.growthRate))

  {

  var group2 = renderer.g().add(group);

  renderer.text(opt.growthRate, w/2-25, h/2+35).css().add(group2);

  }

  else

  {

  var group2 = renderer.g().add(group);

  var rt = _fns.numFixd(opt.growthRate,1);

  var gap = (rt+'').length !== 1 ? (rt+'').length > 3 ? -7 : 0 : 5;

  var img = rt > 0 ? 'arr-up' : 'arr-down';

  renderer.text(Math.abs(rt)+'%', w/2-10+gap, h/2+35).css().add(group2);

  renderer.image('static/img/'+img+'.png', w/2-25+gap, h/2+21, 12, 15).css({float:'right'}).add(group2);

  }

 

  //标题name

  //renderer.text(opt.name, w/2, 30+opt.radius+h/2).attr({"text-anchor":"middle"}).add(group);

  renderer.text(opt.name, w/2, 30+opt.radius+h/2).attr({"text-anchor":"middle"}).css({color:'#666',fontWeight:'bold'}).add(group);

  }

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

实时时间:定时器

Continue Read..

点击查看原图


html:
<ul class="form fform hb-title clear" style="margin-left:10px;line-height:34px;">
<li>北美当前时间(PDT)<label id="ybp_pdttime" style="font-weight:bold;margin-left:15px;font-size:16px;"></label></li>
<li><label id="ybp_date"></label></li>
</ul>
js:
//开启定时器 start
function Appendzero(obj){
if (obj < 10) return "0" + obj; else return obj;
}

_fns.refresh = null;
var time = 1000;
_fns.refresh = window.setInterval(function(){
var dstr=new Date();
var ybp_date='';
var ybp_pdttime='';

var datestr="2014/12/3";
var day=new Date(Date.parse(datestr));
var today=new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六');
var week=today[day.getDay()];

ybp_date=dstr.getFullYear()+'年'+(dstr.getMonth()+1)+'月'+dstr.getDate()+'日'+' '+week;
ybp_pdttime=dstr.getHours()+' :'+Appendzero(dstr.getMinutes())+' :'+Appendzero(dstr.getSeconds());

   $el.find("#ybp_pdttime").html(ybp_pdttime);
   $el.find("#ybp_date").html(ybp_date);
}, time);
//开启定时器 end

注意:要记得清除:clearInterval
//关闭页面时,清除定时器
_fns.refresh = null;
window.clearInterval(_fns.refresh);

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

json遍历

Continue Read..
1.$.each(re.data.result6,function(i,j){
if(j.children.length>0){
var tr_child=null;
$.each(j.children,function(x,y){
tr_child+='<tr class="child'+i+'" style="display:none;"><td></td><td>'+y.a+'</td><td>'+y.b+'</td><td>'+y.c+'</td><td>'+y.d+'</td><td>'+y.e+'</td><td>'+y.f+'</td></tr>';
});
$el.find('#seTable table tbody tr[eq='+i+']').after(tr_child);
}
});

2.
var series = [];
$.each(d.series, function(i, j){
series.push({data : []});
$.each(j.data, function(m, n){
series[i].data.push({y : n});
});
});
series[0].data.push({color:'#3CB371',isIntermediateSum:true,name:'Total'});
d.series = series;
return d;

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

highcharts属性

Continue Read..

highcharts:

drawOpts[4].yKeys=[{key : 'a', name : 'A',  anti:true}]

drawOpts[0].yKeys.push({key : j.key,name : j.name});

    chart: {

           type: 'waterfall'

       },

    legend: {

           layout: 'vertical',

           align: 'right',

           verticalAlign: 'middle',

           borderWidth: 0,

           width:100

       },

       colors: ['#428BCA','#5CB85C','#F2B661'],

xAxis:{

        labels:{

        enabled:true,

        step:1

        },

            tickWidth:0

       },

       yAxis: [{

        //gridLineWidth:0,

           labels: {

               format: '{value}K'

           },

           title: {

               text: ''

           }            

   }],

tooltip: {

           enabled:true,

           crosshairs:false,

           borderColor:'#666666',

           borderRadius:0,

           backgroundColor:'#666666',

           style: {

color: '#fff',

fontSize: '12px',

padding: '8px'

},

           formatter: function () {

            var s = this.x;

               $.each(this.points, function () {

                s += '<br />'+this.series.name+': '+this.point.y+'<br/>';

               });

               return s;

           }

       }

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【微信】获取微信服务器IP和怎么获取微信access_token的值

Continue Read..
//通过access_token获取微信服务器IP
function getWxIp(){   
    $arr = get_access_token();
    $url = "https://api.weixin.qq.com/cgi-bin/getcallbackip?access_token=".$arr['access_token'];
    $res = getWxUrl($url);
    return json_decode($res, true);
}
//获取access_token
function get_access_token(){
    $key = "access_token";
    $data = S($key);
    if(!$data){
   $url_get = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' . C("Wx_appid") . '&secret=' . C("Wx_token");
   $data = json_decode(curlGet($url_get), true);
   S($key,$data,7200);
    }
    return $data;
}
function curlGet($url){
    $ch = curl_init();
    $header = "Accept-Charset: utf-8";
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "GET");
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
    curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (compatible; MSIE 5.01; Windows NT 5.0)');
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
    curl_setopt($ch, CURLOPT_AUTOREFERER, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $temp = curl_exec($ch);
    return $temp;
}

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权