建筑设计方案网站,注册岩土工程师,比较好的免费网站,东莞房价2022最新楼盘消息在网页中运行代码HTML5学堂#xff1a;很多代码网站当中#xff0c;都会提供运行代码段功能#xff0c;便于查看代码效果#xff0c;那么这个是如何实现的呢#xff1f;一起来看一下——如何在网页中运行代码。HTML5学堂-刘国利said#xff1a;应该是在2013年的时候…在网页中运行代码HTML5学堂很多代码网站当中都会提供运行代码段功能便于查看代码效果那么这个是如何实现的呢一起来看一下——如何在网页中运行代码。HTML5学堂-刘国利said应该是在2013年的时候在做一个项目时自己遇到过这个问题最初的时候觉得挺麻烦的但是想了想又实现出来之后发现网页运行代码真的挺简单的。话说要不要也给当前的“HTML5学堂”网站弄一个运行代码的功能呢呵呵过一段时间如果有闲暇时间的话就迭代一下这个网站增加运行代码的功能吧~需要的知识支撑浏览器对象模型BOM的方法以及一些文档对象模型DOM属性和方法。讲解原理之前先来看效果图以及实现代码基本效果图具体实现功能的代码HTML5学堂 - 网页中的运行代码功能textarea{width: 600px;height: 400px;font-size: 12px;font-family: 微软雅黑;line-height: 14px;}HTML5学堂 - 3D立体块*{margin: 0;padding: 0;}body{-webkit-perspective:0;}.box{margin: 50px auto 0;}.con{margin: 0 auto;width: 200px;height: 200px;position: relative;-webkit-transform-style: preserve-3d;-webkit-transition: all 2s ease;}.con:hover{-webkit-transform: rotateX(390deg) rotateY(390deg);}.con p{width: 200px;height: 200px;position: absolute;-webkit-backface-visibility:hidden;}p:nth-child(1){background: rgba(255,0,0,0.4);-webkit-transform: rotateX(0deg) translateZ(100px);}p:nth-child(2){background: rgba(255,255,0,0.4);-webkit-transform: rotateX(180deg) translateZ(100px);}p:nth-child(3){background: rgba(255,0,255,0.4);-webkit-transform: rotateX(90deg) translateZ(100px);}p:nth-child(4){background: rgba(0,0,255,0.4);-webkit-transform: rotateX(270deg) translateZ(100px);}p:nth-child(5){background: rgba(0,255,255,0.4);-webkit-transform: rotateY(90deg) translateZ(100px);}p:nth-child(6){background: rgba(0,255,0,0.4);-webkit-transform: rotateY(270deg) translateZ(100px);}var btn document.getElementById(btn);var thecode document.getElementById(codes);btn.onclick function () {var win window.open(, _blank, );win.document.open(text/html, replace);win.opener null;win.document.write(thecode.value);win.document.close();}实现的基本原理首先使用open() 方法打开一个新文档并擦除当前文档的内容。opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用。 opener 属性非常有用,创建的窗口可以引用创建它的窗口所定义的属性和函数。之后用win.document.write方法。在页面载入过程中用实时脚本创建页面内容,以及用延时脚本创建本窗口或新窗口的内容。打开一个新文档之后擦除当前文档的内容。(close方法)欢迎沟通交流~HTML5学堂
