传智播客学习笔记07

最新推荐文章于 2020-01-29 19:44:09 发布

zhangyu1205

最新推荐文章于 2020-01-29 19:44:09 发布

阅读量430

点赞数

文章标签： input javascript button function 浏览器 div

本文链接：https://blog.csdn.net/zhangyu1205/article/details/7084284

版权

今天练习了很多有关js的代码。

下面是一个加法运算页面：

<html>
<head>
	<script language="javascript" src="zy07.js"></script>
	<script>
		function display()
		{
		
			var first=document.getElementById("first").value;
			var second=document.getElementById("second").value;
			document.getElementById("result").value = jia(first,second);
			
		}
	</script>
	
	
</head>
<body>
	<form>
		第一个数：<input type="text" id="first"><br/>
		第二个数：<input type="text" id="second"><br/>
		结果：<input type="text" id="result" οnclick="display()">
		<!--<input type="button"  value="确定">-->
	
	</form>
</body>
</html>

我写了一个表单，表单有三个输入框，前两个用来输入要进行运算的值，最后一个用来输出结果。我点击最后一个输入框的时候就会调用js函数进行运算，然后让结果显示在第三个输入框中。

此外我还专门独立写了一个加法运算的js文件，zy07.js，代码如下：

	function jia(first,second)
	{ 
		first = parseInt(first);
		second = parseInt(second);
		return first+second;
	
	}

在做这个东西的时候，我遇到了一个问题.刚开始的时候我是这样写的：

<script language="javascript" src="zy07.js">
		function display()
		{
		
			var first=document.getElementById("first").value;
			var second=document.getElementById("second").value;
			document.getElementById("result").value = jia(first,second);
			
		}
	</script>

也就是说我只用了一次<script>标签，这个标签既引用了zy07.js文件，又在内部定义了js函数，这种做法的结果是js函数无法被调用。所以以后大家一定要注意这个小细节啊！

下面这个代码是让一个红色方框在浏览器页面进行移动：

<html>
	<head>
		<style>
         div{background-color:red;width:100px;height:100px;position:absolute;}
        </style>
		<script>
		var y=0;
		var x=0;
		var t=0;
		function display()
		 {
		 	
		 if(y>400)
		 	{
		 		x++;
		 		y=400;
		 		if(x>900){return;}
		 		
		 	}
		  y++;
		 var d=document.getElementById("d");
		 d.style.top=y;
		 d.style.left=x;
		 t=setTimeout("display()",1);
		 	
		 		
		 }
	 function stop()
	
	 {clearTimeout(t);}
		</script>
	
	
	</head>
	<body>
		<div id="d">大盒子</div><br><br><br><br><br><br><br><br>
      <input type="button" value="移动" οnclick="display()">
      <input type="button" value="停止" οnclick="stop()">
	
	</body>



</html>

这段代码用到的核心函数是setTimeout，这个函数可以延迟执行某个js函数，比如这段话t=setTimeout("display()",1);的效果就是让display（）这个方法每隔1秒就执行一次，每次执行的时候红色方框的位置都发生了改变，从而可以看到红色方框移动的动画效果。