几种实用的JavaScript鼠标特效,在我们平时网页设计中,鼠标特效可以说是常常会用到,那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效,希望对大家有用。......
2023-03-17 533 JAVASCRIPT 鼠标
现在的网页很多数据都是用JSON文件存储的,但是有时候为了查看数据,或者做报表就必须把它的格式进行转化。最常见的一种形式是把JSON数据转化成table>……/table>。今天我们讲解的就是在不借助第三方软件的情况下,仅用chrome浏览器来实现这种转化。
知识的要点:1、bookmarklet制作、2、javascript基础;。
bookmarklet其实就是一个收藏夹,其中网址部分是javascript代码。
值得注意的是所有的bookmarklet都要按这个种格式来:javascript:(function(){……})()。在这里的设略号就是用户自己写的代码来实现的功能区。我们写一个名称:test;网址:javascript:(function(){alert('hello')})()。我们来运行下刚才写的这个bookmarklet。会弹出一个对话框显示“hello”
我们既然知道了原理那么就可以利用它来实现更高级一点的功能——实现json转化成表格。
首先我们来写一段代码给数组的原型添加一个toTable的方法。toTable实现了把数据中的集合对象转变成“table>……/table>”的字符串。
接下来我们是要实现是通过正则提取JSON,并把它转化成数组。正则提取的部分关键点是:document.body.innerHTML.match(/\[.*?\]/igm)[0]。其中/\[.*?\]/igm是一个正则表达。关于正则表达什么写,这个不做细说,自行百度。正则提取的结果是一个字符串:”[……]”。想要把这个结果变成数组需要执行eval函数。这个函数的用法是:eval('(' document.body.innerHTML.match(/\[.*?\]/igm)[0] ')')。之后我们就可以用toTable方法了。
我们再执行完toTable的方法之后返回的结果是“table>……/table>”,我们希望做的是把这个段代码写到一个DIV元素中,那么这个DIV元素就会有一个表格元素。我们只要把这个DIV的布局布置在页面顶层,以带有透明的遮罩形式呈现即可。完整的代码:
javascript:(function(a,b,c){Array.prototype.toTable=function(){var ar=[];var tab='';var th="";for(i in this[0]){ar.push(i)};th="tr>th>" ar.join('/th>th>') "/th>/tr>";this.forEach(function(a){var b=[];for(i in a){b.push(a[i])}tab ="tr>td>" b.join('/td>td>') "/td>/tr>"});return("table border='1px' >" th tab "table>")};c=b.createElement('div'),c.id='excel',c.setAttribute('style','position:absolute;top:0;left:0;right:0;background:yellow;opacity:0.8'),c.innerHTML=eval('(' document.body.innerHTML.match(/\[.*?\]/igm)[0] ')').toTable(),b.body.appendChild(c)})(window,document);
新建一个bokmarklet,把第六步的代码复制到网址中。
单击texst,即可得到结果。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!
标签: excelJAVASCRIPT
相关文章
几种实用的JavaScript鼠标特效,在我们平时网页设计中,鼠标特效可以说是常常会用到,那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效,希望对大家有用。......
2023-03-17 533 JAVASCRIPT 鼠标
如何开始学习javascript,html是网页的内容,c是网页的格式,h是网站的后台,j是网站的前端,那么如何学习j,才能高效?......
2023-03-17 258 JAVASCRIPT