前端JS-22

目录

定时器的应用(一)

定时器的应用(二)

定时器的应用(三)

轮播图界面

点击按钮切换图片

完成轮播图

类的操作


定时器的应用(一)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#box1{
				width: 100px;
				height: 100px;
				background-color:red ;
				position: absolute;
				left: 0;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				//获取box1
				var box1=document.getElementById("box1");
				//获取btn01
				var btn01=document.getElementById("btn01");
				
				//定义一个变量,用来保存定时器的标识
				var timer;
				//点击按钮以后,使box1向右移动(left值增大)
				btn01.onclick=function(){
					
					//开启一个定时器。用来执行动画效果
					setInterval(function(){
						
						//获取box1的原来的left值
						
						var oldValue=parseInt(getStyle(box1,"left"));
						
						alert(oldValue);
						
						//开启一个定时器,用来执行动画效果
						var timer=setInterval(function(){
							//获取box1的原来的left值
							
							//关闭上一个定时器
							clearInterval(timer);
						
						var oldValue=parseInt(getStyle(box1,"left"));
						
						//在旧值的基础上增加
						var newValue=oldValue+19;
						
						//判断newValue是否大于800
						if (newValue>800) {
							newValue=800;
						}
						
						//将新值设置给box1
						box1.style.left=newValue+"px";
						
						//当元素移动到800px时,使其停止执行动画
						if (newValue>=800) {
							//达到目标,关闭定时器
							clearInterval(timer);
						}
					},30);
				};
			};
			/*
			 * 定义一个函数,用来获取指定元素的当前的样式
			 * 参数:
			 * obj 要获取样式得到元素
			 * name 要获取的样式名
			 */
			function getStyle(obj,name){
				
				if (window.getComputedStyle) {
					//正常浏览器的方式,具有getComputedStyle()方法
					return getComputedStyle(obj,null)[name];
				}else{
					//IE8的方式,没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
				}
		</script>
	</head>
	<body>
		<button id="btn01">点击按钮以后box1向右移动</button>
		
		<br /><br />
		<div id="box1"></div>
		
		<div style="width: 0;height: 1000px;border-left:1px;black solid;position: absolute;top: 0;"></div>
	</body>
</html>

定时器的应用(二)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#box1{
				width: 100px;
				height: 100px;
				background-color:red ;
				position: absolute;
				left: 0;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				//获取box1
				var box1=document.getElementById("box1");
				//获取btn01
				var btn01=document.getElementById("btn01");
				
				//获取btn02
				var btn02=document.getElementById("btn01");
				
				
				//点击按钮以后,使box1向右移动(left值增大)
				btn01.onclick=function(){
					
					//开启一个定时器。用来执行动画效果
					setInterval(function(){
						
						//获取box1的原来的left值
						
						var oldValue=parseInt(getStyle(box1,"left"));
						
						alert(oldValue);
						
						//开启一个定时器,用来执行动画效果
						var timer=setInterval(function(){
							//获取box1的原来的left值
							
							//关闭上一个定时器
							clearInterval(timer);
						
						var oldValue=parseInt(getStyle(box1,"left"));
						
						//在旧值的基础上增加
						var newValue=oldValue+19;
						
						//判断newValue是否大于800
						if (newValue>800) {
							newValue=800;
						}
						
						//将新值设置给box1
						box1.style.left=newValue+"px";
						
						//当元素移动到800px时,使其停止执行动画
						if (newValue>=800) {
							//达到目标,关闭定时器
							clearInterval(timer);
						}
					},30);
				};
				
				
				//点击按钮以后,使box1向左移动(left值减小)
				btn02.onclick=function(){
					move(box1,0,-10);
					
			};
			//定义一个变量,用来保存定时器的标识
				var timer;
			//尝试创建一个可以执行简单动画的函数
			
			/*
			 * 参数:
			 * obj:要执行动画的对象
			 * target:执行动画的目标位置
			 * speed:移动的速度(正数向右移动,负数向左移动)
			 */
			function move(obj,target,speed){
				//关闭上一个定时器
							clearInterval(timer);
							
							//获取元素目前的位置
							var current=parseInt(getStyle(obj,"left"));
							
							//判断速度的正负值
							//如果从0向800移动,则speed为正
							//如果从800向0移动,则speed为负
							if(current>target){
								//此时速度应为负值
								speed=-speed;
							}
						
						var oldValue=parseInt(getStyle(obj,"left"));
						
						//在旧值的基础上增加
						var newValue=oldValue+speed;
						
						//判断newValue是否大于800
						//从800向0移动
						//向左移动时,需要判断newValue是否小于target
						//向右移动时,需要判断newValue是否大于target
						if ((speed<0&&new Value<target)||(speed>0&&newValue>target)) {
							newValue=target;
						}
						
						//将新值设置给box1
						obj.style.left=newValue+"px";
						
						//当元素移动到800px时,使其停止执行动画
						if (newValue=0) {
							//达到目标,关闭定时器
							clearInterval(timer);
						}
			}
			/*
			 * 定义一个函数,用来获取指定元素的当前的样式
			 * 参数:
			 * obj 要获取样式得到元素
			 * name 要获取的样式名
			 */
			function getStyle(obj,name){
				
				if (window.getComputedStyle) {
					//正常浏览器的方式,具有getComputedStyle()方法
					return getCompu
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值