一些自学的html/javascript代码（setTimeout， alert，定格动画）

最新推荐文章于 2022-04-22 15:41:31 发布

xiaoout

最新推荐文章于 2022-04-22 15:41:31 发布

阅读量650

点赞数

分类专栏：杂学文章标签： setTimeout alert 定格动画 html javascript

本文链接：https://blog.csdn.net/u010398265/article/details/46279429

版权

杂学专栏收录该内容

6 篇文章 0 订阅

订阅专栏

定格动画把代码中图路径改下图 1 2 3 jpg 的顺序就是上面1 2 3 这样很容易可以看出来定格动画的效果。

解释下代码。

我们先从body中看，table，我前面博文有，那就是添加两个button也就是按钮，type（类型）button就可以是按钮了，当然想要编辑框就是type=“text”，这些前面的博文都有，那么主要看js函数调用。

主要是函数递归调用以及setTimeout的用法。函数里面递归调用就把另外函数直接写在这个函数里面就可以了，setTimeout的用法就是，setTImeout(‘函数’，时间ms) 注意时间是毫秒。

fun_flag函数是用来执行状态的，flag是用来表示开始动和停止动，我用flag==0 表示开始，flag == 1 表示停止。reclick_flag表示重新点start按钮了吗？点过一次就用1表示，只有点了end就赋0，这样就是按第一次点start的时间调用，否则时间乱套了。

那么document.getElementById('1').src 就是这个文件页面通过id元素获得信息这个src信息，括号里的就是id号。还可以有其他方式获取信息。

顺带说下alert就是显示一个消息框可以自己测试下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>定格动画</title>

	<script language="javascript">		
		var flag = 1 ; 
		var reclick_flag = 0 ;
		function fun_flag(sta){
			
				if(sta=="start"){
					if(!reclick_flag){
						flag = 0; 
						reclick_flag = 1;
						fun_change1();
						}
					/*else{
						alert("dont click frequetly")
						}*/
					}
				else{
					flag = 1;
					reclick_flag = 0;
					}
				
			}
		
		function fun_change1(){
				if(!flag){
					document.getElementById('1').src='../imags/拼图/2.jpg';
					setTimeout('fun_change2()',1000);
					}
			}
		function fun_change2(){
				if(!flag){
					document.getElementById('1').src='../imags/拼图/3.jpg';
					if(!flag)
					setTimeout('fun_change3()',1000);
					}
			}
		function fun_change3(){
				if(!flag){
					document.getElementById('1').src='../imags/拼图/1.jpg';
					if(!flag)
					setTimeout('fun_change1()',1000);
					}
			}


	</script>
</head>

<body>
			<hr><br><br>

			<table align="center" border="1">
			<tr>
            	<td colspan="2"><img id="1" src="../imags/拼图/1.jpg" width="110"/></td> 
            </tr>           
                <td><input id="0" type="button" name="start" value="start" οnclick="fun_flag(this.value)"/></td>
                <td><input id="1" type="button" name="end" value="end" οnclick="fun_flag(this.value)"/></td>
            </table>
</body>
</html>