|
|
工具版本兼容问题
浏览器上常见的弹出框有
警告框，确认框，提示框 这些都是通过调用window的方法实现的。
比如警告框用的是window.alert("警告内容")，因为很常用，所以就把window省略掉，直接使用alert
示例
1
:
警告框
示例
2
:
确认框
示例
3
:
输入框
警告框 alert，常用于消息提示，比如注册成功等等
");
window.frames["iframe_show1166"].document.write(decodeHtml($("textarea#stepcodeTextarea1166").val()));
window.frames["iframe_show1166"].document.close();
$(window.frames["iframe_show1166"]).load(function(){
$("#iframe_show1166").height($("#iframe_show1166").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1166").height($("#iframe_show1166").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script>
function register(){
alert("注册成功");
}
</script>
<br>
<button onclick="register()">注册</button>
<script>
function register(){
alert("注册成功");
}
</script>
<br>
<button onclick="register()">注册</button>
");
window.frames["iframe1166"].document.write(decodeHtml(code1166));
window.frames["iframe1166"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1166"]).load(function(){
$("#iframe1166").height($("#iframe1166").contents().find("body").height()+showittryitheight);
});
$("#iframe1166").height($("#iframe1166").contents().find("body").height()+showittryitheight);
alreadyWriteCode1166 = code1166;
$("#rendering1166").hide();
$("#rendered1166").show();
}
var tRereshRetry2DemoPanel1166 = setInterval(rereshRetry2DemoPanel1166,1000);
var binded1166 = false;
$("textarea#stepcodeTextarea1166").keyup(function(){
if(!binded1166){
$(window).bind('beforeunload',function(){
binded1166 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1166 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1166!=newCode){
// window.frames["iframe1166"].document.write("
");
// window.frames["iframe1166"].document.write(decodeHtml($("textarea#stepcodeTextarea1166").val()));
// window.frames["iframe1166"].document.close();
// $(window.frames["iframe1166"]).load(function(){
// $("#iframe1166").height($("#iframe1166").contents().find("body").height()+showittryitheight);
// });
// code1166 = newCode;
// }
});
$(".tryButton1166").click(function(){
$("#tryDiv1166").show();
$("#stepcodeTextarea1166").focus();
$("#stepcodeTextarea1166").height(200);
$("#iframe1166").height(0);
window.frames["iframe1166"].document.write("
");
window.frames["iframe1166"].document.write(decodeHtml($("textarea#stepcodeTextarea1166").val()));
window.frames["iframe1166"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1166"]).load(function(){
$("#iframe1166").height($("#iframe1166").contents().find("body").height()+showittryitheight);
});
$("#iframe1166").height($("#iframe1166").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1166.focus();
editor1166.setSize(null, "250");
$("#rendering1166").hide();
$("#rendered1166").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 editor1166 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1166"), {
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);
}
}
});
editor1166.on("change",function(doc){
if(!binded1166){
$(window).bind('beforeunload',function(){
binded1166 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1166 = newCode;
$("textarea#stepcodeTextarea1166").val(newCode);
if(alreadyWriteCode1166!=code1166){
lastModifedTime1166 = new Date().getTime();
$("#rendering1166").show();
$("#rendered1166").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1166 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1166.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1166").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
确认框 confirm，常用于危险性操作的确认提示。 比如删除一条记录的时候，弹出确认框
confirm返回基本类型的Boolean true或者false
");
window.frames["iframe_show1167"].document.write(decodeHtml($("textarea#stepcodeTextarea1167").val()));
window.frames["iframe_show1167"].document.close();
$(window.frames["iframe_show1167"]).load(function(){
$("#iframe_show1167").height($("#iframe_show1167").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1167").height($("#iframe_show1167").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script>
function del(){
var d = confirm("是否要删除");
alert(typeof d + " " + d);
}
</script>
<br>
<button onclick="del()">删除</button>
<script>
function del(){
var d = confirm("是否要删除");
alert(typeof d + " " + d);
}
</script>
<br>
<button onclick="del()">删除</button>
");
window.frames["iframe1167"].document.write(decodeHtml(code1167));
window.frames["iframe1167"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1167"]).load(function(){
$("#iframe1167").height($("#iframe1167").contents().find("body").height()+showittryitheight);
});
$("#iframe1167").height($("#iframe1167").contents().find("body").height()+showittryitheight);
alreadyWriteCode1167 = code1167;
$("#rendering1167").hide();
$("#rendered1167").show();
}
var tRereshRetry2DemoPanel1167 = setInterval(rereshRetry2DemoPanel1167,1000);
var binded1167 = false;
$("textarea#stepcodeTextarea1167").keyup(function(){
if(!binded1167){
$(window).bind('beforeunload',function(){
binded1167 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1167 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1167!=newCode){
// window.frames["iframe1167"].document.write("
");
// window.frames["iframe1167"].document.write(decodeHtml($("textarea#stepcodeTextarea1167").val()));
// window.frames["iframe1167"].document.close();
// $(window.frames["iframe1167"]).load(function(){
// $("#iframe1167").height($("#iframe1167").contents().find("body").height()+showittryitheight);
// });
// code1167 = newCode;
// }
});
$(".tryButton1167").click(function(){
$("#tryDiv1167").show();
$("#stepcodeTextarea1167").focus();
$("#stepcodeTextarea1167").height(200);
$("#iframe1167").height(0);
window.frames["iframe1167"].document.write("
");
window.frames["iframe1167"].document.write(decodeHtml($("textarea#stepcodeTextarea1167").val()));
window.frames["iframe1167"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1167"]).load(function(){
$("#iframe1167").height($("#iframe1167").contents().find("body").height()+showittryitheight);
});
$("#iframe1167").height($("#iframe1167").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1167.focus();
editor1167.setSize(null, "250");
$("#rendering1167").hide();
$("#rendered1167").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 editor1167 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1167"), {
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);
}
}
});
editor1167.on("change",function(doc){
if(!binded1167){
$(window).bind('beforeunload',function(){
binded1167 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1167 = newCode;
$("textarea#stepcodeTextarea1167").val(newCode);
if(alreadyWriteCode1167!=code1167){
lastModifedTime1167 = new Date().getTime();
$("#rendering1167").show();
$("#rendered1167").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1167 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1167.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1167").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
输入框 prompt，用于弹出一个输入框，供用户输入相关信息。 因为弹出的界面并不好看，很有可能和网站的风格不一致，所以很少会在实际工作中用到。
");
window.frames["iframe_show1168"].document.write(decodeHtml($("textarea#stepcodeTextarea1168").val()));
window.frames["iframe_show1168"].document.close();
$(window.frames["iframe_show1168"]).load(function(){
$("#iframe_show1168").height($("#iframe_show1168").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1168").height($("#iframe_show1168").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script>
function p(){
var name = prompt("请输入用户名:");
alert("您输入的用户名是:" + name);
}
</script>
<br>
<button onclick="p()">请输入用户名</button>
<script>
function p(){
var name = prompt("请输入用户名:");
alert("您输入的用户名是:" + name);
}
</script>
<br>
<button onclick="p()">请输入用户名</button>
");
window.frames["iframe1168"].document.write(decodeHtml(code1168));
window.frames["iframe1168"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1168"]).load(function(){
$("#iframe1168").height($("#iframe1168").contents().find("body").height()+showittryitheight);
});
$("#iframe1168").height($("#iframe1168").contents().find("body").height()+showittryitheight);
alreadyWriteCode1168 = code1168;
$("#rendering1168").hide();
$("#rendered1168").show();
}
var tRereshRetry2DemoPanel1168 = setInterval(rereshRetry2DemoPanel1168,1000);
var binded1168 = false;
$("textarea#stepcodeTextarea1168").keyup(function(){
if(!binded1168){
$(window).bind('beforeunload',function(){
binded1168 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1168 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1168!=newCode){
// window.frames["iframe1168"].document.write("
");
// window.frames["iframe1168"].document.write(decodeHtml($("textarea#stepcodeTextarea1168").val()));
// window.frames["iframe1168"].document.close();
// $(window.frames["iframe1168"]).load(function(){
// $("#iframe1168").height($("#iframe1168").contents().find("body").height()+showittryitheight);
// });
// code1168 = newCode;
// }
});
$(".tryButton1168").click(function(){
$("#tryDiv1168").show();
$("#stepcodeTextarea1168").focus();
$("#stepcodeTextarea1168").height(200);
$("#iframe1168").height(0);
window.frames["iframe1168"].document.write("
");
window.frames["iframe1168"].document.write(decodeHtml($("textarea#stepcodeTextarea1168").val()));
window.frames["iframe1168"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1168"]).load(function(){
$("#iframe1168").height($("#iframe1168").contents().find("body").height()+showittryitheight);
});
$("#iframe1168").height($("#iframe1168").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1168.focus();
editor1168.setSize(null, "250");
$("#rendering1168").hide();
$("#rendered1168").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 editor1168 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1168"), {
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);
}
}
});
editor1168.on("change",function(doc){
if(!binded1168){
$(window).bind('beforeunload',function(){
binded1168 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1168 = newCode;
$("textarea#stepcodeTextarea1168").val(newCode);
if(alreadyWriteCode1168!=code1168){
lastModifedTime1168 = new Date().getTime();
$("#rendering1168").show();
$("#rendered1168").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1168 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1168.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1168").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
