1 Star 0 Fork 0

zw95cn/mockjsSimpleTools

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
mock.html 47.35 KB
一键复制 编辑 原始数据 按行查看 历史
曾巍 提交于 2022-12-06 15:16 . 修改目录结构
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095
<!DOCTYPE html>
<html>
<!--
* 此
*
*
-->
<head>
<meta charset="utf-8">
<script src="ace/ace.js"></script>
<script src="ace/ext-language_tools.js"></script>
<script src="ace/ext-searchbox.js"></script>
<script src="mockjs/mock.js"></script>
</head>
<style>
body{
background-color: #272822;
}
.test_box{
min-width: 400px;
height:53rem;
display: flex;
}
#msgback {
text-align: center;
font-size: 16px;
line-height: 50px;
color: #eee;
position:fixed;
border-radius: 5px;
pointer-events: none;
left:35%;
width: 8%;
top:1%;
height: 50px;
z-index: 999;
}
.btn{
margin-bottom: 5px;
background-color: #888888;
color:white;
width: 180px;
height: 35px;
border:0;
font-size: 13px;
border-radius: 5px;
}
.btn:hover{
opacity: 0.7;
}
#ul_id{
padding-top: -10px;
padding-left: 0px;
padding-right: 5px;
list-style-type: none;
height: 68%;
width: 200px;
overflow-y:scroll;
}
#ul_id2{
padding-left: 0px;
padding-right: 0px;
list-style-type: none;
width: 200px;
overflow-y:scroll;
}
ul#ul_id2 .li div .value code{
height:1px;
display: flex;
flex-direction: column-reverse;
}
::-webkit-scrollbar-track {
opacity: 0
}
::-webkit-scrollbar {
width: 3px;
}
::-webkit-scrollbar-thumb {
background-color: #636363;
opacity: 30%;
border-radius: 3px;
}
.li{
width: 180px;
padding-left: 10px;
background-position: 0 0;
background-size: 1.6rem 1.6rem;
background-repeat: no-repeat;
}
.name{
font-size: 14px;
font-family: Consolas, "微软雅黑";
}
.codeItem{
font-family: Consolas, "微软雅黑";
color: #ffffff;
background-color: #666666;
border-radius: 4px;
padding: 10px;
font-size: 14px;
}
.codeItem:hover{
color: #ffffff;
background-color: #4c4c4c;
}
.codeItem:active{
color: #ffffff;
background-color: #363636;
}
.codeItem2{
font-family: Consolas, "微软雅黑";
color: #ffffff;
background-color: #f6c428;
border-radius: 4px;
padding: 10px;
font-size: 14px;
}
.codeItem2:hover{
color: #ffffff;
background-color: #dea90a;
}
.codeItem2:active{
color: #ffffff;
background-color: #af8607;
}
code{
white-space:pre;
}
a{
text-decoration: none;
color:#00f;
}
.value{
font-size: 14px;
position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;
}
.tip{
font-size: 15px;
font-family: Consolas, "微软雅黑";
display: none;
z-index: 9999;
text-align: left;
}
#input {
font-family: Consolas, "微软雅黑";
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#result {
font-family: Consolas, "微软雅黑";
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<body>
<div class="test_box">
<pre id="input"style="height: 100%;width:45%;" class="ace_editor">
<textarea class="ace_text-input" cssStyle="width:40%;height:320px;">
</textarea></pre>
<div style="height: 600px; width: 200px; border-radius: 5px;">
<!-- <center>-->
<div id="buttonDiv" style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;">
<input id="runbtn" type="button" class="btn" style=" background-color: #3c7de6;" value="执行" onclick="runCode()"/>
<input id="copyAndRunbtn" type="button" class="btn" style="width:90px; background-color: #fe6600;" value="运行结果" onclick="copyAndRun()">
<input id="copybtn" type="button" class="btn" style="width:90px; background-color: #3e7d04;" value="复制结果" onclick="copyResult()"/>
</div>
<!-- </center>-->
<center>
<p style="display:none">
<label style="color:#fff">主题:</label>
<select id="themeSelect" onchange="changeTheme()" style="max-width:132px">
<option value="ambiance">ambiance</option>
<option value="chaos">chaos</option>
<option value="chrome">chrome</option>
<option value="cloud9_day">cloud9_day</option>
<option value="cloud9_night">cloud9_night</option>
<option value="cloud9_night_low_color">cloud9_night_low_color</option>
<option value="clouds">clouds</option>
<option value="clouds_midnight">clouds_midnight</option>
<option value="cobalt">cobalt</option>
<option value="crimson_editor">crimson_editor</option>
<option value="dawn">dawn</option>
<option value="dracula">dracula</option>
<option value="dreamweaver">dreamweaver</option>
<option value="eclipse">eclipse</option>
<option value="github">github</option>
<option value="gob">gob</option>
<option value="gruvbox">gruvbox</option>
<option value="gruvbox_dark_hard">gruvbox_dark_hard</option>
<option value="gruvbox_light_hard">gruvbox_light_hard</option>
<option value="idle_fingers">idle_fingers</option>
<option value="iplastic">iplastic</option>
<option value="katzenmilch">katzenmilch</option>
<option value="kr_theme">kr_theme</option>
<option value="kuroir">kuroir</option>
<option value="merbivore">merbivore</option>
<option value="merbivore_soft" selected="selected">merbivore_soft</option>
<option value="mono_industrial">mono_industrial</option>
<option value="monokai">monokai</option>
<option value="nord_dark">nord_dark</option>
<option value="one_dark">one_dark</option>
<option value="pastel_on_dark">pastel_on_dark</option>
<option value="solarized_dark">solarized_dark</option>
<option value="solarized_light">solarized_light</option>
<option value="sqlserver">sqlserver</option>
<option value="terminal">terminal</option>
<option value="textmate">textmate</option>
<option value="tomorrow">tomorrow</option>
<option value="tomorrow_night">tomorrow_night</option>
<option value="tomorrow_night_blue">tomorrow_night_blue</option>
<option value="tomorrow_night_bright">tomorrow_night_bright</option>
<option value="tomorrow_night_eighties">tomorrow_night_eighties</option>
<option value="twilight">twilight</option>
<option value="vibrant_ink">vibrant_ink</option>
<option value="xcode">xcode</option>
</select>
</p>
<p style="">
<label style="color:#fff">语言:</label>
<select id="resultLangSelect" onchange="changeLang()">
<option value="abap">abap</option>
<option value="abc">abc</option>
<option value="actionscript">actionscript</option>
<option value="ada">ada</option>
<option value="alda">alda</option>
<option value="apache_conf">apache_conf</option>
<option value="apex">apex</option>
<option value="applescript">applescript</option>
<option value="aql">aql</option>
<option value="asciidoc">asciidoc</option>
<option value="asl">asl</option>
<option value="assembly_x86">assembly_x86</option>
<option value="autohotkey">autohotkey</option>
<option value="batchfile">batchfile</option>
<option value="c_cpp">c_cpp</option>
<option value="c9search">c9search</option>
<option value="cirru">cirru</option>
<option value="clojure">clojure</option>
<option value="cobol">cobol</option>
<option value="coffee">coffee</option>
<option value="coldfusion">coldfusion</option>
<option value="crystal">crystal</option>
<option value="csharp">csharp</option>
<option value="csound_document">csound_document</option>
<option value="csound_orchestra">csound_orchestra</option>
<option value="csound_score">csound_score</option>
<option value="csp">csp</option>
<option value="css">css</option>
<option value="curly">curly</option>
<option value="d">d</option>
<option value="dart">dart</option>
<option value="diff">diff</option>
<option value="django">django</option>
<option value="dockerfile">dockerfile</option>
<option value="dot">dot</option>
<option value="drools">drools</option>
<option value="edifact">edifact</option>
<option value="eiffel">eiffel</option>
<option value="elixir">elixir</option>
<option value="elm">elm</option>
<option value="erlang">erlang</option>
<option value="forth">forth</option>
<option value="fortran">fortran</option>
<option value="fsharp">fsharp</option>
<option value="fsl">fsl</option>
<option value="ftl">ftl</option>
<option value="gcode">gcode</option>
<option value="gherkin">gherkin</option>
<option value="gitignore">gitignore</option>
<option value="glsl">glsl</option>
<option value="gobstones">gobstones</option>
<option value="golang">golang</option>
<option value="graphqlschema">graphqlschema</option>
<option value="groovy">groovy</option>
<option value="haml">haml</option>
<option value="handlebars">handlebars</option>
<option value="haskell">haskell</option>
<option value="haskell_cabal">haskell_cabal</option>
<option value="haxe">haxe</option>
<option value="on">on</option>
<option value="html">html</option>
<option value="html_elixir">html_elixir</option>
<option value="html_ruby">html_ruby</option>
<option value="ini">ini</option>
<option value="io">io</option>
<option value="ion">ion</option>
<option value="jack">jack</option>
<option value="jade">jade</option>
<option value="java">java</option>
<option value="javascript">javascript</option>
<option value="modeon">modeon</option>
<option value="modeon5">modeon5</option>
<option value="modeoniq">modeoniq</option>
<option value="modep">modep</option>
<option value="modesm">modesm</option>
<option value="modex">modex</option>
<option value="julia">julia</option>
<option value="kotlin">kotlin</option>
<option value="latex">latex</option>
<option value="latte">latte</option>
<option value="less">less</option>
<option value="liquid">liquid</option>
<option value="lisp">lisp</option>
<option value="livescript">livescript</option>
<option value="logiql">logiql</option>
<option value="logtalk">logtalk</option>
<option value="lsl">lsl</option>
<option value="lua">lua</option>
<option value="luapage">luapage</option>
<option value="lucene">lucene</option>
<option value="makefile">makefile</option>
<option value="markdown">markdown</option>
<option value="mask">mask</option>
<option value="matlab">matlab</option>
<option value="maze">maze</option>
<option value="mediawiki">mediawiki</option>
<option value="mel">mel</option>
<option value="mips">mips</option>
<option value="mixal">mixal</option>
<option value="mushcode">mushcode</option>
<option value="nginx">nginx</option>
<option value="nim">nim</option>
<option value="nix">nix</option>
<option value="nsis">nsis</option>
<option value="nunjucks">nunjucks</option>
<option value="objectivec">objectivec</option>
<option value="ocaml">ocaml</option>
<option value="partiql">partiql</option>
<option value="pascal">pascal</option>
<option value="perl">perl</option>
<option value="php">php</option>
<option value="php_laravel_blade">php_laravel_blade</option>
<option value="pig">pig</option>
<option value="plain_text">plain_text</option>
<option value="powershell">powershell</option>
<option value="praat">praat</option>
<option value="prisma">prisma</option>
<option value="prolog">prolog</option>
<option value="properties">properties</option>
<option value="protobuf">protobuf</option>
<option value="puppet">puppet</option>
<option value="python">python</option>
<option value="qml">qml</option>
<option value="r">r</option>
<option value="raku">raku</option>
<option value="razor">razor</option>
<option value="rdoc">rdoc</option>
<option value="red">red</option>
<option value="redshift">redshift</option>
<option value="rhtml">rhtml</option>
<option value="robot">robot</option>
<option value="rst">rst</option>
<option value="ruby">ruby</option>
<option value="rust">rust</option>
<option value="sac">sac</option>
<option value="sass">sass</option>
<option value="scad">scad</option>
<option value="scala">scala</option>
<option value="scheme">scheme</option>
<option value="scrypt">scrypt</option>
<option value="scss">scss</option>
<option value="sh">sh</option>
<option value="slim">slim</option>
<option value="smarty">smarty</option>
<option value="smithy">smithy</option>
<option value="snippets">snippets</option>
<option value="soy_template">soy_template</option>
<option value="space">space</option>
<option value="sparql">sparql</option>
<option value="sql">sql</option>
<option value="sqlserver">sqlserver</option>
<option value="mysql" selected="selected">mysql</option>
<option value="pgsql">pgsql</option>
<option value="stylus">stylus</option>
<option value="svg">svg</option>
<option value="swift">swift</option>
<option value="tcl">tcl</option>
<option value="terraform">terraform</option>
<option value="tex">tex</option>
<option value="text">text</option>
<option value="textile">textile</option>
<option value="toml">toml</option>
<option value="tsx">tsx</option>
<option value="turtle">turtle</option>
<option value="twig">twig</option>
<option value="typescript">typescript</option>
<option value="vala">vala</option>
<option value="vbscript">vbscript</option>
<option value="velocity">velocity</option>
<option value="verilog">verilog</option>
<option value="vhdl">vhdl</option>
<option value="visualforce">visualforce</option>
<option value="wollok">wollok</option>
<option value="xml">xml</option>
<option value="xquery">xquery</option>
<option value="yaml">yaml</option>
<option value="zeek">zeek</option>
</select>
</p>
</center>
<center><a href="./mockInfo.html" target="_blank"><input type="button" class="btn" style="width:90px; background-color: #3e7d04;" value="MockJs语法"/></a></center>
<ul id="ul_id" style="text-align: center;">
</ul>
<ul id="ul_id2" style="text-align: center;">
<li class="li">
<div>
<a class="name" href="javascript:void(0);" onmouseenter="showTip(this.parentElement)" onclick="replaceFuncValue(this.parentElement);changeLangByName('sql')" ><p class="codeItem2">数据库 造数据</p></a>
<div class="value" ><code></code></div>
<span class="tip" onmouseenter="keepShowTip()" onmouseleave="hideTip(this.parentElement)">根据表名、字段名生成造数据的js代码</span>
</div>
</li>
<li class="li">
<div>
<a class="name" href="javascript:void(0);" onmouseenter="showTip(this.parentElement)" onclick="replaceFuncValue(this.parentElement);changeLangByName('javascript')" ><p class="codeItem2">json 造数据</p></a>
<div class="value" ><code></code></div>
<span class="tip" onmouseenter="keepShowTip()" onmouseleave="hideTip(this.parentElement)">造json数据的例子</span>
</div>
</li>
<li class="li">
<div>
<a class="name" href="javascript:void(0);" onmouseenter="showTip(this.parentElement)" onclick="replaceFuncValue(this.parentElement)" ><p class="codeItem2">造数据</p></a>
<div class="value" ><code></code></div>
<span class="tip" onmouseenter="keepShowTip()" onmouseleave="hideTip(this.parentElement)">直接一列数据,方便复制到excel</span>
</div>
</li>
<li class="li">
<div>
<a class="name" href="javascript:void(0);" onmouseenter="showTip(this.parentElement)" onclick="replaceFuncValue(this.parentElement);changeLangByName('sql')" ><p class="codeItem2">mybatis log</p></a>
<div class="value" ><code></code></div>
<span class="tip" onmouseenter="keepShowTip()" onmouseleave="hideTip(this.parentElement)">根据mybatis log生成实际sql语句</span>
</div>
</li>
</ul>
</div>
<pre id="result" style="height:100%;width:45%;" class="ace_editor"><textarea class="ace_text-input" cssStyle="width:40%;height:320px;">
</textarea></pre>
<div id="msgback" style=""/>
</div>
<textarea id="code1" style="display:none">//使用result.setValue()来输出结果
//使用result.setValue()来输出结果
<script>
//输入表名和字段名一级对应的值或Random函数,字段和值数量要一致
//点击执行,即可生成造数据的js
var tablename = 'spif.tpd_clas';
var tablecols = 'id, inr_pd_code, clas_dim, pri_clas, scd_clas, upd_date';
//以下代码无需改动
var tabColArr = [];
var tabColArr2 = [];
var tabColArr3 = [];
var jsStr = '';
var sqlStr = "var sql = `insert into "+tablename+"(";
for(var i = 0;i < tablecols.split(',').length;i++){
var eachcol = tablecols.split(',')[i].trim();
if (eachcol == '' || eachcol == ','){
continue;
}
tabColArr.push(eachcol);
tabColArr2.push("'${"+eachcol+"}'");
tabColArr3.push(" var "+eachcol+" = "+i+";");
}
sqlStr+=tabColArr.join()+") values ("+tabColArr2.join()+");`;\n";
jsStr+="<script>//复制代码再运行一遍\n"+
"var Random = Mock.Random;\n"+
"function createSql(num)\n"+
"{\n"+
"var tempStr ='';\n"+
"for (var i = 0; i < num; i++) {\n"+
tabColArr3.join("\r\n")+"\r\n"+sqlStr+
"tempStr+=sql+'\\r\\n';\n"+
"}\n"+
"result.setValue(tempStr);\n"+
"}\n"+
"createSql(20)\n<\/script>";
result.setValue(jsStr);
</script>
</textarea>
<textarea id="code4" style="display:none">//使用result.setValue()来输出结果
<code id="str" style="display:none;">
//此处输入Mybatis Log
2021-07-22 17:46:36.869 DEBUG 38688 --- [http-nio-8080-exec-6] c.b.m.e.p.p.o.JsqlParserCountOptimize : JsqlParserCountOptimize sql=SELECT id,password,address,phone,name,email FROM T_USER_TEST3 WHERE name = ?
2021-07-22 17:46:36.906 DEBUG 38688 --- [http-nio-8080-exec-6] c.d.d.m.U.pagingBySearchable : ==> Preparing: SELECT COUNT(1) FROM T_USER_TEST3 WHERE name = ?
2021-07-22 17:46:36.998 DEBUG 38688 --- [http-nio-8080-exec-6] c.d.d.m.U.pagingBySearchable : ==> Parameters: zhangsan3(String)
</code>
<script>
var localName;
setTimeout(function(){
exec();
},200); //延时防止找不到代码元素报错
function exec() {
localName = document.querySelector('iframe').contentWindow.document.body.getElementsByTagName("code")[0].innerText;
var lineList = localName.trim().split("\n");
var logs = "";
//处理所有的sql组
//原始的sql组的list
var oldSqlArr = [];
var oneOldSql = {"sql": null, "paramStr": null};
for (var i = 0; i < lineList.length; i++) {
var oneLine = lineList[i];
if (oneLine.trim().length === 0) {
continue;
}
if (oneLine.indexOf("Preparing: ") > 0) {//sql语句
if (oneOldSql.sql != null) {
oldSqlArr.push(oneOldSql);
oneOldSql = {"sql": null, "paramStr": null};//参数语句
}
oneOldSql.sql = oneLine.substring(oneLine.indexOf("Preparing: ") + 11, oneLine.length);
} else if (oneLine.indexOf("Parameters: ") > 0) {
oneOldSql.paramStr = oneLine.substring(oneLine.indexOf("Parameters: ") + 12, oneLine.length);
}
// logs+="\n"+oneLine;
}
if (oneOldSql.sql != null) {
oldSqlArr.push(oneOldSql);
}
//遍历所有的sql组,拼接sql语句
if (oldSqlArr.length > 0) {
var sqlTemp = "", sqlIndex = -1;
for (var j = 0; j < oldSqlArr.length; j++) {
oneOldSql = oldSqlArr[j];
logs += "------sql" + (j + 1) + "-------\n";
if (oneOldSql.paramStr == null) {
logs += oneOldSql.sql + "\n";
} else {
sqlTemp = oneOldSql.sql;
//参数剪切
var paranAndTypeList = oneOldSql.paramStr.trim().split(", ");
for (var number = 0; number < paranAndTypeList.length; number++) {
var paranAndTypeStr = paranAndTypeList[number].trim();
var paramValue, paramType;
if (paranAndTypeStr.indexOf(")") > 0) {
//有类型
// paranAndTypeStr = paranAndTypeStr.substring(0, paranAndTypeStr.length - 1);
paramValue = paranAndTypeStr.substring(0, paranAndTypeStr.lastIndexOf("("));
paramType = paranAndTypeStr.substring(paranAndTypeStr.lastIndexOf("(") + 1, paranAndTypeStr.length - 1);
} else {
//没有类型
paramType = null;
paramValue = paranAndTypeStr;
}
if (!(paramType == null || paramType === "" || paramType === "Long" || paramType === "Integer" || paramType === "Byte" || paramType === "Boolean" || paramValue === "null")) {
paramValue = "'" + paramValue.trim() + "'";
}
sqlIndex = sqlTemp.indexOf("?");
sqlTemp = sqlTemp.substring(0, sqlIndex) + paramValue + sqlTemp.substring(sqlIndex + 1, sqlTemp.length);
// logs += "\n paramType:" + paramType + " paramValue:" + paramValue;
}
logs += sqlTemp + "\n";
}
}
}
result.setValue(logs);
}
</script>
</textarea>
<textarea id="code2" style="display:none">
<script>
var Random = Mock.Random;
createSql(12)
function createSql(num)
{
var tempStr ='';
var records = [];
var data = {};
data.code = 1;
data.note = "查询成功";
data.total=num;
data.hasrecordset=num > 0? 1 : 0;
for (var i = 0; i < num; i++) {
var date = new Date();
date.setDate(date.getDate() + i);
var record = Mock.mock({
"id": i+1,
"date": date.format('yyyyMMdd'),
"poffAst|0-1000000.2": 1,
"pteAst|0-1000000.2": 1,
"fAst|0-1000000.2": 1,
"pthAst|0-1000000.2": 1,
"ast|0-10000000.2": 1
});
records.push(record);
}
data.records=records;
result.setValue(JSON.stringify(data,null,2));
}
</script>
</textarea>
<textarea id="code3" style="display:none">
<script>
var Random = Mock.Random;
createSql(10)
function createSql(num)
{
var tempStr ="";
var records = [];
for (var i = 0; i < num; i++) {
var date = new Date();
date.setDate(date.getDate() + i);
var record = Mock.mock({
"str": Random.float(-10,10,4,4)/100
});
records.push(record);
tempStr += record.str + "\n";
}
result.setValue(tempStr);
}
</script>
</textarea>
<script>
/* 列表项中a标签
<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.character('lower')</a><br>
列表项中绿色a标签
<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.character('lower')</a><br>
选项说明+默认值
Random.increment( step? )<br><br><a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.increment(1)</a><br>
列表项 */
var ulItems =[
{
"name": "boolean",
"value": "Random.boolean()",
"tip": "布尔:<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.boolean()</a>"
},
{
"name": "increment",
"value": "Random.increment(1)",
"tip": "自增:Random.increment( step? )<br><br><a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.increment(1)</a>"
},
{
"name": "integer",
"value": "Random.integer(1,10)",
"tip": "整数:Random.integer( min?, max? )<br><br><a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.integer(1,10)</a>"
},
{
"name": "float",
"value": "Random.float(0,99999999,2)",
"tip": "浮点型:Random.float( min?, max?, dmin?, dmax? )<br><br>金额:<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.float(0,99999999,2)</a><br>股票份额:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.float(0,99999,0)*100</a><br>基金份额:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.float(0,9999,2)</a><br>百分比:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.float(0,0.9999,4)</a>"
},
{
"name": "character",
"value": "Random.character('number')",
"tip": "字符:Random.character( type?)<br><br>小写字母:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.character('lower')</a><br>大写字母:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.character('upper')</a><br>数字:<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.character('number')</a><br>符号:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.character('symbol')</a>"
},
{
"name": "string",
"value": "Random.string('number', 6)",
"tip": "字符串:Random.string( type?, num? )<br><br>小写字母:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.string('lower',6)</a><br>大写字母:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.string('upper',6)</a><br>数字:<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.string('number',6)</a><br>符号:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.string('symbol',6)</a>"
},
{
"name": "date",
"value": "Random.datetime('yyyyMMdd')",
"tip": "日期时间:Random.datetime(format?)<br>现在日期时间:Random.now(format?)<br><br>日期:<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.datetime('yyyyMMdd')</a><br>时间:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.datetime('HH:mm:ss')</a><br>时间戳:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.datetime('T')</a><br><label style='color:#FE6600'>现在</label>时间:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.now('yyyy-MM-dd HH:mm:ss SS')</a><br><label style='color:#FE6600'>现在</label>时间戳:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.now('T')</a>"
},
{
"name": "cparagraph",
"value": "Random.cparagraph(1)",
"tip": " 段落:Random.cparagraph( min?, max? )<br><br><a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.cparagraph(1)</a>"
},
{
"name": "ctitle",
"value": "Random.ctitle(1,50)",
"tip": " 文字:Random.ctitle( min?, max? )<br><br><a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.ctitle(1,50)</a>"
},
{
"name": "name",
"value": "Random.cname()",
"tip": " 中文姓名:<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.cname()</a><br>中文姓:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.cfirst()</a><br>中文名:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.clast()</a><br>英文姓名:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.name()</a><br>英文姓:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.first()</a><br>英文姓:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.last()</a>"
},
{
"name": "id",
"value": "Random.id()",
"tip": " 身份证:<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.id()</a>"
},
{
"name": "email / url / ip",
"value": "Random.email()",
"tip": " 邮箱:<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.email()</a><br>网址:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.url()</a><br>IP:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.ip()</a>"
},
{
"name": "address",
"value": "Random.county(true)",
"tip": " 省 市 区:<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.county(true)</a><br>省份:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.province()</a><br>城市:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.city()</a><br>区县:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.county(false)</a><br>邮编:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.zip()</a>"
},
{
"name": "Letter Case",
"value": "Random.upper('')",
"tip": " 大写:<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.upper('')</a><br>小写:<a href='javascript:void(0);' onclick='insertObjText(this)'>Random.lower('')</a>"
},
{
"name": "pick",
"value": "Random.pick(Random.range(10))",
"tip": " 选择:Random.pick([1, 2, 3])<br>范围数组:Random.range(start?, stop?, step?)<br><br>选择1-10:<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.pick(Random.range(10))</a>"
},
{
"name": "guid",
"value": "Random.guid()",
"tip": "GUID:<a href='javascript:void(0);' style='color:#0f0' onclick='insertObjText(this)'>Random.guid()</a>"
},
];
var input = ace.edit("input");
var result = ace.edit("result");
var msgFlag = false;
initEditor();
var code1=document.getElementById('code1').value;
var code2=document.getElementById('code2').value;
var code3=document.getElementById('code3').value;
var code4=document.getElementById('code4').value;
var codeli1 = document.getElementById('ul_id2').getElementsByTagName('li')[0];
codeli1.getElementsByTagName('code')[0].innerText=code1;
var codeli2 = document.getElementById('ul_id2').getElementsByTagName('li')[1];
codeli2.getElementsByTagName('code')[0].innerText=code2;
var codeli3 = document.getElementById('ul_id2').getElementsByTagName('li')[2];
codeli3.getElementsByTagName('code')[0].innerText=code3;
var codeli4 = document.getElementById('ul_id2').getElementsByTagName('li')[3];
codeli4.getElementsByTagName('code')[0].innerText=code4;
//默认代码为code1
input.setValue(code1);
input.selection.clearSelection();
runCode(); //打开页面时执行文本域内已经存在的代码
//-------------------------------以下是函数
window.onload = function(){
//列表项加载点击输入的函数
var ul = document.getElementById("ul_id");
var str = "";
for(var i=0; i<ulItems.length; i++){
str+='<li class="li">'
+ '<div>'
+ '<a class="name" href="javascript:void(0);" onmouseenter="showTip(this.parentElement)" onclick="insertFuncValue(this.parentElement)" onmouseleave="/*hideTip(this.parentElement)*/" ><p class="codeItem">'+ulItems[i].name+'</p></a>'
+ '<div class="value" ><code>'+ulItems[i].value+'</code></div>'
+ '<span class="tip" onmouseenter="keepShowTip()" onmouseleave="hideTip(this.parentElement)">'+ulItems[i].tip+'</span>'
+'</div>'
+'</li>'
}
ul.innerHTML = str;
}
window.onerror = function(sMsg,sUrl,sLine){
msgFlag = false;
result.setValue("An error was thrown and caught.\n"+"Error: " + sMsg + "\n"+"Line: " + sLine);
}
function initEditor(){
var themeSelect = document.getElementById("themeSelect");
var resultLangSelect = document.getElementById("resultLangSelect");
inputtheme = themeSelect.value;
outputtheme = themeSelect.value;
//语言
inputlanguage = "html";
resultlanguage = resultLangSelect.value;
input.setTheme("ace/theme/" + inputtheme);
input.session.setMode("ace/mode/" + inputlanguage);
//字体大小
input.setFontSize(15);
//设置只读(true时只读,用于展示代码)
input.setReadOnly(false);
//自动换行,设置为off关闭
input.setOption("wrap", "free");
//启用提示菜单
ace.require("ace/ext/language_tools");
input.setShowPrintMargin(false);
input.setOptions({
enableBasicAutocompletion: true,
enableSnippets: false,
enableLiveAutocompletion: true,
showInvisibles: true
});
input.commands.addCommand({
name: 'myCommand',//命令名称
bindKey: {win: 'Ctrl-f', mac: 'Command-F'},//快捷键
exec: function(editor) {
editor.execCommand ('find');
},
readOnly: true // false 只读模式
});
//语言
result.setTheme("ace/theme/" + outputtheme);
result.session.setMode("ace/mode/" + resultlanguage);
//字体大小
result.setFontSize(14);
//设置只读(true时只读,用于展示代码)
result.setReadOnly(false);
//自动换行,设置为off关闭
result.setOption("wrap", "free");
//启用提示菜单
ace.require("ace/ext/language_tools");
result.setOptions({
enableBasicAutocompletion: true,
enableSnippets: false,
enableLiveAutocompletion: true,
showInvisibles: true
});
result.setShowPrintMargin(false);
}
function changeTheme(){
var themeSelect = document.getElementById("themeSelect");
input.setTheme("ace/theme/" + themeSelect.value);
result.setTheme("ace/theme/" + themeSelect.value);
}
function changeLang(){
var resultLangSelect = document.getElementById("resultLangSelect");
result.session.setMode("ace/mode/" + resultLangSelect.value);
}
function changeLangByName(langName){
if(langName){
var resultLangSelect = document.getElementById("resultLangSelect");
resultLangSelect.value = langName;
result.session.setMode("ace/mode/" + resultLangSelect.value);
}
}
//执行Editor文本域内代码
function runCode() {
msgFlag = true;
var t = input.getValue();
var js = t.match(/<script>([\s\S]*?)<\/script>/i); //提取JS代码
if(js){
t = t.substring(0,js.index)+t.substring(js.index+js[0].length);
//写入非JS代码到iframe
var oldResultDiv = document.querySelector('iframe');
if (oldResultDiv!=null && oldResultDiv.length != 0){document.body.removeChild(oldResultDiv);
}
var iframe = document.createElement('iframe');
iframe.style.cssText = 'background-color:#fff;margin-top:10px; width: 1px; height:1px;';
iframe.onload = function() {
frameWin = document.querySelector('iframe').contentWindow;
frameDoc = frameWin.document;
frameBody = frameDoc.body;
frameBody.innerHTML = t;
}
document.body.appendChild(iframe);
var j = js[1].replace(/document *\. *write/g," document.getElementById('resultdiv').innerHTML = ");
var newScript = document.createElement("script"); //创建&lt;script&gt;标签
newScript.innerHTML = j;
//清除oldScript
var oldScript = document.getElementById("result").getElementsByTagName("script");
if (oldScript!=null && oldScript.length != 0){
for(var i=0;i<oldScript.length;i++){
document.getElementById("result").removeChild(oldScript[i]);
}
}
document.getElementById("result").appendChild(newScript); //写入JS代码
//result.insert(j);
}else {
//不用走到这里
result.setValue(t);
}
input.selection.clearSelection();
result.selection.clearSelection();
showMsg("执行成功");
}
//复制结果
function copyResult() {
result.selection.selectAll()
result.focus();
document.execCommand("copy");
result.selection.clearSelection();
showMsg("复制成功");
}
function copyAndRun(){
input.setValue(result.getValue());
input.selection.clearSelection();
runCode();
}
//插入代码
function insertFuncValue(obj) {
hideAllTip();
//插入值
var myValue = obj.getElementsByClassName("value")[0].getElementsByTagName("code")[0].innerText;
input.insert(myValue);
}
//替换代码
function replaceFuncValue(obj) {
hideAllTip();
//插入值
var myValue = obj.getElementsByClassName("value")[0].getElementsByTagName("code")[0].innerText;
input.setValue(myValue);
input.selection.clearSelection();
runCode();
}
//插入本对象内文字
function insertObjText(obj) {
hideAllTip();
//插入值
var myValue = obj.innerHTML;
input.insert(myValue);
}
var msgHideTime;
//显示消息
function showMsg(msgtext) {
if(msgFlag){
var msgback = document.getElementById("msgback");
msgback.style.backgroundColor="rgba(2, 198, 90, 0.4)";
msgback.innerHTML = msgtext;
alphaPlay(msgback,"show",0);
alphaPlay(msgback,"hiden",2000);
}else{
var msgback = document.getElementById("msgback");
msgback.style.backgroundColor="rgb(227, 65, 32, 0.4)";
msgback.innerHTML = "执行失败";
alphaPlay(msgback,"show",0);
alphaPlay(msgback,"hiden",2000);
}
}
//立即显示,延迟渐隐
function alphaPlay(obj, method, timeout) {
var n = method == "show" ? 0 : 100,
ie = window.ActiveXObject ? true : false;
var time1;
//如果已经在显示,继续显示,显示不需要延迟
if (method == "show") {
if(obj.style.opacity!=0){
n = obj.style.opacity * 100;
clearTimeout(time1);
clearTimeout(msgHideTime);
}
var time1 = setInterval(function () {
if (n < 100) {
n += 10;
if (ie) {
obj.style.cssText = "filter:alpha(opacity=" + n + ")";
} else {
n == 100 ? (obj.style.opacity = 1) : (obj.style.opacity = "0." + n);
}
} else {
clearTimeout(time1);
}
}, 30);
}
else{
msgHideTime = setTimeout(function(){
//method有两个值show或hiden
var n = method == "show" ? 0 : 100,
ie = window.ActiveXObject ? true : false;
var time2 = setInterval(function () {
clearTimeout(msgHideTime);
if (n > 0) {
n -= 10;
if (ie) {
obj.style.cssText = "filter:alpha(opacity=" + n + ")";
} else {
obj.style.opacity = "0." + n;
}
} else {
clearTimeout(time2);
}
}, 30);
},timeout);
}
}
var timer;
var timerout;
//显示代码提示
function showTip(obj){
timer=setTimeout(function(){
var objRect = obj.getBoundingClientRect();
var tip = obj.getElementsByClassName("tip")[0];
hideAllTip();
tip.style.display="block";
tip.style.background="#666666";
tip.style.color="#fff";
tip.style.padding="5px";
tip.style.borderRadius="5px";
tip.style.position="absolute";
var tipRect = tip.getBoundingClientRect();
tip.style.left=objRect.x-tipRect.width-10+"px";
tip.style.top=objRect.y+"px";
},300);
}
//隐藏提示
function hideTip(obj){
clearTimeout(timer);
timerout=setTimeout(function(){
obj.getElementsByClassName("tip")[0].style.display="none";
},1000);
}
function keepShowTip(){
clearTimeout(timerout);
}
//隐藏所有提示
function hideAllTip(){
//隐藏所有属性
var othrobj = document.getElementsByClassName("tip");
for(var i=0;i<othrobj.length;i++){
othrobj[i].style.display="none"
}
}
Date.prototype.format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/zw95cn/mockjs-simple-tools.git
[email protected]:zw95cn/mockjs-simple-tools.git
zw95cn
mockjs-simple-tools
mockjsSimpleTools
master

搜索帮助