做网站的公司 杭州,平面设计软件学哪个比较好,网站建设与管理是学什么,中国工程造价信息网官网缘由 前段时间再看了一些javascript的学习资料,也写的一些demo,在输出的时候一般都用alert,但这个方法会打断函数运行,用起来不是很好.还有就是console.log这个方法,这种方法原来一直以为只能在FireFox上面才能用,现在才发现主流浏览器都支持.但我的这个插件已经写的差不多了,所…缘由 前段时间再看了一些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; //xbtnHidden.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进行处理,下面的例子用也有用到. //时间格式的处理借鉴了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;} 调用 headtitleBarlow Console/titlescript srcbarlow.console.js typetext/javascript/scriptscript srcjson2.js typetext/javascript/scriptscript typetext/javascript charsetuft-8function 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]);//Objectbarlow.console.printline({ a: 1, b: { a: abcfaa }, bac: { a: [1, 2, 3, 4]} });//JSON2barlow.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
bodyinput typebutton valueTest onclicktestPrint() /div styleheight: 2000px;/div
/body
/html 结果为 这个js插件目前只支持ie8及以上,但我觉得已经够用了,怎么说微软今年也不支持xp了,所以这个插件我觉得还是可以作为学习js或者调试的时候使用. 写的后面的话 在园子里逛了一年多了,学了多少东西.同时看见各大位大牛写的文章那是相当的佩服.在这我也小露一手,同时也希望往后能够坚持下来,将自己的学习的东西还有一些心得能够用自己的文字记录下来. 下载转载于:https://www.cnblogs.com/gangtianci/p/3520173.html
