参考
练习-黄鹤的界面，使用javascript做出一个相同的功能出来
");
window.frames["iframe_show2903"].document.write(decodeHtml($("textarea#stepcodeTextarea2903").val()));
window.frames["iframe_show2903"].document.close();
$(window.frames["iframe_show2903"]).load(function(){
$("#iframe_show2903").height($("#iframe_show2903").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2903").height($("#iframe_show2903").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<script>
function generate(){
var location = $("location");
var companyType= $("companyType");
var companyName= $("companyName");
var bossName= $("bossName");
var money= $("money");
var product= $("product");
var unit= $("unit");
var result = location +"最大"+companyType+companyName+"倒闭了，王八蛋老板"+bossName+"吃喝嫖赌，欠下了"+money+"个亿，"
+ "带着他的小姨子跑了!我们没有办法，拿着"+product+"抵工资!原价都是一"+unit+"多、两"+unit+"多、三"+unit+"多的"+product+"，"
+ "现在全部只卖二十块，统统只要二十块!"+bossName+"王八蛋，你不是人!我们辛辛苦苦给你干了大半年，"
+ "你不发工资，你还我血汗钱，还我血汗钱!";
document.getElementById("result").value=result;
}
function $(id){
var value = document.getElementById(id).value;
return value;
}
</script>
<style>
body{
font-family: 宋体;
}
span{
display:inline-block;
border: 1px solid lightgray;
width:120px;
margin-bottom:5px;
}
button#generate{
width:80px;
height:30px;
}
textarea{
width:100%;
height:150px;
margin-top:20px;
}
</style>
<body>
<span>地名:</span> <input type="text" id ="location" value="浙江">
<span>公司类型:</span> <input type="text" id ="companyType" value="互联网公司">
<br>
<span>公司名称:</span> <input type="text" id ="companyName" value="阿里九九">
<span>老板姓名:</span> <input type="text" id ="bossName" value="牛风">
<br>
<span>money:</span> <input type="text" id ="money" value="一万">
<span>产品:</span> <input type="text" id ="product" value="贴膜">
<br>
<span>价格计量单位:</span> <input type="text" id ="unit" value="百">
<br>
<div align="center">
<button id="generate" onclick="generate()">生成</button>
<br>
<textarea id="result">浙江最大互联网公司阿里九九倒闭了，王八蛋老板牛风吃喝嫖赌，欠下了一万个亿，带着他的小姨子跑了!我们没有办法，拿着贴膜抵工资!原价都是一百多、两百多、三百多的贴膜，现在全部只卖二十块，统统只要二十块!牛风王八蛋，你不是人!我们辛辛苦苦给你干了大半年，你不发工资，你还我血汗钱，还我血汗钱!</textarea>
</div>
<br>
</body>
</html>
<html>
<script>
function generate(){
var location = $("location");
var companyType= $("companyType");
var companyName= $("companyName");
var bossName= $("bossName");
var money= $("money");
var product= $("product");
var unit= $("unit");
var result = location +"最大"+companyType+companyName+"倒闭了，王八蛋老板"+bossName+"吃喝嫖赌，欠下了"+money+"个亿，"
+ "带着他的小姨子跑了!我们没有办法，拿着"+product+"抵工资!原价都是一"+unit+"多、两"+unit+"多、三"+unit+"多的"+product+"，"
+ "现在全部只卖二十块，统统只要二十块!"+bossName+"王八蛋，你不是人!我们辛辛苦苦给你干了大半年，"
+ "你不发工资，你还我血汗钱，还我血汗钱!";
document.getElementById("result").value=result;
}
function $(id){
var value = document.getElementById(id).value;
return value;
}
</script>
<style>
body{
font-family: 宋体;
}
span{
display:inline-block;
border: 1px solid lightgray;
width:120px;
margin-bottom:5px;
}
button#generate{
width:80px;
height:30px;
}
textarea{
width:100%;
height:150px;
margin-top:20px;
}
</style>
<body>
<span>地名:</span> <input type="text" id ="location" value="浙江">
<span>公司类型:</span> <input type="text" id ="companyType" value="互联网公司">
<br>
<span>公司名称:</span> <input type="text" id ="companyName" value="阿里九九">
<span>老板姓名:</span> <input type="text" id ="bossName" value="牛风">
<br>
<span>money:</span> <input type="text" id ="money" value="一万">
<span>产品:</span> <input type="text" id ="product" value="贴膜">
<br>
<span>价格计量单位:</span> <input type="text" id ="unit" value="百">
<br>
<div align="center">
<button id="generate" onclick="generate()">生成</button>
<br>
<textarea id="result">浙江最大互联网公司阿里九九倒闭了，王八蛋老板牛风吃喝嫖赌，欠下了一万个亿，带着他的小姨子跑了!我们没有办法，拿着贴膜抵工资!原价都是一百多、两百多、三百多的贴膜，现在全部只卖二十块，统统只要二十块!牛风王八蛋，你不是人!我们辛辛苦苦给你干了大半年，你不发工资，你还我血汗钱，还我血汗钱!</textarea>
</div>
<br>
</body>
</html>
");
window.frames["iframe2903"].document.write(decodeHtml(code2903));
window.frames["iframe2903"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2903"]).load(function(){
$("#iframe2903").height($("#iframe2903").contents().find("body").height()+showittryitheight);
});
$("#iframe2903").height($("#iframe2903").contents().find("body").height()+showittryitheight);
alreadyWriteCode2903 = code2903;
$("#rendering2903").hide();
$("#rendered2903").show();
}
var tRereshRetry2DemoPanel2903 = setInterval(rereshRetry2DemoPanel2903,1000);
var binded2903 = false;
$("textarea#stepcodeTextarea2903").keyup(function(){
if(!binded2903){
$(window).bind('beforeunload',function(){
binded2903 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2903 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2903!=newCode){
// window.frames["iframe2903"].document.write("
");
// window.frames["iframe2903"].document.write(decodeHtml($("textarea#stepcodeTextarea2903").val()));
// window.frames["iframe2903"].document.close();
// $(window.frames["iframe2903"]).load(function(){
// $("#iframe2903").height($("#iframe2903").contents().find("body").height()+showittryitheight);
// });
// code2903 = newCode;
// }
});
$(".tryButton2903").click(function(){
$("#tryDiv2903").show();
$("#stepcodeTextarea2903").focus();
$("#stepcodeTextarea2903").height(200);
$("#iframe2903").height(0);
window.frames["iframe2903"].document.write("
");
window.frames["iframe2903"].document.write(decodeHtml($("textarea#stepcodeTextarea2903").val()));
window.frames["iframe2903"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2903"]).load(function(){
$("#iframe2903").height($("#iframe2903").contents().find("body").height()+showittryitheight);
});
$("#iframe2903").height($("#iframe2903").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2903.focus();
editor2903.setSize(null, "250");
$("#rendering2903").hide();
$("#rendered2903").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2903 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2903"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2903.on("change",function(doc){
if(!binded2903){
$(window).bind('beforeunload',function(){
binded2903 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2903 = newCode;
$("textarea#stepcodeTextarea2903").val(newCode);
if(alreadyWriteCode2903!=code2903){
lastModifedTime2903 = new Date().getTime();
$("#rendering2903").show();
$("#rendered2903").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2903 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2903.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2903").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
Or
姿势不对,事倍功半!
