web第四课html课堂笔记

最新推荐文章于 2023-07-28 13:02:05 发布

jjfly999

最新推荐文章于 2023-07-28 13:02:05 发布

阅读量1.3k

点赞数 2

分类专栏： 2018年前的JAVA 文章标签： jsp 定时器页面的操作

本文链接：https://blog.csdn.net/jjfly999/article/details/51571058

版权

2018年前的JAVA 专栏收录该内容

134 篇文章 0 订阅

订阅专栏

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);