结合EasyUI一起写的

运行效果

核心代码

<section class="main_right" id="main_right"><div id="code-test" class="easyui-panel code_test" style="height: 100%;width: 100%;position: relative" title="代码验证"><div class="code-test-left"><textarea id="textareaCode" onkeypress="coded()">
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>EasyUI和Highcharts介绍与使用</title><link rel="stylesheet" href="./css/main.css"><link rel="stylesheet" href="./js/jquery-easyui-1.7.0/themes/default/easyui.css"><link rel="stylesheet" href="./js/jquery-easyui-1.7.0/themes/icon.css">
</head>
<body></body>
<script src="js/jquery-easyui-1.7.0/jquery.min.js"></script>
<script src="js/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
<script src="js/json.js"></script>
<script src="js/main.js"></script>
</html></textarea></div><div class="code-test-right"><div id='textareaCoded' class="textareaCoded"><p id='html_code'> 请输入你的HTML/CSS代码 </p></div></div><a id="codeButton" href="#" class="easyui-linkbutton codeButton" data-options="iconCls:'icon-edit'">编译</a></div>
</section>

css

.main_right .code_test div{height: 100%;width: 50%;position: relative;
}
.main_right .code_test div textarea{height : 90%;width: 90%;background-color: #ffffc0;position: absolute;margin-left: 50%;transform: translateX(-50%);resize:none;
}
.main_right .code_test .code-test-left{float: left;
}
.main_right .code_test .code-test-right{float: right;
}
.main_right .code_test .code-test-right .textareaCoded{height : 90%;width: 90%;position: absolute;margin-left: 50%;transform: translateX(-50%);background-color: #ffffc0;border: 1px solid #000;user-select: none;
}
.codeButton{position: absolute;left: 50%;transform: translateX(-50%);bottom: 30px;
}

js

$("#codeButton").click(function () {document.getElementById("html_code").innerHTML = document.getElementById("textareaCode").value;
});

HTML：HTML界面实现HTML代码编译运行界面相关推荐

该段代码编译运行后显示的是蓝色背景，白色闪烁字的效果
int main(int argc,char **argv) { printf("\033[44;37;5m hello world\033[0m\n"); ...
【问题待解决】自定义控件设计界面报错，编译运行正常
[问题待解决]自定义控件设计界面报错,编译运行正常参考文章: (1)[问题待解决]自定义控件设计界面报错,编译运行正常 (2)https://www.cnblogs.com/cnDqf/p/4171 ...
caffe SSD 代码编译运行流程及问题解决
caffe SSD 代码编译运行流程及问题解决该文基于以下代码: https://github.com/weiliu89/caffe/tree/ssd down下来后,进入目录 -rw-rw-r-- ...
在线代码编译运行工具
在线代码编译运行工具如果需要学习语言,比如练习一些算法,或者跑一些别人写的代码,有一些语言特性不太了解需要写一些简单的 demo 做一些验证,那么先搭建一个环境去跑就有一点麻烦了,无需搭建本地环境的 ...
cmd命令行进行C++代码编译运行；实现进程调度和存储管理
最近刚考完一门,也算是有点闲暇时间,写个博客,就当做操作系统实验的笔记吧. 客官先别急着白嫖点个赞再看吧求求了文章目录一.在cmd命令行下编译运行C++源代码 1.进入目标目录 2. ...
VTK Example代码编译运行
在VTK源码包的Example中,每个模块的例子都有一个CMakeList文件,可之间编译运行. 但VTK版本更新快,模块经常小改,而对于VTK6.x的Example的CMakeLists却没有改动 ...
OpenCV神经网络ANN代码编译运行与解读（一）
运行环境搭建:参考<VS2013安装OpenCV4.1版本并搭建一个小程序> 基于OpenCV4.1.0中neural_network.cpp的例子代码. 参考了<OpenCV3[神 ...
OpenCV神经网络ANN代码编译运行与解读（二）
[转载自]<OpenCV笔记(4)实现神经网络(ANN)> 作者的原文参考了:<OpenCV中使用神经网络 CvANN_MLP> 实际上的预测结果是并非一个确定值,所以即使用训 ...
java class文件代码_java_基础——用代码编译.java文件+加载class文件
java_基础--用代码编译.java文件+加载class文件 java_基础--用代码编译.java文件+加载class文件 [简单编译的流程] package com.zjm.www.test; ...
python界面开发哪个好用_python界面开发工具哪个好？
俗话说,好刃才能成好刀,找到适合自己的且功能全面的pytho界面开发工具也一样如此,满足项目使用,我们才能有效率,制作完美的项目工程,然而关于界面开发工具有很多,我们要怎么去选择呢?哪个才是最好的呢? ...

HTML：HTML界面实现HTML代码编译运行界面

结合EasyUI一起写的

运行效果

核心代码

css

js

HTML：HTML界面实现HTML代码编译运行界面相关推荐

最新文章

热门文章