svg 图表-圆环

css

.chart-circle-bg{
	fill:none ;
	stroke:#E4EAF5 ;
	stroke-width:10;
	stroke-miterlimit:10;
	cx:100;
	cy:100;
	r:55.056;
		    
}
.chart-circle-line{
	fill:none;
	stroke-linecap: round;
	animation: spin 4s infinite linear;
	stroke-width:10;
	stroke-miterlimit:10;
}

js

<script>
$('input').bind('input propertychange', the_change);

function the_change(){
	var it = $(this);
	var css=($(this).attr("class"));
	var target=$(".chart-circle-line");
	var js_target=document.getElementsByClassName("chart-circle-line")[0].getBoundingClientRect();
	var h=js_target.height||Bottom - Top;
	var w=js_target.width||Right - Left;
	switch (css){
	case "ray":
		target.css("stroke-dasharray",it.val()/100*h*Math.PI+" "+it.val()/100*w*Math.PI)
		break;
	case "set":
		target.css("stroke-dashoffset",it.val()/100*h*Math.PI)
		break;
	}
}
</script>

html

<svg class="f3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g >
	<circle class="chart-circle-bg" />
</g>
<defs class="">
		<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
		<stop offset="0%" style="stop-color:#FF675C;stop-opacity:1"/>
		<stop offset="100%" style="stop-color:#FF325C;stop-opacity:1"/>
		</linearGradient>
	</defs>
<g >
	<path class="chart-circle-line" xmlns="http://www.w3.org/2000/svg"  
	stroke="url(#orange_red)" 	
	d="M100,44.944c30.407,0,55.056,24.649,55.056,55.056   c0,30.406-24.648,55.057-55.056,55.057c-30.406,0-55.056-24.65-55.056-55.057C44.944,69.593,69.594,44.944,100,44.944"
	/>
</g>
</svg>
<input class='ray' >
<input class='set' >

 

 

js原生 克隆对象(支持内嵌数组的对象)

/**
* 克隆对象
*/
//函数法
function cloneObj(myObj){
  if(typeof(myObj) != 'object') { return myObj; }
  if(myObj == null) { return myObj; }

  if(myObj instanceof Array ){
    var myNewObj = [];
  }else{
    var myNewObj = new Object();
  }
  for(var i in myObj)  {
    myNewObj[i] = cloneObj(myObj[i]);
  }
  return myNewObj;
}
//原型链法
Object.prototype.objectCopy = function()
{
    var objClone;
    if ( this.constructor == Object ) {
      if(this.constructor instanceof Array){
        objClone = [];
      }else{
        objClone = new this.constructor();
      }
    } else {
      objClone = new this.constructor(this.valueOf());
    }
    for ( var key in this )
     {
        if ( objClone[key] != this[key] )
         {
            if ( typeof(this[key]) == 'object' )
             {
                 objClone[key] = this[key].objectCopy();
             }
            else
             {
                 objClone[key] = this[key];
             }
         }
     }
     objClone.toString = this.toString;
     objClone.valueOf = this.valueOf;
    return objClone;
}

 

JS实现php的printf方法

原文地址:http://www.jb51.net/article/60398.htm(我知道这不是原作者,请知道的转告我jackqqq123@sina.com)

简单版

/*

var hangstr="this is {0},{1}";
printf(hangstr,"me","guy");
//result :this is me,guy
*/
function printf() {
  var num = arguments.length;
  var oStr = arguments[0];
  for (var i = 1; i < num; i++) {
    var pattern = "\\{" + (i-1) + "\\}";
    var re = new RegExp(pattern, "g");
    oStr = oStr.replace(re, arguments[i]);
  }
  return oStr;
}

完整功能

1.%% - 返回百分号本身
2.%b - 二进制数字
3.%c - ASCII对应的字符
4.%d - 整数
5.%f - 浮点数
6.%o - 八进制数字
7.%s - 字符串
8.%x - 16进制数字 (小写字母形式)
9.%X - 16进制数字 (大写字母形式)

在 % 号和通配字符之间可用的选项包括 (比如 %.2f):

1.+????? (强制在数字前面显示 + 和 - 符号作为正负数标记。缺省情况下只有负数才显示 - 符号)
2.-????? (变量左对齐)
3.0????? (使用0作为右对齐的填充字符)
4.[0-9]? (设置变量的最小宽度)
5..[0-9] (设置浮点数精度或字符串的长度)

/*
*/
/**
*
*  Javascript sprintf
*  http://www.webtoolkit.info/
*
*
**/
sprintfWrapper = {
  init : function () {
    if (typeof arguments == "undefined") { return null; }
    if (arguments.length < 1) { return null; }
    if (typeof arguments[0] != "string") { return null; }
    if (typeof RegExp == "undefined") { return null; }
    var string = arguments[0];
    var exp = new RegExp(/(%([%]|(\-)?(\+|\x20)?(0)?(\d+)?(\.(\d)?)?([bcdfosxX])))/g);
    var matches = new Array();
    var strings = new Array();
    var convCount = 0;
    var stringPosStart = 0;
    var stringPosEnd = 0;
    var matchPosEnd = 0;
    var newString = '';
    var match = null;
    while (match = exp.exec(string)) {
      if (match[9]) { convCount += 1; }
      stringPosStart = matchPosEnd;
      stringPosEnd = exp.lastIndex - match[0].length;
      strings[strings.length] = string.substring(stringPosStart, stringPosEnd);
      matchPosEnd = exp.lastIndex;
      matches[matches.length] = {
        match: match[0],
        left: match[3] ? true : false,
        sign: match[4] || '',
        pad: match[5] || ' ',
        min: match[6] || 0,
        precision: match[8],
        code: match[9] || '%',
        negative: parseInt(arguments[convCount]) < 0 ? true : false,
        argument: String(arguments[convCount])
      };
    }
    strings[strings.length] = string.substring(matchPosEnd);
    if (matches.length == 0) { return string; }
    if ((arguments.length - 1) < convCount) { return null; }
    var code = null;
    var match = null;
    var i = null;
    for (i=0; i<matches.length; i++) {
      if (matches[i].code == '%') { substitution = '%' }
      else if (matches[i].code == 'b') {
        matches[i].argument = String(Math.abs(parseInt(matches[i].argument)).toString(2));
        substitution = sprintfWrapper.convert(matches[i], true);
      }
      else if (matches[i].code == 'c') {
        matches[i].argument = String(String.fromCharCode(parseInt(Math.abs(parseInt(matches[i].argument)))));
        substitution = sprintfWrapper.convert(matches[i], true);
      }
      else if (matches[i].code == 'd') {
        matches[i].argument = String(Math.abs(parseInt(matches[i].argument)));
        substitution = sprintfWrapper.convert(matches[i]);
      }
      else if (matches[i].code == 'f') {
        matches[i].argument = String(Math.abs(parseFloat(matches[i].argument)).toFixed(matches[i].precision ? matches[i].precision : 6));
        substitution = sprintfWrapper.convert(matches[i]);
      }
      else if (matches[i].code == 'o') {
        matches[i].argument = String(Math.abs(parseInt(matches[i].argument)).toString(8));
        substitution = sprintfWrapper.convert(matches[i]);
      }
      else if (matches[i].code == 's') {
        matches[i].argument = matches[i].argument.substring(0, matches[i].precision ? matches[i].precision : matches[i].argument.length)
        substitution = sprintfWrapper.convert(matches[i], true);
      }
      else if (matches[i].code == 'x') {
        matches[i].argument = String(Math.abs(parseInt(matches[i].argument)).toString(16));
        substitution = sprintfWrapper.convert(matches[i]);
      }
      else if (matches[i].code == 'X') {
        matches[i].argument = String(Math.abs(parseInt(matches[i].argument)).toString(16));
        substitution = sprintfWrapper.convert(matches[i]).toUpperCase();
      }
      else {
        substitution = matches[i].match;
      }
      newString += strings[i];
      newString += substitution;
    }
    newString += strings[i];
    return newString;
  },
  convert : function(match, nosign){
    if (nosign) {
      match.sign = '';
    } else {
      match.sign = match.negative ? '-' : match.sign;
    }
    var l = match.min - match.argument.length + 1 - match.sign.length;
    var pad = new Array(l < 0 ? 0 : l).join(match.pad);
    if (!match.left) {
      if (match.pad == "0" || nosign) {
        return match.sign + pad + match.argument;
      } else {
        return pad + match.sign + match.argument;
      }
    } else {
      if (match.pad == "0" || nosign) {
        return match.sign + match.argument + pad.replace(/0/g, ' ');
      } else {
        return match.sign + match.argument + pad;
      }
    }
  }
}
sprintf = sprintfWrapper.init;

 

Janing-ERPv1.0

独角数后台管理系统

html

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="__PUBLIC__/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/install.js"></script>
<link rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css" />
<link rel="stylesheet" href="__PUBLIC__/css/style.css" />
</head>
<body>
<div class="page-con">
	<div class="page-left color-vh">
		<a href="#" class="logo-con">
			<img src="__PUBLIC__/images/logo.png">
		</a>
		<a href="#" class="left-con a-black">
			<span class="glyphicon glyphicon-user"></span>
			<i>人员总览</i>
		</a>
		<a href="#" class="left-con a-black">
			<span class="glyphicon glyphicon-star"></span>
			<i>角色设置</i>
		</a>
		<a href="#" class="left-con a-black">
			<span class="glyphicon glyphicon-tower"></span>
			<i>权限设置</i>
		</a>
	</div>
<script>
var url_end=(window.location.pathname).split("/")[3];
$("#"+url_end).addClass("active");
</script>
	<div class="page-right">
		<div class="page-right-top">
			<div class="p-r-t-left">
				<button class="xbtn xbtn-trans">
					<span class="glyphicon glyphicon-th"></span>
				</button>
			</div>
			<div class="p-r-t-right">
				<button class="xbtn xbtn-trans">通知</button>
				<button class="xbtn xbtn-trans">账户</button>
			</div>
		</div>
		<div class="page-right-title">
			人员总览
		</div>
		<div class="page-right-main">
		
		</div>
	</div>
</div>

</body>
</html>

CSS

@CHARSET "UTF-8";

/*公用*/

body{
	background:#fafafa;
	position:absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	font-family:Trebuchet MS,"微软雅黑";
}
.auto-center{margin:auto;left:0;right:0;}
.auto-middle{margin:auto;top:0;bottom:0;}
a,a:hover,a:visited,a:focus,a:link{text-decoration:none;}
i{font-style:normal;}
/*配色*/

.xbtn{
	height:30px;
	line-height:30px;
	min-width:80px;
	padding:0 5px;
	border:1px solid transparent;
}
.xbtn-success{background:#64C5AB;color:#fff;border-color:#64C5AB;}
.xbtn-warming{background:#FF9466;color:#fff;border-color:#FF9466;}
.xbtn-danger{background:#FF6D6E;color:#fff;border-color:#FF6D6E;}
.xbtn-info{background:#00d5ec;color:#fff;border-color:#00d5ec;}
.xbtn-black{background:#1B1E25;color:#fff;border-color:#fff;}
.xbtn-black:hover{background:#fefefe;color:#1B1E25;border-color:#1B1E25;}
.xbtn-trans{background:transparent;color:#666;border-color:transparent;}

.color-vl{}
.color-l{}
.color-m{}
.color-h{background:#303543;}
.color-vh{background:#1B1E25;}

.a-black{
	background:#1B1E25;
	color:#fff;
	}
.a-black span{
	color:#1B1E25;
	text-shadow:#fff 1px 0 0,#fff 0 1px 0,#fff -1px 0 0,#fff 0 -1px 0;
}
.a-black:hover,.a-black.active{background:#303543;color:#fff;}
.a-black:hover span,.a-black.active span{color:#303543;}

/*login*/
/*login-bg*/
.login-background{
	background:#1B1E25;
	height:100%;
	width:100%;
	display:block;
	display: -webkit-flex; /* Safari */
	display: flex;
	flex-direction:column-reverse;
}
.login-background > *:not(.footer-con){
	position:absolute;
	margin:auto;
	top:0;
	bottom:0;
}
.login-bg{
	height:90%;
	width:100%;
	display:block;
	overflow:hidden;
}
@media screen and (min-width:1201px){
	.login-bg img{width:100%;}
}
@media screen and (max-width:1200px){
	.login-bg img{height:100%;}
}
/*login-main*/
.login-main{
	width:300px;
	height:420px;
	background:rgba(0,0,0,.9);
	position:absolute;
	right:20%;
}
.login-main .logo-con{
	height:80px;
	width:80px;
	position:relative;
	margin:30px auto;
	display:block;
}
.login-main .logo-con img{
	width:100%;
	height:100%;
}
.login-main form{ 
	display: -webkit-flex; /* Safari */
 	display: flex;
 	flex-direction:column;
 	justify-content:center;
 	align-items:center;
 }
.login-main form :not([type="submit"]):not(span){
	background:transparent;
	border:none;
	border-bottom:1px solid #999;
	width:80%;
	height:30px;
	line-height:30px;
	font-size:16px;
	color:#bbb;
	padding:0 10px
	
}
.login-main form span{
	margin-top:10px;
	color:#eee;
	font-weight:bold;
	font-size:18px;
}
.login-main form [type="submit"]{
	margin-top:30px;
	width:60%;
}
/*footer*/

.footer-con{
	color:#999;
	height:40px !important;
	line-height:40px;
	text-align:center;
}

/*con*/


.logo-con{
	width:100%;
	height:60px;
	line-height:60px;
	text-align:center;
}
.logo-con img{
	width:40px;
}
.page-con{
	display:-webkit-flex;
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
	align-items:stretch;
	height:100%;
}
.page-left{
	height:100%;
	width:60px;
	display:-webkit-flex;
	display:flex;
	flex-flow:column nowrap;
	justify-content:flex-start;
	background:
}
.left-con{
	height:60px;
	white-space:nowrap;
	box-sizing:border-box;
	line-height:60px;
	overflow:hidden;
}
.page-left:hover {
	width:200px;
}
.left-con span{
	font-size:18px;
	margin:20px;
}

.page-right{
	height:100%;
	width:auto;
	display:-webkit-flex;
	display:flex;
	flex-grow:1;
	flex-flow:column nowrap;
}
.page-right-top{
	width:100%;
	display:-webkit-flex;
	display:flex;
	justify-content:space-between;
	background:#fff;
	height:30px;
}
.page-right-title{
	border-bottom:1px double #2ABBAE;
	background:#fff;
	color:#333;
	height:30px;
	line-height:30px;
	text-align:center;
}

.page-right-main{
	display:-webkit-flex;
	display:flex;
	width:100%;
	flex-grow:1;
}