JS Runcode运行网页上的HTML/CSS/Javascrip代码

最新推荐文章于 2022-11-02 17:41:11 发布

weixin_30338461

最新推荐文章于 2022-11-02 17:41:11 发布

阅读量186

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/rentj1/archive/2012/10/09/2716532.html

版权




<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>runcode-运行HTML/CSS/Jvascrip代码</title>
</head>
<body>
<form>
    <textarea name="codearea" style="width:800px; height:600px">
    
    </textarea>
    
    <br />
    <input name="run" type="button" value="运行代码">
</form>

<script>
(function(){
		  
	function run(code){
		var newWin = window.open("", "_blank", "");
		newWin.opener = null; // 防止代码对页面修改
		newWin.document.open();
		newWin.document.write(code);
		newWin.document.close();
	}
	
	//遍历页面中运行代码按钮
	var  executes = document.getElementsByName("run");
	for(var i=0; i<executes.length; i++){
		executes[i].onclick = function(){
			var code = this.form.codearea.value;
			run(code);
		};
	}
	
}());
</script>
</body>
</html>

要在博客中插入可运行的代码：

一将博客园后台的文本编辑器切换到的HTML视图下插入代码：

<form>
    <textarea name="codearea" style="width:800px; height:600px">
    
    </textarea>
    
    <br />
    <input name="run" type="button" value="运行代码">
</form>

表单元素的样式可以根据需要调整。

二、在textarea中插入需要运行的代码，代码需要经过HTML ENCODE 否则提交的时候会被处理。

三、在页面底部加入代码：

或者拷贝runcode.js中的代码到页面上。

演示：

<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>无标题文档</title> </head> <body> <div id="rotate1" style=" background-color:#ccc; border:1px solid #f00; width:200px; height:100px; position:absolute; left:100px; top:100px"> </div> <div id="rotate" style=" background-color:#ccc; border:1px solid #f00; width:200px; height:100px; position:absolute; left:100px; top:100px"> </div> <script> var element = document.getElementById("rotate"); r =7 setInterval(function(){ r+=7 element.style.MozTransform="rotate(" + r + "deg)"; element.style.webkitTransform="rotate(" + r + "deg)"; element.style.msTransform="rotate(" + r + "deg)"; element.style.OTransform="rotate(" + r + "deg)"; element.style.transform="rotate(" + r + "deg)"; },30) </script> </body> </html>

转载于:https://www.cnblogs.com/rentj1/archive/2012/10/09/2716532.html