缘由

前段时间再看了一些javascript的学习资料,也写的一些demo,在输出的时候一般都用alert,但这个方法会打断函数运行,用起来不是很好.还有就是console.log这个方法,这种方法原来一直以为只能在FireFox上面才能用,现在才发现主流浏览器都支持.但我的这个插件已经写的差不多了,所以我还是把它写出来,让大家共同学习一下.

DOM结构

由于只是对结果的简单输出,所以我选择了textarea存放.再给textarea加层div用于定位.同时加了4个控制按钮(最小化,最大化,清空,关闭).

  1. function createConsole() {
  2. //this:consoleClass的实例(这个也就是this用法的一个体现)
  3. var self = this;
  4.  
  5. if (self.divConsoleContent != null && self.txtConsoleContent != null) {
  6. if (self.divConsoleContent.style["display"] == "none") {
  7. self.divConsoleContent.style["display"] = "block";
  8. setStyle(self.divConsoleContent.style, options.maxSizeCss);
  9.  
  10. }
  11. return;
  12. }
  13.  
  14. var body = document.getElementsByTagName("body")[0];
  15. var div = document.createElement("div");
  16. div.setAttribute("id", "divConsoleContent");
  17. setStyle(div.style, options.maxSizeCss);
  18.  
  19. var txt = document.createElement("textarea");
  20. txt.setAttribute("id", "txtConsoleContent");
  21. setStyle(txt.style, options.txtCss);
  22. txt.setAttribute("readonly", "readonly");
  23.  
  24. var btnMax = document.createElement("button");
  25. var btnMin = document.createElement("button");
  26. var btnClear = document.createElement("button");
  27. var btnHidden = document.createElement("button");
  28. setStyle(btnMax.style, options.buttonCss);
  29. setStyle(btnMin.style, options.buttonCss);
  30. setStyle(btnClear.style, options.buttonCss);
  31. setStyle(btnHidden.style, options.buttonCss);
  32.  
  33. btnMax.innerHTML = "\u005b\u005b\u005d\u005d"; //[[]]
  34. btnMax.innerText = "\u005b\u005b\u005d\u005d";
  35.  
  36. btnMin.innerHTML = "\u002d"; //-
  37. btnMin.innerText = "\u002d";
  38.  
  39. btnClear.innerHTML = "\u007c"; //|
  40. btnClear.innerText = "\u007c";
  41.  
  42. btnHidden.innerHTML = "\u00d7"; //x
  43. btnHidden.innerText = "\u00d7";
  44.  
  45. btnMin.onclick = function () {
  46. setStyle(self.divConsoleContent.style, options.minSizeCss);
  47. };
  48. btnMax.onclick = function () {
  49. setStyle(self.divConsoleContent.style, options.maxSizeCss);
  50. }
  51. btnClear.onclick = function () {
  52. options.currentText = "";
  53. self.txtConsoleContent.value = "";
  54. }
  55. btnHidden.onclick = function () {
  56. //
  57. setStyle(self.divConsoleContent.style, { display: "none" });
  58. }
  59.  
  60. document.body.appendChild(div);
  61. div.appendChild(btnMin);
  62. div.appendChild(btnMax);
  63. div.appendChild(btnClear);
  64. div.appendChild(btnHidden);
  65. div.appendChild(txt);
  66. self.divConsoleContent = div;
  67. self.txtConsoleContent = txt;
  68.  
  69. };

数据处理

数据处理是我只是简单的进行了字符串拼接,并没有对数据显示格式还转义字符进行处理,对于这些大家可以用JSON2进行处理,下面的例子用也有用到.

  1. //时间格式的处理借鉴了json2
  2. function f(n) {
  3. // Format integers to have at least two digits.
  4. return n < 10 ? '0' + n : n;
  5. }
  6. function formatDate(val) {
  7. return isFinite(val.valueOf())
  8. ? val.getUTCFullYear() + '-' +
  9. f(val.getUTCMonth() + 1) + '-' +
  10. f(val.getUTCDate()) + 'T' +
  11. f(val.getUTCHours()) + ':' +
  12. f(val.getUTCMinutes()) + ':' +
  13. f(val.getUTCSeconds()) + 'Z'
  14. : null;
  15. }
  16. //基本数据类型
  17. function formatMetaData(val) {
  18. var res;
  19. if (val instanceof Date) {
  20. res = formatDate(val)
  21. if (res === null)
  22. { res = "null"; }
  23. }
  24. else if (typeof (val) === "undefined") {
  25. res = "undefined";
  26. }
  27. else if (val === null) {
  28. res = "null";
  29. }
  30. else if (typeof (val) === "string") {
  31. res = '"' + val + '"';
  32. }
  33. else {
  34. res = val.valueOf();
  35. }
  36. return res;
  37. }
  38. //Object
  39. function formatObj(obj) {
  40. var res = "{";
  41. if (obj instanceof Date) {
  42. obj = formatDate(obj);
  43. if (obj != null) {
  44. return obj;
  45. }
  46. }
  47. if (obj === null) {
  48. return "null";
  49. }
  50. for (var p in obj) {
  51. res = res + "\"" + p + "\":" + format(obj[p], false) + ",";
  52. }
  53. res = res.substr(0, res.length - 1);
  54. res = res + "}";
  55. return res;
  56. }
  57. //所有数据类型处理的入口(blnImport是否是入口)
  58. function format(args, blnImport) {
  59. var res = "";
  60. if (blnImport == true) {
  61. if (args.length == 0)
  62. return "";
  63. else if (args.length == 1) {
  64. args = args[0];
  65. }
  66. }
  67. if (args instanceof Array) {
  68. var arr = [];
  69. for (var i = 0; i < args.length; i++) {
  70. arr.push(format(args[i], false));
  71. }
  72. res = "[" + arr.join(",") + "]";
  73. }
  74.  
  75. else if (typeof (args) === "object") {
  76. res = formatObj(args);
  77. }
  78. else {
  79. res = formatMetaData(args);
  80. }
  81.  
  82. return res;
  83. }

调用

  1. <head>
  2. <title>Barlow Console</title>
  3. <script src="barlow.console.js" type="text/javascript"></script>
  4. <script src="json2.js" type="text/javascript"></script>
  5. <script type="text/javascript" charset="uft-8">
  6.  
  7. function testPrint() {
  8. //基本数据类型
  9. var a = "test";
  10. var e;
  11. barlow.console.printline(e);
  12. barlow.console.printline(null);
  13. barlow.console.printline(1);
  14. barlow.console.printline(11.1);
  15. barlow.console.printline(true);
  16. barlow.console.printline(a);
  17. barlow.console.printline(1 / 0);
  18. barlow.console.printline(new Date())
  19. barlow.console.printline("----------------")
  20. //数组
  21. barlow.console.printline([a, a]);
  22. //Object
  23. barlow.console.printline({ "a": 1, "b": { "a": "abcfaa" }, "bac": { a: [1, 2, 3, 4]} });
  24. //JSON2
  25. barlow.console.printline("JSON2");
  26. barlow.console.printline(JSON.stringify({ "a": 1, "b": { "a": "abcfaa" }, "bac": { a: [1, 2, 3, 4]} }));
  27. barlow.console.printline("JSON2");
  28. barlow.console.printline(JSON.stringify({ "a": 1, "b": { "a": "abcfaa" }, "bac": { a: [1, 2, 3, 4]} }, {},4));
  29. }
  30. </script>
  31. </head>
  32. <body>
  33. <input type="button" value="Test" onclick="testPrint()" />
  34. <div style="height: 2000px;">
  35. </div>
  36. </body>
  37. </html>

结果为

这个js插件目前只支持ie8及以上,但我觉得已经够用了,怎么说微软今年也不支持xp了,所以这个插件我觉得还是可以作为学习js或者调试的时候使用.

写的后面的话

在园子里逛了一年多了,学了多少东西.同时看见各大位大牛写的文章那是相当的佩服.在这我也小露一手,同时也希望往后能够坚持下来,将自己的学习的东西还有一些心得能够用自己的文字记录下来.

下载

Javascript 自定义输出的更多相关文章

  1. Lrc2srt精灵,增加自定义输出编码

    2015.4.8 对中文支持有点问题,修改了一下,支持自定义输出编码! 修改了建议行末偏移,通常100到200最好了,人的反应时间! http://files.cnblogs.com/files/ro ...

  2. Javascript事件模型系列(四)我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  3. javascript自定义滚动条插件,几行代码的事儿

    在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便 ...

  4. JavaScript自定义事件

    很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定 ...

  5. EDIUS设置自定义输出的方法

    在做后期视频剪辑时,往往根据需求,需要输出不同分辨率格式的视频文件,那在EDIUS中,如何自定义输出设置,使之符合自己的需要呢?下面小编就来详细讲讲EDIUS自定义输出的一二事吧. 当剪辑完影片,设置 ...

  6. javascript自定义浏览器右键菜单

    javascript自定义浏览器右键菜单   在书上看到document对象还有一个contextmenu事件,但是不知为什么w3school中找不到这个耶... 利用这个特性写了个浏览器的右键菜单, ...

  7. javascript:自定义事件初探

    javascript:自定义事件初探   http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html

  8. 理解的javascript自定义事件

    理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...

  9. Log4j扩展使用--自定义输出

    写在前面的话 log4j支持自定义的输出.所有的输出都实现了自Appender接口.一般来说,自定义输出值需要继承AppenderSkeleton类,并实现几个方法就可以了. 写这篇博客,我主要也是想 ...

随机推荐

  1. fiddler使用——配置抓取https,出现提示“禁用解密”“单击配置”

    自己在设置fiddler抓https的时候,浏览器总是提示:此证书不受信任:中午没午睡下午一直昏沉沉的,弄了好久,终于想起来是证书的问题:度娘有个不错的答案,这里分享一下!给以后有相同问题的朋友,也同 ...

  2. SOAP XML报文解析

    import java.util.HashMap;import java.util.List;import java.util.Map; import org.dom4j.Document;impor ...

  3. python学习之路---day12

    生成器和生成器表达式一:生成器 生成器实质上就是迭代器. 三种方式获取生成器: 01:通过生成器函数 02:通过各种推导式实现生成器 03:通过数据的转换也可以获取生成器 eg:普通函数 def fu ...

  4. 109th LeetCode Weekly Contest Knight Dialer

    A chess knight can move as indicated in the chess diagram below:  .            This time, we place o ...

  5. Thinkphp2.1漏洞利用

    thinkphp2.1版本 Google语法: inurl:index.php intext:ThinkPHP 2.1 { Fast & Simple OOP PHP Framework }  ...

  6. .reverse ,join,split区分

    * 1:arrayObject.reverse() * 注意: 该方法会改变原来的数组,而不会创建新的数组. * 2:arrayObject.join() * 注意:join() 方法用于把数组中的所 ...

  7. 0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言,比如TypeScript

    常用知识点,技巧 添加库到本地: (举例 element-ui) 用npm命令行把包下载到本地 在电脑里找到资源文件,比如 C:\Users\XiaoCong\AppData\Roaming\npm\ ...

  8. Missing artifact com.oracle:ojdbc6:jar:11.2.0.1.0问题解决 ojdbc包pom.xml出错

    <!-- 添加oracle jdbc driver --> <dependency> <groupId>com.oracle</groupId> < ...

  9. golang context 剖析 1.7.4 版本

    1. 内部结构之 - timerCtx . type timerCtx struct { cancelCtx timer *time.Timer // Under cancelCtx.mu. dead ...

  10. 【Tensorflow】 Object_detection之模型训练日志结果解析

    日志展示 指标说明: AP值表示正确识别物体的个数占总识别出的物体个数的百分数 AR值表示正确识别物体的个数占测试集中物体的总个数的百分数 IoU值即生成的框/掩膜与数据集中的标准的面积之交处于面积之 ...