JavaScript常用文档对象_设计一个带有文本框的表单页面,当鼠标在表单上移动时,把相对于表单的鼠标坐标显示-CSDN博客

本文链接：https://blog.csdn.net/qq_44830627/article/details/106769530

设计一个含有表单的页面，在表单上放入一个文本框，编写程序，当鼠标在页面上移动时，鼠标的坐标将显示在这个文本框中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="form" method="post">
		坐标(x,y)<input type="text"  size="20" name="mouseposition"/>
		</form>
		<script type="text/javascript">
			document.onmousemove=function(){
				var x=window.event.clientX;
				var y=window.event.clientY;
				form.mouseposition.value=x+","+y;
			}
		</script>
	</body>
</html>

在这里插入图片描述
2. 应用appendChild()方法和getElementById()方法实现年月日的联动的功能。当改变“年”菜单和“月”菜单的值的时候，“日”菜单的值的范围也会相应的改变。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>年月日的联动</title>
	</head>
	<body>
		<script type="text/javascript">
			 function append(d,v){
				  var option=document.createElement("option");//创建元素option
				  option.value=v;//把参数v作为元素的值
				  option.innerText=v+"日";//把参数v作为元素的显示内容
				  d.appendChild(option);//把元素option作为参数d的子节点
				}
			    function getday(){
				  var y=form1.year.value;//取得年份的值
				  var m=form1.month.value;//取得月份的值
				  var d=document.getElementById("day");//定位到id=day的节点
				  d.innerHTML="";//把id=day节点的内容清空
				  if(m==4 || m==6 || m==9 || m==11){//如果月份的值是4或6或9或11
				    for(j=1;j<=30;j++){
					  append(d,j);//把1到30循环加到天数当中
					}
				  }else if(m==2){//如果月份的值是2
				    if(y%4==0 || y%400==0 && y%100!=0){//如果年份是闰年
					  for(j=1;j<=29;j++){
					    append(d,j);//把1到29循环加到天数当中
					  }
					}else{
					  for(j=1;j<=28;j++){
					    append(d,j);//不是闰年就把1到28循环加到天数当中
					  }
					}
				  }else{//否则如果月份的值是1或3或5或7或8或10或12
				    for(j=1;j<=31;j++){
					  append(d,j);//把1到31循环加到天数当中
					}
				  }
				}
		</script>
		<form id="form1" name="form1" method="post" action="">
			<select name="year" id="year" onchange="getday()">
		     <script type="text/javascript">
		     	 var mydate=new Date();
		     			  for(i=1990;i<=mydate.getFullYear();i++){
		     			    document.write("<option value='"+i+"' "+(i==1986?"selected":"")+">"+i+"年</option>");
		     			  }
		     </script>
			 </select>
			 <select name="month" id="month" onchange="getday()">
				 <script type="text/javascript">
				 	  for(i=1;i<=12;i++){
				 			    document.write("<option value='"+i+"' "+(i==1?"selected":"")+">"+i+"月</option>");
				 			  }
				 </script>
				 </select>
				 <select name="day" id="day">
					 <script type="text/javascript">
					 	 for(i=1;i<=31;i++){
					 			    document.write("<option value='"+i+"' "+(i==1?"selected":"")+">"+i+"日</option>");
					 			  }
					 </script>
					 </select>
					 </form>
	</body>
</html>

在这里插入图片描述

3. 使用Window对象的setTimeout()方法和clearTimeout()方法设置一个简单的计时器，当单击“开始计时”按钮后启动计时器，输入框会从0开始进行计时，单击“暂停计时”后可以暂停计时。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var flag=0;
				var timeID;
				function beg(){
					var i=form1.num.value;
					i++;
					form1.num.value=i;
					timeID=setTimeout("beg()",1000);
				}
				function sta(){
					if(flag==0){
						beg();
						flag=1;
					}
				}
				function pau(){
					clearTimeout(timeID);
					flag=0;
				}
		</script>
		<form id="form1" name="form1" method="post" action="">
			<input type="text" name="num" size="1" value="0" />
			<input type="button" name="start" value="开始计时" onclick="sta();" />
			<input type="button" name="pause" value="暂停计时" onclick="pau();" />
		</form>
	</body>
</html>

在这里插入图片描述