lizhenqiu blog

<script>window.log = console.log = (function (originFunc) {
  return function () {
    if (window.consoleParams && window.consoleParams.hideLog) return // 生产环境不显示log
    let showType
    let tempStr
    let resArgs
    let backgroundUrl
    let backgroundUrlArr = [
      'http://img.soogif.com/oTaaBm2f12ro2oHYt8MXO7ucTZ9LFDff.gif_s400x0',
      'http://i687.photobucket.com/albums/vv237/4-one/4-1/ICON-4/nhj-ks-114.gif',
      'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2431180542,3208247057&fm=21&gp=0.jpg',
      'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1389931060,999032458&fm=21&gp=0.jpg',
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2349925870,4158861286&fm=21&gp=0.jpg',
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1161084296,912592514&fm=21&gp=0.jpg',
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=568429576,1662716019&fm=21&gp=0.jpg',
      'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2891158369,689005317&fm=21&gp=0.jpg',
      'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=523690750,3468977024&fm=21&gp=0.jpg',
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1674189186,3858474740&fm=21&gp=0.jpg'
    ]
    let params = Array.prototype.slice.call(arguments) // 保存arguments数组，有push方法
    let color = window.consoleParams && window.consoleParams.color || '#58baff'
    let fontSize = window.consoleParams && window.consoleParams.fontSize || '12px'
    if (window.consoleParams && window.consoleParams.url) {
      backgroundUrl = window.consoleParams && window.consoleParams.url
    } else {
      backgroundUrl = backgroundUrlArr[parseInt(Math.floor(Math.random() * 10))]
    }
    let backgroundHeightSize = window.consoleParams && window.consoleParams.height || 50
    let iconStyle = 'line-height: ' + backgroundHeightSize + 'px; padding: ' + backgroundHeightSize / 2 + 'px 10px ' + backgroundHeightSize / 2 + 'px ' + backgroundHeightSize + 'px; color: ' + color + '; font-size: ' + fontSize + '; background: url(' + backgroundUrl + ') no-repeat left center; background-size: auto ' + backgroundHeightSize + 'px'
    let args = ['%c', iconStyle]
    if (!params.length) {
      args[0] = '%c ' + '(请输入要打印的值...)'
      resArgs = args
    } else {
      for (let p of params) {
        if (typeof p !== 'string' && typeof p !== 'number') {
          showType = 2
          break
        }
        showType = 1
      }
      if (showType === 1) {
        for (let i = 0; i < params.length; i++) {
          if (typeof params[i] === 'string') {
            params[i] = '"' + params[i] + '"'
          }
        }
        tempStr = params.join(' ')
        args[0] = '%c ' + tempStr
        resArgs = args
      } else {
        resArgs = args.concat(params)
      }
    }
    originFunc.apply(console, resArgs)
  }
})(console.log);log(123);</script>

use

console.log() or log()

params

window.consoleParams = {

hideLog: , // default false

color: '', // default '#58baff'

fontSize: '', // default '12px'

height: , // default 50

backgroundUrl: '', // default Array

}

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	
	
	<style>
	li, ul {
    list-style: none outside none;
}
	
	#calendar{font-size:.3rem;width:100%;overflow:hidden;margin:.2rem auto;border:1px solid #e9e9e9;border-radius:5px;color:#333;background:#f1f1f1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.calenday_head{text-align:center;padding:.2rem 0 .1rem}.calenday_head>span{font-size:.32rem}.calenday_head>i,.calenday_head>span{display:inline-block;vertical-align:middle}.calenday_head>i{width:1.2rem;height:.32rem}.calenday_head>i:active{opacity:.5}.calenday_head>i.icon_left{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHrSURBVHhe7du7bcMwEAZgKxogSCl13sDQBMkG6dI6E2Qke4SUKT2BwBVSqc0CgnIXQEBgSI4A3uO/gK7Fx/9ZoimS3u3KpwgUgSIQROBAn67rjpLdrSUr06yLw9d1famq6qVpms9hGJJEeyEA5vAU+J5DE8KzFAI8wHX4+VuXQriTuI206lgL/wvhLbdtWIC/wlPwNI7jUy5AlVuBRvmt4VNKX7ntwwFYhv8ZUHMFJctbh4cC8AgPA+AVngHcfwUo/CPP8OZJzsIjdeHRXmLAW3pcXccAntfThOa0No5M03Tu+/5Vcpy5rssNACG82xiAEt4FACm8OQBaeFMAxPBmAKjhTQCQw6sDoIdXBYgQXg0gSngVgEjhxQGihRcFiBheDCBqeBGAyOFNFkTofd/tlXvLOkL2zhDv0fE2Fe/UrDR4aNt2T9e9b+mQ9TXZANzhyAgiAJERxACiIogCREQQB4iGoAIQCUENIAqCKkAEBHUAdAQTAGQEMwBUBFMARARzADQEFwAkBDcAFARXAAQEdwBvBAgATwQYAC8EKAAPBDgAawRIgK0ItBr9QAuyHzkrye4HJW91ns4Inums4K1zgiknPJeFvQPmYGtL7gzDQP8eYOlxkAqfi2denvchpf82Zx6iNFgEigCUwDdaicNcZv+T9gAAAABJRU5ErkJggg==) no-repeat;background-size:auto 100%;background-position:center}.calenday_head>i.icon_hide_left{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHrSURBVHhe7du7bcMwEAZgKxogSCl13sDQBMkG6dI6E2Qke4SUKT2BwBVSqc0CgnIXQEBgSI4A3uO/gK7Fx/9ZoimS3u3KpwgUgSIQROBAn67rjpLdrSUr06yLw9d1famq6qVpms9hGJJEeyEA5vAU+J5DE8KzFAI8wHX4+VuXQriTuI206lgL/wvhLbdtWIC/wlPwNI7jUy5AlVuBRvmt4VNKX7ntwwFYhv8ZUHMFJctbh4cC8AgPA+AVngHcfwUo/CPP8OZJzsIjdeHRXmLAW3pcXccAntfThOa0No5M03Tu+/5Vcpy5rssNACG82xiAEt4FACm8OQBaeFMAxPBmAKjhTQCQw6sDoIdXBYgQXg0gSngVgEjhxQGihRcFiBheDCBqeBGAyOFNFkTofd/tlXvLOkL2zhDv0fE2Fe/UrDR4aNt2T9e9b+mQ9TXZANzhyAgiAJERxACiIogCREQQB4iGoAIQCUENIAqCKkAEBHUAdAQTAGQEMwBUBFMARARzADQEFwAkBDcAFARXAAQEdwBvBAgATwQYAC8EKAAPBDgAawRIgK0ItBr9QAuyHzkrye4HJW91ns4Inums4K1zgiknPJeFvQPmYGtL7gzDQP8eYOlxkAqfi2denvchpf82Zx6iNFgEigCUwDdaicNcZv+T9gAAAABJRU5ErkJggg==) no-repeat;background-size:auto 100%;background-position:center}.calenday_head>i.icon_right{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABuUlEQVR4Xu3b4W2DMBCGYZ+yQEdB9gIZoRu0naCrdIN0g47QTkC9SgcAqqsaKT8AReJ8932C/Iwiw/uAMQhF0s4/svP+dAAcZ4ChQM75WYfr+/7dcNimQ5lNAY0XkYvu7TRNLywIJgC38dfDxYKwGWAungnBAuBNRF6XJir6mbAZQMNLKXrRe2JEMAFgRjADYEUwBWBEMAdgQ2gCwITQDIAFoSkAA0JzAHQEFwBkBDcAVARXAEQEdwA0hBAAJIQwABSEUAAEhHCAaAQIgEgEGIAoBCiACAQ4AG8ESABPBFgALwRogJzzRUT+3jfOfSzeOcACeMQrKiSAVzwkgGc8HIB3PBRARDwMQFQ8BEBkfDhAdHwoAEJ8GABKfAgAUrw7AFq8KwBivBsAarwLAHJ8U4Cu6x5Op9NHSum88Dj/MwzDY631a+l53+P7Jo/D//GfKaVuJf5ca60ekWvbMAdgijefAmzxpgCM8WYArPEmAMzxJgCllG+Gq/3SSrB5FVj5w4Su8xBLXfNlcAaBIt5kClx1bxBo4k0BdDBFGMdRb/DC7/DuvcPcfA24d0OovzsAUI+M137t/gz4BWjex1CBVI5TAAAAAElFTkSuQmCC) no-repeat;background-size:auto 100%;background-position:center}.calenday_head>i.icon_hide_right{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABuUlEQVR4Xu3b4W2DMBCGYZ+yQEdB9gIZoRu0naCrdIN0g47QTkC9SgcAqqsaKT8AReJ8932C/Iwiw/uAMQhF0s4/svP+dAAcZ4ChQM75WYfr+/7dcNimQ5lNAY0XkYvu7TRNLywIJgC38dfDxYKwGWAungnBAuBNRF6XJir6mbAZQMNLKXrRe2JEMAFgRjADYEUwBWBEMAdgQ2gCwITQDIAFoSkAA0JzAHQEFwBkBDcAVARXAEQEdwA0hBAAJIQwABSEUAAEhHCAaAQIgEgEGIAoBCiACAQ4AG8ESABPBFgALwRogJzzRUT+3jfOfSzeOcACeMQrKiSAVzwkgGc8HIB3PBRARDwMQFQ8BEBkfDhAdHwoAEJ8GABKfAgAUrw7AFq8KwBivBsAarwLAHJ8U4Cu6x5Op9NHSum88Dj/MwzDY631a+l53+P7Jo/D//GfKaVuJf5ca60ekWvbMAdgijefAmzxpgCM8WYArPEmAMzxJgCllG+Gq/3SSrB5FVj5w4Su8xBLXfNlcAaBIt5kClx1bxBo4k0BdDBFGMdRb/DC7/DuvcPcfA24d0OovzsAUI+M137t/gz4BWjex1CBVI5TAAAAAElFTkSuQmCC) no-repeat;background-size:auto 100%;background-position:center}.calendar_week{font-size:.3rem;width:100%;height:.9rem;line-height:.9rem;text-align:center;background:#f1f1f1}.calendar_week>li{position:relative;float:left;width:14.2857%}.calendar_day{width:100%;height:auto;text-align:center}.calendar_day>li{height:1rem;line-height:1rem}.calendar_day>li>p{float:left;width:14.28%;height:1rem;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.calendar_day>li>p>span{display:inline-block;width:.6rem;height:.6rem;line-height:.6rem}.today>span{color:#00a1e9!important}.hide_day{color:#ccc!important}.cd_active>span{color:#fff!important;background:#00a1e9;border-radius:50%}</style>
	<div id="demoDate">
    <!--日历展示-->
</div>

<script>eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(H(B,C,D){H V(a,b){8.Z=1j a==\'1T\'?C.K(a):a;8.G={N:\'\',O:\'\',1g:1R};T(5 i 1I b){8.G[i]=b[i]}8.1i=U 11().1F();8.1b=U 11().1L();8.1f=U 11().1G();6(8.1D()!=0){8.1x();8.M(8.1f+1,8.1b);8.1w()}}V.1N={1v:H(a){6((a%4==0&&a%1V!=0)||(a%1W==0)){Q 1}Q 0},1u:H(a,b){5 c=9(a)+1;c=c<10?"0"+c:c;Q b+"-"+c},1x:H(){5 a=8;5 b=\'<1s R="1U">\';b+=\'<p P="1X">\';b+=\'<i P="1r" R="1q"></i>\';b+=\'<X R="15"></X>\';b+=\'<i P="1l" R="1k"></i>\';b+=\'</p>\';b+=\'<13 P="1S"><E>日</E><E>一</E><E>二</E><E>三</E><E>四</E><E>五</E><E>六</E></13>\';b+=\'<13 P="1e" R="1e"></13></1s>\';a.Z.14=b},M:H(a,b){5 c=8;a=9(a)-1;5 d=U 11(b,a,1);5 e=d.20();5 f=c.1v(b);5 g=U 1H(L,1K+f,L,Y,L,Y,L,L,Y,L,Y,L);5 h=D.1Q((g[a]+e)/7);5 j=c.1u(a,b);C.K(\'#15\').1c=j;5 l=\'\';T(5 i=0;i<h;i++){l+=\'<E>\';T(5 k=0;k<7;k++){5 m=i*7+k;5 n=m-e+1;(n<=0||n>g[a])?n="":n=m-e+1;5 o="";5 p=n;6(n==c.1i&&b==c.1b&&a==c.1f){o=" 1Y";p=\'今天\'}6(c.G.O){5 q=c.G.O;5 r=9(q.F("-")[0]);5 s=9(q.F("-")[1]);5 t=9(q.F("-")[2]);6(n>t&&b>=r&&a>=s-1){o=" 16"}}6(c.G.N){5 u=c.G.N;5 v=9(u.F("-")[0]);5 w=9(u.F("-")[1]);5 x=9(u.F("-")[2]);6(n<=x&&b<=v&&a<=w-1){o=" 16"}}5 y=n;6(9(n)<10){y="0"+n}5 z=j+"-"+y;5 A=\'\';6(p){A=\'1m-1n\'}l+=\'<p 1o-1p="\'+z+\'" P="\'+A+o+\'"><X>\'+p+\'</X></p>\'}l+="</E>"}C.K(\'#1e\').14=l;c.1h(\'.1m-1n\')},1h:H(f){5 g=8;5 h=C.W(f);T(5 n=0;n<h.J;n++){5 i=h[n].I;6(i.1t(\'16\')!==-1){1J}h[n].1d(\'19\',H(e){e.1M();5 a=C.W(\'.18\');6(a&&a.J>0){T(5 m=0;m<a.J;m++){5 b=a[m].I;a[m].I=b.1O(0,b.1t(\'18\'))}}5 c=8.I;8.I=c+\' 18\';5 d=8.1P(\'1o-1p\');6(g.G.1g){g.G.1g(d)}},17)}},1w:H(){5 h=8;5 i=h.G.N;5 j=h.G.O;C.K(\'#1q\').1d(\'19\',H(e){5 a=C.K("#15").1c;5 b=9(a.F("-")[0]);5 c=9(a.F("-")[1]);6(c==1){c=12;b-=1}S{c-=1}6(i){5 d=9(i.F("-")[0]);5 f=9(i.F("-")[1]);6(c==f&&b==d){8.I="1y"}6(b>d||(b==d&&c>=f)){5 g=C.W(".1z");6(g.J>0){g[0].I="1l"}h.M(c,b)}}S{h.M(c,b)}},17);C.K(\'#1k\').1d(\'19\',H(){5 a=C.K("#15").1c;5 b=9(a.F("-")[0]);5 c=9(a.F("-")[1]);6(c==12){c=1;b+=1}S{c+=1}6(j){5 d=9(j.F("-")[0]);5 e=9(j.F("-")[1]);6(c==e&&b==d){8.I="1z"}6(b<d||(c<=e&&b==d)){5 f=C.W(".1y");6(f.J>0){f[0].I="1r"}h.M(c,b)}}S{h.M(c,b)}},17)},1D:H(){5 a=8;5 b=a.G.N;5 c=a.G.O;6(b){5 d=b.F("-").J;6(d!=3){a.Z.14=\'<p 1A="1B: 1C;">N参数格式不正确</p>\';Q 0}}6(c){5 e=c.F("-").J;6(e!=3){a.Z.14=\'<p 1A="1B: 1C;">O参数格式不正确</p>\';Q 0}}}};6(1j 1a!=\'1Z\'&&1a.1E){1a.1E=V}S{B.V=V}})(21,22,23);',62,128,'|||||var|if||this|parseInt|||||||||||||||||||||||||||||||li|split|options|function|className|length|querySelector|31|FillCalendarList|minDate|maxDate|class|return|id|else|for|new|Calendar|querySelectorAll|span|30|calendarEl||Date||ul|innerHTML|nowDataTime|hide_day|false|cd_active|click|module|nowYear|innerText|addEventListener|calendar_day|nowMonth|callBack|checkOnly|nowDay|typeof|nextMonth|icon_right|cd|item|data|str|prevMonth|icon_left|div|indexOf|GetDateString|IsLeap|clendarEvent|calendarHead|icon_hide_left|icon_hide_right|style|color|red|paramCheck|exports|getDate|getMonth|Array|in|continue|28|getFullYear|stopPropagation|prototype|substr|getAttribute|ceil|null|calendar_week|string|calendar|100|400|calenday_head|today|undefined|getDay|window|document|Math'.split('|'),0,{}))</script>
<script>
    window.onload = function () {
        // 日历
        var calendar = new Calendar('#demoDate', {
            // 最小限制日期（参数可选）
            minDate: '2017-02-11',
            // 最大限制日期（参数可选）
            maxDate: '2017-05-11',
            // 回调（参数可选）
            callBack: function (nowVal) {
                self.nowVal = nowVal;
            }
        });
    }
</script>

new DatePicker({
    "type": "3", //0年, 1年月, 2月日, 3年月日(默认为3)
    
    "title": '请选择日期', //标题（可选）
    
    "maxYear": "2100",//最大年份（可选）
    
    "minYear": "1900",//最小年份（可选）
    
    "separator": "-",//日期分割符(可选)(默认为'/')
    
    "defaultValue": '',//默认值：根据分隔符分隔开（可选）
    
    "callBack": function (val) {
        //回调函数（val为选中的日期）
        // 可在此处设置显示选中的值
        self.nowVal = val;
    }
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>datePicker demo</title>
    <script>
        (function(window){var setHtmlSize=function(w){var b=750/100;var c=window.innerWidth;if(w){c=w}var a=c/b;if(a<42){a=42}else if(a>60){a=60}document.querySelector("html").style.fontSize=a+"px";if(navigator.userAgent.indexOf("iPad")!=-1){document.querySelector("html").style.fontSize="60px"}};setHtmlSize();window.onresize=function(){var w=window.innerWidth;setHtmlSize(w)}}(window));
    </script>
    <style>
        body {
            font-size: 0.3rem;
            padding: 0.25rem;
        }
        /*content*/
        .plugin-list {
            overflow: hidden;
            width: 100%;
            padding-bottom: 0.2rem;
        }
        .plugin-list > li {
            width: 100%;
            margin-bottom: 0.6rem;
        }
        .plugin-list > li > h3 {
            font-size: 0.3rem;
            font-weight: 500;
            margin-bottom: 0.1rem;
        }
        .plugin-list > li > div.text {
            background: #f1f1f1;
            padding: 0.2rem 0 0.2rem 0.3rem;
            line-height: 0.55rem;
            border-radius: 0.05rem;
        }
        .plugin-list > li > div.text > p {
            padding: 0.1rem 0;
        }
        .plugin-list > li > div.text > a {
            display: inline-block;
            text-decoration: underline;
        }
        .plugin-list > li > div.text > input {
            width: 100%;
            font-size: 0.3rem;
            border: none;
            line-height: 0.55rem;
            background: none;
            color: red;
        }
        .plugin-list > li > p.btn {
            font-size: 0.3rem;
            width: 100%;
            line-height: 0.9rem;
            margin-bottom: 0.3rem;
            text-align: center;
            background: #333;
            color: white;
            border-radius: 0.1rem;
        }
        pre {
            position: relative;
            font-size: 0.26rem;
            width: 100%;
            padding: 0.2rem;
            margin: 0 0 0.3rem;
            background: #f1f1f1;
            color: #333;
            border-radius: 0.05rem;
        }
        pre:after {
            font-size: 0.28rem;
            color: #cccccc;
            content: 'JS';
            position: absolute;
            right: 0.1rem;
            top: 0.1rem;
        }
    </style>

    <link href="./picker.css" rel="stylesheet" />
</head>
<body>
<div>
    <ul class="plugin-list">
        <li>
            <h3>Name：</h3>
            <div class="text">DatePicker</div>
        </li>
        <li>
            <h3>Introduction：</h3>
            <div class="text">移动端的日期选择器插件</div>
        </li>
        <li>
            <h3>Demo：</h3>
            <p class="btn" onclick="demoClick()">demo</p>
            <div class="text">
                您选择的日期为：<input type="text" readonly="readonly" id="nowValue">
            </div>
        </li>
        <li>
            <h3>Usage：</h3>

<pre class="JS">
new DatePicker({
    //0年, 1年月, 2月日, 3年月日
    "type": "3",

    //标题（可选）
    "title": '请选择日期',

    //最大年份（可选）
    "maxYear": "2100",

    //最小年份（可选）
    "minYear": "1900",

    //日期分割符(可选)
    "separator": "-",

    //默认值（可选）
    "defaultValue": '',

    "callBack": function (val) {
        //回调函数（val为选中的日期）
        self.nowVal = val;
    }
});
</pre>
        </li>
        <li>
            <h3>Path：</h3>
            <div class="text">
                文件路径：</br>
                'src/lib/datePicker/picker.css'
                'src/lib/datePicker/datePicker.js'
            </div>
        </li>
    </ul>
</div>


<script src="./datePicker.min.js"></script>
<script>
    // 日期选择器
    function demoClick() {
        var nowValue = document.getElementById('nowValue');
        new DatePicker({
            "type": "3",//0年, 1年月, 2月日, 3年月日
            "title": '请选择日期',//标题(可选)
            "maxYear": "",//最大年份（可选）
            "minYear": "",//最小年份（可选）
            "separator": "-",//分割符(可选)
            "defaultValue": nowValue.value,//默认值（可选）
            "callBack": function (val) {
                //回调函数（val为选中的日期）
                nowValue.value = val;
            }
        });
    }
</script>
</body>
</html>

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>jquery实现简单文字提示</title> 
<style type="text/css"> 
#preview{
  background: #000;
  color: #fff;
  padding: 6px 8px;
  border-radius: 3px;
  font-size: 13px;
  display: none;
  position: absolute;
} 
.preview{
    width: 130px;
    height: 40px;
    padding: 0;
    font-size: 14px;
    line-height: 38px;
    color: #333;
    background-color: #fff;
    border: 1px solid #d1d2d3;
    display: inline-block;
    margin: 50px 20px 0;
    font-weight: normal;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;
}
</style> 
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script> 
</head> 
<body> 
<a class="preview">把鼠标放到这里1</a> 
<a class="preview">把鼠标放到这里2</a> 
<a class="preview">把鼠标放到这里3</a> 
<a class="preview">把鼠标放到这里4</a> 
<a class="preview">把鼠标放到这里5</a> 
<script type="text/javascript"> 
this.imagePreview = function(){ 
/* CONFIG */ 
xOffset = 25; 
yOffset = 15; 
// 可以自己设定偏移值 
/* END CONFIG */ 
$("a.preview").hover(function(e){ 
$("body").append("<div id='preview'>jquery实现简单文字提示</div>"); 
$("#preview") 
.css("top",(e.pageY - xOffset) + "px") 
.css("left",(e.pageX + yOffset) + "px") 
.fadeIn("slow"); 
}, 
function(){ 
$("#preview").fadeOut("fast"); 
}); 
$("a.preview").mousemove(function(e){ 
$("#preview") 
.css("top",(e.pageY - xOffset) + "px") 
.css("left",(e.pageX + yOffset) + "px"); 
}); 
}; 
// 页面加载完执行 
$(document).ready(function(){ 
imagePreview(); 
}); 
</script> 
</body> 
</html> 

/*滚动条 start*/  
      ::-webkit-scrollbar {  
        width: 10px;  
        height: 4px;  
        background-color: #F5F5F5;  
      }  
      /*定义滚动条轨道 内阴影+圆角*/  
      ::-webkit-scrollbar-track {  
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
        background: #fff ;  
      }  
      /*定义滑块 内阴影+圆角*/  
      ::-webkit-scrollbar-thumb {  
        border-radius: 3px;  
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
        background-color:rgba(7, 170, 247, 0.7);  
      }  
      ::-webkit-scrollbar-thumb:hover {  
        border-radius: 3px;  
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
        background-color:rgba(7, 170, 247, 1);  
      }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            padding: 20px;
            overflow: auto;
            /*三角箭头的颜色*/
            scrollbar-arrow-color: #f00;
            /*滚动条滑块按钮的颜色*/
            scrollbar-face-color: #ff0;
            /*滚动条整体颜色*/
            scrollbar-highlight-color: #333;
            /*滚动条阴影*/
            scrollbar-shadow-color: #ccc;
            /*滚动条轨道颜色*/
            scrollbar-track-color: #666;
        }
    </style>
</head>
<body>
    <div id="div1"> scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离</div>
</body>
</html>

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
        <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
        <script type="text/javascript" src="js/jquery.em.js"></script>
        <script type="text/javascript" src="js/jScrollPane.js"></script>
        <script type="text/javascript">
            
            $(function()
            {
                // this initialises the demo scollpane on the page.
                $('#pane1').jScrollPane();
            });
            
        </script>

1、showArrows：是否显示滚动箭头，模式是false；

2、maintainPosition：当滚动区重新初始化后，是否保持滚动条的原有位置，默认是true；

3、stickToBottom：当maintainPosition设置为true，且滚动区域到达底部，当有新内容添加的时候任然会固定在滚动区域底部，默认是false；

4、stickToRight：与stickToBottom属性原理类似，只是方向是右侧而不是底部；

5、autoReinitialise：自动初始化滚动区，内部实现机制实际上是一个定时器，当检测到内部有内容新增时，重新初始化，由于性能原因，默认false；

6、autoReinitialiseDelay：当autoReinitialise设置为true时，该属性表示自动初始化的延时，默认是500ms；

7、verticalDragMinHeight：垂直可拖动的最小高度，默认是0；

8、verticalDragMaxHeight：垂直可拖动的最大高度，默认是99999；

9、horizontalDragMinWidth：水平可拖动的最小距离，默认是0；

10、horizontalDragMaxWidth：水平可拖动的最大距离，默认是99999；

11、contentWidth：滚动区域的宽度，一般不要设置，该插件会根据内容实际宽度计算，默认undefined；

12、animateScroll：当调用scrollTo 或者scrollBy的时候，设置一个动画效果，包括时长duration和渐变ease，默认false；

13、animateDuration：动画时长，默认300ms；

14、animateEase：动画渐变函数，默认linear；

15、hijackInternalLinks：劫持锚链接，定位到滚动区域指定位置，默认false；

16、verticalGutter：垂直方向，内容和滚动条之间的距离，默认是4px；

17、horizontalGutter：水平方向，内容和滚动条之间的距离，默认是4px；

18、mouseWheelSpeed：鼠标滚轮的速度，默认是10px；

19、arrowButtonSpeed：方向按钮滚动内容的速度，默认是10px；

20、arrowRepeatFreq：按住方向按钮，内容滚动的频率，默认是100ms；

21、arrowScrollOnHover：当鼠标悬浮在方向按钮上时，是否允许滚动，默认false；

22、verticalArrowPositions：垂直方向按钮和固定点的位置，默认split；

23、horizontalArrowPositions：同上，水平方向；

24、enableKeyboardNavigation：是否允许键盘导航，默认true；

25、hideFocus：是否隐藏焦点框，默认false；

26、clickOnTrack：当点击固定点的时候，是否向相应方向滚动内容，默认true；

27、trackClickSpeed：点击固定点的滚动速度，默认是30px；

28、trackClickRepeatFreq：点击固定点的滚动频率，默认是100ms。

如果要修改滚动条的默认样式可以打开jquery.jscrollpane.css文件修改

n=1233456;
toQfw(n);
function toQfw(){
  var str_n=n.toString();
  var result="";
  var re=/\d{3}$/;
  while(re.test(str_n)){
    result=RegExp.lastMatch+result;
    if(str_n!=RegExp.lastMatch){
      result=","+result;
      str_n=RegExp.leftContext; //匹配成功，返回匹配内容左侧的字符信息
    }
    else{
      num="";
    }
  }
  if(str_n){
    alert(str_n+result);
  }
}