bootstrap-datetimepicker 汉化

//先增加汉化设置
$.fn.datetimepicker.dates['zh'] = {
                days:       ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],
                daysShort:  ["日", "一", "二", "三", "四", "五", "六","日"],
                daysMin:    ["日", "一", "二", "三", "四", "五", "六","日"],
                months:     ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],
                monthsShort:  ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
                meridiem:    ["上午", "下午"],
                //suffix:      ["st", "nd", "rd", "th"],
                today:       "今天"
        };

//然后修改语言为zh
  $(value).datetimepicker({
      format: 'yyyy-mm-dd hh:ii',
      minView: 1,
      autoclose: true,
      language: "zh"
  });

 

【css公用库】弹窗

css

/*===========================================弹出表单式弹窗*/
.popur-bg{/*渐变背景*/
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background:rgba(0,0,0,.2);
	transition: all 0.4s ease-in-out 0s;
    display: flex;
    justify-content: center;
    align-items: center;
}
.popur-bg:hover{
	background:rgba(0,0,0,.4);
}
.popur-form{/*表框外形*/
	width:80%;
	height:70%;
	background:#fff;
	display: flex;
	flex-flow:column nowrap;
	align-items:center;
    justify-content: space-between;
}
.popur-form:hover {/*表框外形*/
    box-sizing: inherit;
}
.popur-form-m{
	max-height:70%;
}
.popur-form-sm{
	min-height:150px;
}
.popur-form-lg{
	width:100%;
	height:100%;
}
.popur-form-lg .popur-form-body{
	max-height:80% !important;
}
.popur-form-title{
	line-height:40px;
	font-size:18px;
	width:80%;
	text-align:center;
	border-bottom:1px solid #2ABBAE;
	margin-bottom:10px;
}
.popur-form-body{
	width:100%;
	max-height:70%;
	display:flex;
	flex-grow:2;
    flex-flow: column nowrap;
    align-items: center;
    overflow-y:auto;
}
.popur-form-body p{
	color:#999;
}
.p-f-b-tr{
	width:80%;
	display:flex;
    flex-flow: column nowrap;
    flex:none;
}
.p-f-b-tr > p{
	width: 100%;
    text-align: center;
    margin: 3px 0;
    display:flex;
    align-items:center;
    font-size:0.6em;
}
.p-f-b-tr > :not(p){
	width:100%;
}
.p-f-b-tr [type=text],.p-f-b-tr [type=number]{
	border:none;
	border-bottom:1px solid #838da5;
}
.popur-form-footer{
	margin:10px 0;
	width:100%;
	display:flex;
	justify-content:space-around;
	flex-shrink:0
}

 

js

/*===========================================通用弹窗-表单型(需要printf)*/
/*var trans={"t_id":["系统ID","text"],
			           "t_loginname":["用户名","input"],
			           "t_password":["密码","input"],
			           "t_name":["姓名","input"],
			           "t_tel":["手机号码","input"],
			           "t_email":["E-mail","input"],
			           "t_status":["账号状态","switch"],
			           "t_note":["Note","input"],
			           "t_last_login_time":["上次登陆时间","text"],
			           "t_login_ip":["IP","text"]

			           };
			var Jalert_body_str="";
			var Jalert_body=datacache.map(function(e,index){
				if(e['t_id']==itid){
					for(var value in trans){
						var filter = (e[value]==null)?"":e[value];
						Jalert_body_str+=Jtable_td(trans[value][1],trans[value][0],value,filter,roleSelectArr);
					}
				}
			});
			var Jalert_footer=
				"<button type='button' class='xbtn xbtn-white' onclick='Jalert_close(this)'>"+
					"关闭"+
				"</button>";
			$("body").append(Jalert('详情',Jalert_body_str,Jalert_footer,'m'));
 * */
var pupur_str=("<div class='popur-bg'>"+
	"<div class='popur-form popur-form-{3}'>"+
		"<div class='popur-form-title'>{0}</div>"+
		"<div class='popur-form-body'>"+
		"{1}"+
		"</div>"+
		"<div class='popur-form-footer'>"+
			"{2}"+
		"</div>"+
	"</div>"+
"</div>");
function Jalert(tit,body,foot,type){
	type=(typeof(type)=="undefined")?"m":type;

	return printf(pupur_str,tit,body,foot,type);

}
function Jalert_close(even){
	$(".popur-bg").remove();
	$("body").css("overflow","auto");
}
function BodyNoScoller(){
	document.querySelector('.popur-bg').addEventListener('touchmove',function(e){
        document.body.style.overflow = 'hidden';
    },false);
}
/*===========================================表格内容生成*/
function Jtable_td(type,title,envalue,value,addition){
	var con;
	var value=(value==""||value==null||typeof(value)=="undefined")?" ":value;
	switch (type){
	case "select":
		con="<div class='p-f-b-tr'>"+
		"<p>"+title+"</p>"+
		"<select name='"+envalue+"' class='"+envalue+"'>";
		for(var jvalue in addition){
			con+=("<option rowx_index='"+jvalue+"' "+
					((addition[jvalue]==envalue)?"selected":"")+">"+
					addition[jvalue]+
					"</option>");
		}
		con+="</select></div>"
		break;
	case "input":
		con="<div class='p-f-b-tr'>"+
			"<p>"+title+"</p>"+
			"<input type='text' name='"+envalue+"' class='"+envalue+"' value='"+value+"'></div>";
		break;
	case "number":
		con="<div class='p-f-b-tr'>"+
		"<p>"+title+"</p>"+
		"<input type='number' name='"+envalue+"' class='"+envalue+"' value='"+value+"'></div>";
		break;
	case "textarea":
		con="<div class='p-f-b-tr'>"+
		"<p>"+title+"</p>"+
		"<textarea  class='"+envalue+"' name='"+envalue+"' value='"+value+"'></textarea></div>";
		break;
	case "switch":
		value=(value=="")?"1":value;
		con="<div class='p-f-b-tr'>"+
		"<p>"+title+"</p>"+
		"<p>"+
		"<button class='switch "+((value==1)?"switch-on":"")+" "+envalue+"' statu='"+value+"' onclick='switch_change(this)'>"+
		"<i class='switch-btn'></i><p>"+((value==1)?"正常":"关闭")+"</p>"+
		"</button></p></div>"
		break;
	default:
		con="<div class='p-f-b-tr'>"+
			"<p>"+title+"</p>"+
			"<span class='"+envalue+"' name='"+envalue+"'>"+value+"</span></div>"
		break;
	}

	return con;
};
/*===========================================简单实现printf功能*/
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;
}

 

(function(){})() 立即执行函数(匿名函数)

来源:【知乎-前端学习指南】方应杭-https://zhuanlan.zhihu.com/p/22465092

什么是立即执行函数

/*先创建匿名函数,然后立即进行调用。
*/
function(){alert('我是匿名函数')}()

 

例题,为什么点击打印出来的都是6

/*
*/
var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
  liList[i].onclick = function(){
    alert(i) // 为什么 alert 出来的总是 6,而不是 0、1、2、3、4、5
  }
}

因为此处,i的值是全局变量,并没有单独为每个li赋值i。

而使用立即执行函数,可避免变量污染。

/*
*/
var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
  !function(ii){
    liList[ii].onclick = function(){
      alert(ii) // 0、1、2、3、4、5
    }
  }(i)
}

 

 

java jq 跨域问题、Json数据传递 【Access-Control-Allow-Origin】

来源:http://yuxisanren.iteye.com/blog/2019666

Java服务器端

/*
*java
*coder:宝贤
*/
 String callback = request.getParameter("jsonpCallback");  
		String result = callback + "(" +output+ ")";  
		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		
		response.addHeader("Access-Control-Allow-Origin","*");//'*'表示允许所有域名访问,可以设置为指定域名访问,多个域名中间用','隔开
		
		if("IE".equals(request.getParameter("type"))){
	           response.addHeader("XDomainRequestAllowed","1");
	       }
	       out.print("success");
	       
		out.print(result);
		out.close();

前端Js

/*
*js
*coder:janing
*/

url="http://xxxxxx/Pay2/View2.java";
_post="";
$.ajax({
  "url" : url,
  "type":"post",
  "data":_post,
  "success":function(ret){
    console.log($.parseJSON(ret));
  }
})

 

监测鼠标滚轴动作

/*
*/
<label for="wheelDelta"> 滚动值:</label>(IE/Opera)<input id="wheelDelta" type="text" />

<label for="detail"> 滚动值:(Firefox)</label><input id="detail" type="text" />

<script type="text/javascript">
     var oTxt=document.getElementById("txt");
    /***********************
    * 函数:判断滚轮滚动方向
    * 作者:walkingp
    * 参数:event
    * 返回:滚轮方向 1:向上 -1:向下
    *************************/
    var scrollFunc=function(e){
        var direct=0;
        e=e || window.event;

        var t1=document.getElementById("wheelDelta");
        var t2=document.getElementById("detail");
        if(e.wheelDelta){//IE/Opera/Chrome
            t1.value=e.wheelDelta;
        }else if(e.detail){//Firefox
            t2.value=e.detail;
        }
        ScrollText(direct);
    }
    /*注册事件*/
    if(document.addEventListener){
        document.addEventListener('DOMMouseScroll',scrollFunc,false);
    }//W3C
    document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
    </script>

 

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;