web第四课开始引入了.jsp文件,为了方便后续的学习,当前的学习没有发现与.html页面的太过明显的区别,就是在编写的时候要修改字符串编码规则。
添加一个文本框,添加一个按钮:
</head>
<body>
<input type="text" id="test1"/>
<input type="button" value="选择" οnclick="selectWindows();"/>
</body>
</html>
按下选择按钮后弹出一个页面:
window.open按钮里面第一个是.jsp页面的相对路径,第二个窗体名字,第三个是窗体的尺寸大小,第四个没用到,选填。
<script type="text/javascript">
function selectWindows(){
window.open("selectpag.jsp", "", "width=200,height=200");
}
</script>
弹出窗口出现选择框,并测试打印选择的值:
<script type="text/javascript">
function selectValue(it){
alert(it.value);
}
</script>
</head>
<body οnlοad="">
<select οnchange="selectValue(this);">
<option value="百事可乐">百事可乐</option>
<option value="雪碧">雪碧</option>
<option value="绿茶">绿茶</option>
</select>
单选按钮实现文字选择,返回结果到上一页的文本框:
function selectInput(it){
window.opener.document.getElementById("test1").value = it.value;
window.close();
}
<input type="radio" value="百事可乐" checked="checked" οnclick="selectInput(this)"/>百事可乐<br>
<input type="radio" value="雪碧" οnclick="selectInput(this)"/>雪碧<br>
<input type="radio" value="绿茶" οnclick="selectInput(this)">绿茶<br>
页面的跳转:
function go(){
window.location.href = "index3.jsp";
}
<input type="button" value="跳转"οnclick="go();"/>
按下了跳转按钮
弹出输入窗口:
<input type="button" value="点击输入" οnclick="insertContent();"/>
function insertContent(){
var v = window.prompt("请输入你的名字","小明");
alert(v);
}
删除提示框:
function del(){
var flag = window.confirm("确认删除?");
if(flag){
alert("删除了");
}else{
alert("不删除了");
}
}
<input type="button" value="删除" οnclick="del();"/>
按下了确定后:
按下了取消按钮
设置自动计时时钟:
<body>
当前时间是:<span id="time"></span>
<input type="button" value="暂停"/>
<input type="button" value="开始"/>
</body>
</html>
<script type="text/javascript">
var a = null;
function showTime(){
var date = new Date();
var date1 = date.toLocaleDateString();
var date2 = date.toLocaleTimeString();
document.getElementById("time").innerHTML = date1+" "+date2;
a = window.setTimeout("showTime()",1000);
}
a = window.setTimeout("showTime()",1000);
</script>
定时器的作用,暂停时间和重启时间:
<input type="button" value="暂停" οnclick="stop();"/>
<input type="button" value="开始" οnclick="start();"/>
function stop(){
clearInterval(a);
}
function start(){
a = window.setTimeout("showTime()",1000);
}
另一种实现定时器的方法:
function go(){
var date = new Date();
var date1 = date.toLocaleDateString();
var date2 = date.toLocaleTimeString();
document.getElementById("time").innerHTML = date1 + date2;
}
var b = setInterval("go()",1000);
function stop(){
clearInterval(b);
}
function start(){
b = setInterval("go()",1000);