Javascript 自定义输出
缘由
前段时间再看了一些javascript的学习资料,也写的一些demo,在输出的时候一般都用alert,但这个方法会打断函数运行,用起来不是很好.还有就是console.log这个方法,这种方法原来一直以为只能在FireFox上面才能用,现在才发现主流浏览器都支持.但我的这个插件已经写的差不多了,所以我还是把它写出来,让大家共同学习一下.
DOM结构
由于只是对结果的简单输出,所以我选择了textarea存放.再给textarea加层div用于定位.同时加了4个控制按钮(最小化,最大化,清空,关闭).
- function createConsole() {
- //this:consoleClass的实例(这个也就是this用法的一个体现)
- var self = this;
- if (self.divConsoleContent != null && self.txtConsoleContent != null) {
- if (self.divConsoleContent.style["display"] == "none") {
- self.divConsoleContent.style["display"] = "block";
- setStyle(self.divConsoleContent.style, options.maxSizeCss);
- }
- return;
- }
- var body = document.getElementsByTagName("body")[0];
- var div = document.createElement("div");
- div.setAttribute("id", "divConsoleContent");
- setStyle(div.style, options.maxSizeCss);
- var txt = document.createElement("textarea");
- txt.setAttribute("id", "txtConsoleContent");
- setStyle(txt.style, options.txtCss);
- txt.setAttribute("readonly", "readonly");
- var btnMax = document.createElement("button");
- var btnMin = document.createElement("button");
- var btnClear = document.createElement("button");
- var btnHidden = document.createElement("button");
- setStyle(btnMax.style, options.buttonCss);
- setStyle(btnMin.style, options.buttonCss);
- setStyle(btnClear.style, options.buttonCss);
- setStyle(btnHidden.style, options.buttonCss);
- btnMax.innerHTML = "\u005b\u005b\u005d\u005d"; //[[]]
- btnMax.innerText = "\u005b\u005b\u005d\u005d";
- btnMin.innerHTML = "\u002d"; //-
- btnMin.innerText = "\u002d";
- btnClear.innerHTML = "\u007c"; //|
- btnClear.innerText = "\u007c";
- btnHidden.innerHTML = "\u00d7"; //x
- btnHidden.innerText = "\u00d7";
- btnMin.onclick = function () {
- setStyle(self.divConsoleContent.style, options.minSizeCss);
- };
- btnMax.onclick = function () {
- setStyle(self.divConsoleContent.style, options.maxSizeCss);
- }
- btnClear.onclick = function () {
- options.currentText = "";
- self.txtConsoleContent.value = "";
- }
- btnHidden.onclick = function () {
- //
- setStyle(self.divConsoleContent.style, { display: "none" });
- }
- document.body.appendChild(div);
- div.appendChild(btnMin);
- div.appendChild(btnMax);
- div.appendChild(btnClear);
- div.appendChild(btnHidden);
- div.appendChild(txt);
- self.divConsoleContent = div;
- self.txtConsoleContent = txt;
- };
数据处理
数据处理是我只是简单的进行了字符串拼接,并没有对数据显示格式还转义字符进行处理,对于这些大家可以用JSON2进行处理,下面的例子用也有用到.
- //时间格式的处理借鉴了json2
- function 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;
- }
- //Object
- function 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或者调试的时候使用.
写的后面的话
在园子里逛了一年多了,学了多少东西.同时看见各大位大牛写的文章那是相当的佩服.在这我也小露一手,同时也希望往后能够坚持下来,将自己的学习的东西还有一些心得能够用自己的文字记录下来.
Javascript 自定义输出的更多相关文章
- Lrc2srt精灵,增加自定义输出编码
2015.4.8 对中文支持有点问题,修改了一下,支持自定义输出编码! 修改了建议行末偏移,通常100到200最好了,人的反应时间! http://files.cnblogs.com/files/ro ...
- Javascript事件模型系列(四)我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- javascript自定义滚动条插件,几行代码的事儿
在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便 ...
- JavaScript自定义事件
很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定 ...
- EDIUS设置自定义输出的方法
在做后期视频剪辑时,往往根据需求,需要输出不同分辨率格式的视频文件,那在EDIUS中,如何自定义输出设置,使之符合自己的需要呢?下面小编就来详细讲讲EDIUS自定义输出的一二事吧. 当剪辑完影片,设置 ...
- javascript自定义浏览器右键菜单
javascript自定义浏览器右键菜单 在书上看到document对象还有一个contextmenu事件,但是不知为什么w3school中找不到这个耶... 利用这个特性写了个浏览器的右键菜单, ...
- javascript:自定义事件初探
javascript:自定义事件初探 http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html
- 理解的javascript自定义事件
理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...
- Log4j扩展使用--自定义输出
写在前面的话 log4j支持自定义的输出.所有的输出都实现了自Appender接口.一般来说,自定义输出值需要继承AppenderSkeleton类,并实现几个方法就可以了. 写这篇博客,我主要也是想 ...
随机推荐
- fiddler使用——配置抓取https,出现提示“禁用解密”“单击配置”
自己在设置fiddler抓https的时候,浏览器总是提示:此证书不受信任:中午没午睡下午一直昏沉沉的,弄了好久,终于想起来是证书的问题:度娘有个不错的答案,这里分享一下!给以后有相同问题的朋友,也同 ...
- SOAP XML报文解析
import java.util.HashMap;import java.util.List;import java.util.Map; import org.dom4j.Document;impor ...
- python学习之路---day12
生成器和生成器表达式一:生成器 生成器实质上就是迭代器. 三种方式获取生成器: 01:通过生成器函数 02:通过各种推导式实现生成器 03:通过数据的转换也可以获取生成器 eg:普通函数 def fu ...
- 109th LeetCode Weekly Contest Knight Dialer
A chess knight can move as indicated in the chess diagram below: . This time, we place o ...
- Thinkphp2.1漏洞利用
thinkphp2.1版本 Google语法: inurl:index.php intext:ThinkPHP 2.1 { Fast & Simple OOP PHP Framework } ...
- .reverse ,join,split区分
* 1:arrayObject.reverse() * 注意: 该方法会改变原来的数组,而不会创建新的数组. * 2:arrayObject.join() * 注意:join() 方法用于把数组中的所 ...
- 0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言,比如TypeScript
常用知识点,技巧 添加库到本地: (举例 element-ui) 用npm命令行把包下载到本地 在电脑里找到资源文件,比如 C:\Users\XiaoCong\AppData\Roaming\npm\ ...
- Missing artifact com.oracle:ojdbc6:jar:11.2.0.1.0问题解决 ojdbc包pom.xml出错
<!-- 添加oracle jdbc driver --> <dependency> <groupId>com.oracle</groupId> < ...
- golang context 剖析 1.7.4 版本
1. 内部结构之 - timerCtx . type timerCtx struct { cancelCtx timer *time.Timer // Under cancelCtx.mu. dead ...
- 【Tensorflow】 Object_detection之模型训练日志结果解析
日志展示 指标说明: AP值表示正确识别物体的个数占总识别出的物体个数的百分数 AR值表示正确识别物体的个数占测试集中物体的总个数的百分数 IoU值即生成的框/掩膜与数据集中的标准的面积之交处于面积之 ...