當前位置：首頁 > 编程语言 > java >内容正文

java

Javascript 自定义输出

發布時間：2023/12/18 java 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 Javascript 自定义输出小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

緣由

? 前段時間再看了一些javascript的學習資料,也寫的一些demo,在輸出的時候一般都用alert,但這個方法會打斷函數運行,用起來不是很好.還有就是console.log這個方法,這種方法原來一直以為只能在FireFox上面才能用,現在才發現主流瀏覽器都支持.但我的這個插件已經寫的差不多了,所以我還是把它寫出來,讓大家共同學習一下.

DOM結構

? 由于只是對結果的簡單輸出,所以我選擇了textarea存放.再給textarea加層div用于定位.同時加了4個控制按鈕(最小化,最大化,清空,關閉).

數據處理

? 數據處理是我只是簡單的進行了字符串拼接,并沒有對數據顯示格式還轉義字符進行處理,對于這些大家可以用JSON2進行處理,下面的例子用也有用到.

//時間格式的處理借鑒了json2function f(n) {// Format integers to have at least two digits.return n < 10 ? '0' + n : n;}function formatDate(val) {return isFinite(val.valueOf())? val.getUTCFullYear() + '-' +f(val.getUTCMonth() + 1) + '-' +f(val.getUTCDate()) + 'T' +f(val.getUTCHours()) + ':' +f(val.getUTCMinutes()) + ':' +f(val.getUTCSeconds()) + 'Z': null;}//基本數據類型function formatMetaData(val) {var res;if (val instanceof Date) {res = formatDate(val)if (res === null){ res = "null"; }}else if (typeof (val) === "undefined") {res = "undefined";}else if (val === null) {res = "null";}else if (typeof (val) === "string") {res = '"' + val + '"';}else {res = val.valueOf();}return res;}//Objectfunction formatObj(obj) {var res = "{";if (obj instanceof Date) {obj = formatDate(obj);if (obj != null) {return obj;}}if (obj === null) {return "null";}for (var p in obj) {res = res + "\"" + p + "\":" + format(obj[p], false) + ",";}res = res.substr(0, res.length - 1);res = res + "}";return res;}//所有數據類型處理的入口(blnImport是否是入口)function format(args, blnImport) {var res = "";if (blnImport == true) {if (args.length == 0)return "";else if (args.length == 1) {args = args[0];}}if (args instanceof Array) {var arr = [];for (var i = 0; i < args.length; i++) {arr.push(format(args[i], false));}res = "[" + arr.join(",") + "]";}else if (typeof (args) === "object") {res = formatObj(args);}else {res = formatMetaData(args);}return res;}

調用

<head><title>Barlow Console</title><script src="barlow.console.js" type="text/javascript"></script><script src="json2.js" type="text/javascript"></script><script type="text/javascript" charset="uft-8">function testPrint() {//基本數據類型var a = "test";var e;barlow.console.printline(e);barlow.console.printline(null);barlow.console.printline(1);barlow.console.printline(11.1);barlow.console.printline(true);barlow.console.printline(a);barlow.console.printline(1 / 0);barlow.console.printline(new Date())barlow.console.printline("----------------")//數組 barlow.console.printline([a, a]);//Object barlow.console.printline({ "a": 1, "b": { "a": "abcfaa" }, "bac": { a: [1, 2, 3, 4]} });//JSON2 barlow.console.printline("JSON2");barlow.console.printline(JSON.stringify({ "a": 1, "b": { "a": "abcfaa" }, "bac": { a: [1, 2, 3, 4]} }));barlow.console.printline("JSON2");barlow.console.printline(JSON.stringify({ "a": 1, "b": { "a": "abcfaa" }, "bac": { a: [1, 2, 3, 4]} }, {},4));}</script> </head> <body><input type="button" value="Test" onclick="testPrint()" /><div style="height: 2000px;"></div> </body> </html>

結果為

? 這個js插件目前只支持ie8及以上,但我覺得已經夠用了,怎么說微軟今年也不支持xp了,所以這個插件我覺得還是可以作為學習js或者調試的時候使用.

寫的后面的話

? 在園子里逛了一年多了,學了多少東西.同時看見各大位大牛寫的文章那是相當的佩服.在這我也小露一手,同時也希望往后能夠堅持下來,將自己的學習的東西還有一些心得能夠用自己的文字記錄下來.

下載

轉載于:https://www.cnblogs.com/gangtianci/p/3520173.html

總結

以上是生活随笔為你收集整理的Javascript 自定义输出的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Mysql -- SQL常用命令实例
下一篇： JavaFX学习之Web