html实时效果查看的实现
2017-11-22 14:55
375 查看
html实现实时查看效果的功能
1.如下面代码,将能够打开新页面查看我们在文本输入域中的代码效果
如下图,文本输入框中的table就是我们输入的内容
效果如下所示:
–如下图为新页面中的显示效果
2.同样的我们可以在当前页面进行查看效果,代码如下所示:
效果如下:
1.如下面代码,将能够打开新页面查看我们在文本输入域中的代码效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>M</title> <script type="text/javascript"> window.onload = function () { console.log(document); var runBtn = document.getElementById('input'); var runTextArea = document.getElementById('textarea'); runBtn.onclick = function() { var oNewWin = window.open('about:blank'); oNewWin.document.write(runTextArea.value); } } </script> </head> <body> <div> <input type='button' id="input" value='运行'/><br/> <textarea rows='10' cols='30' id="textarea" ></textarea> </div> </body> </html>
如下图,文本输入框中的table就是我们输入的内容
效果如下所示:
–如下图为新页面中的显示效果
2.同样的我们可以在当前页面进行查看效果,代码如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>M</title> <script type="text/javascript"> window.onload = function () { var runBtn = document.getElementById('input'); var runTextArea = document.getElementById('textarea'); var result = document.getElementById('result'); runBtn.onclick = function() { result.innerHTML = runTextArea.value; } } </script> </head> <body> <div> <input type='button' id="input" value='运行'/><br/> <textarea rows='10' cols='30' id="textarea" ></textarea> </div> <h5>效果展示:</h5> <div id="result"> </div> </body> </html>
效果如下:
相关文章推荐
- 利用Ajax生成ProgressBar:实现同类大批量数据批量生成Html,并实时显示进度条,可查看处理日志
- html5+css3实现抽奖活动的效果
- Html的Table与Echart的饼图实现联动效果
- 通过CSS样式实现的html背景色渐变效果
- html、css和jquery相结合实现简单的进度条效果实例代码
- Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换
- html风格tooltip效果的实现
- Js实现点击查看全文(类似今日头条、知乎日报效果)
- JS实现websocket长轮询实时消息提示的效果
- html+css实现百叶效果
- html轮播效果的实现
- PSD转HTML实例教程——利用JQuery插件实现图片滑动效果
- CSS+HTML实现3D图片旋转效果
- html5+css3实现2D动画效果演示
- Html走马灯效果实现
- [Javascript]如何在HTML中实现点击input输入框(获得焦点)后默认提示消失的效果
- 用HTML格式实现特殊效果呈现
- WEB前端-HTML-JavaScript实现内容滚动刷新的效果
- HTML标签marquee实现滚动效果
- Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换