【前端】JavaScript入门及实战131-135

于 2024-08-03 23:22:14 发布
阅读量392 收藏 2
点赞数 8
分类专栏： 【前端】JavaScript入门及实战（1-140） 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45980065/article/details/140898777
版权

文章目录

131 定时器（1）

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<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(){
		var box1 = document.getElementById("box1");
		var btn01 = document.getElementById("btn01");
				
		// 定义一个变量，用来保存定时器的标识
		var timer;
				
		// 点击按钮以后，使box1向右移动（left值增大）
		btn01.onclick = function(){
			// 关闭上一个定时器
			clearInterval(timer);
					
			// 开启一个定时器，用来执行动画效果
			timer = setInterval(function(){
				// 获取box1的原来的left值
				var oldValue = parseInt(getStyle(box1,"left"));
						
				// 在旧值的基础上增加
				var newValue = oldValue + 1;
						
				// 判断newValue是否大于800
				if(newValue > 800){
					newValue = 800;
				}
						
				// 将新值设置给box1
				box1.style.left = newValue + "px";
				// 当元素移动到800px时，使其停止执行动画
				if(newValue == 800){
					// 达到目标，关闭定时器
					clearInterval(timer);
				}			
			},30);
		};
	};
			
	/*
		定义一个函数，用来获取指定元素的当前的样式
		参数：1. obj 要获取样式的元素
			  2. 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; left: 800px;top:0;"></div>
</body>
</html>

132 定时器（2）

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<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(){
		var box1 = document.getElementById("box1");
		var btn01 = document.getElementById("btn01");
		var btn02 = document.getElementById("btn02");
		// 点击按钮以后，使box1向右移动（left值增大）
		btn01.onclick = function(){
			move(box1 , 800 , 10);
		};
				
		// 点击按钮以后，使box1向左移动（left值减小）
		btn02.onclick = function(){
			move(box1 , 0 , 10);
		};
	};
			
	// 定义一个变量，用来保存定时器的标识
	var timer;
			
	// 尝试创建一个可以执行简单动画的函数
	/*
		参数：1. obj:要执行动画的对象
			  2. target:执行动画的目标位置
			  3. 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;
		}
				
		// 开启一个定时器，用来执行动画效果
		timer = setInterval(function(){		
			// 获取box1的原来的left值
			var oldValue = parseInt(getStyle(obj,"left"));
						
			// 在旧值的基础上增加
			var newValue = oldValue + speed;
						
			// 判断newValue是否大于800
			// 从800 向 0移动
			// 向左移动时，需要判断newValue是否小于target
			// 向右移动时，需要判断newValue是否大于target
			if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
				newValue = target;
			}
						
			// 将新值设置给box1
			obj.style.left = newValue + "px";
						
			// 当元素移动到0px时，使其停止执行动画
			if(newValue == target){
				// 达到目标，关闭定时器
				clearInterval(timer);
			}
		},30);
	}

	/*
		定义一个函数，用来获取指定元素的当前的样式
		参数：1. obj 要获取样式的元素
			  2. 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>
	<button id="btn02">点击按钮以后box1向左移动</button>
	<br /><br />
	<div id="box1"></div>
	<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
</body>
</html>

133 定时器（3）

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
			
	#box1 {
		width: 100px;
		height: 100px;
		background-color: red;
		position: absolute;
		left: 0;
	}
			
	#box2 {
		width: 100px;
		height: 100px;
		background-color: yellow;
		position: absolute;
		left: 0;
		top: 200px;
	}		
</style>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
	window.onload = function(){	
		var box1 = document.getElementById("box1");
		var btn01 = document.getElementById("btn01");
		var btn02 = document.getElementById("btn02");
				
		// 点击按钮以后，使box1向右移动（left值增大）
		btn01.onclick = function(){
			move(box1 ,"left", 800 , 20);
		};
				
		// 点击按钮以后，使box1向左移动（left值减小）
		btn02.onclick = function(){
			move(box1 ,"left", 0 , 10);
		};
				
		// 获取btn03
		var btn03 = document.getElementById("btn03");
		btn03.onclick = function(){
			move(box2 , "left",800 , 10);
		};
				
		// 测试按钮
		var btn04 = document.getElementById("btn04");
		btn04.onclick = function(){
			//move(box2 ,"width", 800 , 10);
			//move(box2 ,"top", 800 , 10);
			//move(box2 ,"height", 800 , 10);
			move(box2 , "width" , 800 , 10 , function(){
				move(box2 , "height" , 400 , 10 , function(){
					move(box2 , "top" , 0 , 10 , function(){
						move(box2 , "width" , 100 , 10 , function(){
							
						});
					});
				});
			});
		};
	};
			
	// 定义一个变量，用来保存定时器的标识
	/*
		目前我们的定时器的标识由全局变量timer保存，
		所有的执行正在执行的定时器都在这个变量中保存
	*/
	//var timer;
</script>
</head>
<body>
	<button id="btn01">点击按钮以后box1向右移动</button>
	<button id="btn02">点击按钮以后box1向左移动</button>
	<button id="btn03">点击按钮以后box2向右移动</button>
	<button id="btn04">测试按钮</button>	
	<br /><br />	
	<div id="box1"></div>
	<div id="box2"></div>
	<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
</body>
</html>

134 轮播图

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
			
	/*
		设置outer的样式
	*/
	#outer {
		/*设置宽和高*/
		width: 520px;
		height: 333px;
		/*居中*/
		margin: 50px auto;
		/*设置背景颜色*/
		background-color: greenyellow;
		/*设置padding*/
		padding: 10px 0;
		/*开启相对定位*/
		position: relative;
		/*裁剪溢出的内容*/
		overflow: hidden;
	}
			
	/*设置imgList*/
	#imgList {
		/*去除项目符号*/
		list-style: none;
		/*设置ul的宽度*/
		/*width: 2600px;*/
		/*开启绝对定位*/
		position: absolute;
		/*设置偏移量*/
		/*
			每向左移动520px，就会显示到下一张图片
		*/
		left: 0px;
	}
	
	/*设置图片中的li*/
	#imgList li {
		/*设置浮动*/
		float: left;
		/*设置左右外边距*/
		margin: 0 10px;
	}
			
	/*设置导航按钮*/
	#navDiv {
		/*开启绝对定位*/
		position: absolute;
		/*设置位置*/
		bottom: 15px;
		/*设置left值
			outer宽度  520
			navDiv宽度 25*5 = 125
			520 - 125 = 395/2 = 197.5
		*/
		/*left: 197px;*/
	}
			
	#navDiv a {
		/*设置超链接浮动*/
		float: left;
		/*设置超链接的宽和高*/
		width: 15px;
		height: 15px;
		/*设置背景颜色*/
		background-color: red;
		/*设置左右外边距*/
		margin: 0 5px;
		/*设置透明*/
		opacity: 0.5;
		/*兼容IE8透明*/
		filter: alpha(opacity=50);
	}
			
	/*设置鼠标移入的效果*/
	#navDiv a:hover {
		background-color: black;
	}			
</style>
<!--引用工具-->
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
	window.onload = function(){
		// 获取imgList
		var imgList = document.getElementById("imgList");
		// 获取页面中所有的img标签
		var imgArr = document.getElementsByTagName("img");
		// 设置imgList的宽度
		imgList.style.width = 520 * imgArr.length + "px";
				
		/*设置导航按钮居中*/
		// 获取navDiv
		var navDiv = document.getElementById("navDiv");
		// 获取outer
		var outer = document.getElementById("outer");
		// 设置navDiv的left值
		navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
				
		// 默认显示图片的索引
		var index = 0;
		// 获取所有的a
		var allA = document.getElementsByTagName("a");
		// 设置默认选中的效果
		allA[index].style.backgroundColor = "black";
				
		/*
			点击超链接切换到指定的图片
			点击第一个超链接，显示第一个图片
			点击第二个超链接，显示第二个图片
		*/
		// 为所有的超链接都绑定单击响应函数
		for(var i = 0; i < allA.length; i++){
			// 为每一个超链接都添加一个num属性
			allA[i].num = i;
					
			// 为超链接绑定单击响应函数
			allA[i].onclick = function(){
				// 关闭自动切换的定时器
				clearInterval(timer);
				
				// 获取点击超链接的索引,并将其设置为index
				index = this.num;
						
				// 切换图片
				/*
					第一张  0 0
					第二张  1 -520
					第三张  2 -1040
				*/
				//imgList.style.left = -520*index + "px";
				// 设置选中的a
				setA();
						
				// 使用move函数来切换图片
				move(imgList , "left" , -520*index , 20 , function(){
					// 动画执行完毕，开启自动切换
					autoChange();		
				});			
			};
		}
		
		// 开启自动切换图片
		autoChange();
				
		// 创建一个方法用来设置选中的a
		function setA(){
			// 判断当前索引是否是最后一张图片
			if(index >= imgArr.length - 1){
				// 则将index设置为0
				index = 0;
				// 此时显示的最后一张图片，而最后一张图片和第一张是一摸一样
				// 通过CSS将最后一张切换成第一张
				imgList.style.left = 0;
			}
			// 遍历所有a，并将它们的背景颜色设置为红色
			for(var i = 0; i < allA.length; i++){
				allA[i].style.backgroundColor = "";
			}
					
			// 将选中的a设置为黑色
			allA[index].style.backgroundColor = "black";
		};		

		// 定义一个自动切换的定时器的标识
		var timer;
		// 创建一个函数，用来开启自动切换图片
		function autoChange(){
			// 开启一个定时器，用来定时去切换图片
			timer = setInterval(function(){
				// 使索引自增
				index++;
							
				// 判断index的值
				index %= imgArr.length;
							
				// 执行动画，切换图片
				move(imgList , "left" , -520*index , 20 , function(){
					// 修改导航按钮
					setA();
				});			
			},3000);
		}		
	};	
</script>
</head>
<body>
	<!-- 创建一个外部的div，来作为大的容器 -->
	<div id="outer">
		<!-- 创建一个ul，用于放置图片 -->
		<ul id="imgList">
			<li><img src="img/1.jpg"/></li>
			<li><img src="img/2.jpg"/></li>
			<li><img src="img/3.jpg"/></li>
			<li><img src="img/4.jpg"/></li>
			<li><img src="img/5.jpg"/></li>
			<li><img src="img/1.jpg"/></li>
		</ul>
		<!--创建导航按钮-->
		<div id="navDiv">
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
		</div>
	</div>	
</body>
</html>

135 tools.js

//尝试创建一个可以执行简单动画的函数
/*
 * 参数：
 * 	obj:要执行动画的对象
 * 	attr:要执行动画的样式，比如：left top width height
 * 	target:执行动画的目标位置
 * 	speed:移动的速度(正数向右移动，负数向左移动)
 *  callback:回调函数，这个函数将会在动画执行完毕以后执行
 */
function move(obj, attr, target, speed, callback) {
	//关闭上一个定时器
	clearInterval(obj.timer);

	//获取元素目前的位置
	var current = parseInt(getStyle(obj, attr));

	//判断速度的正负值
	//如果从0 向 800移动，则speed为正
	//如果从800向0移动，则speed为负
	if(current > target) {
		//此时速度应为负值
		speed = -speed;
	}

	//开启一个定时器，用来执行动画效果
	//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
	obj.timer = setInterval(function() {

		//获取box1的原来的left值
		var oldValue = parseInt(getStyle(obj, attr));

		//在旧值的基础上增加
		var newValue = oldValue + speed;

		//判断newValue是否大于800
		//从800 向 0移动
		//向左移动时，需要判断newValue是否小于target
		//向右移动时，需要判断newValue是否大于target
		if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
			newValue = target;
		}

		//将新值设置给box1
		obj.style[attr] = newValue + "px";

		//当元素移动到0px时，使其停止执行动画
		if(newValue == target) {
			//达到目标，关闭定时器
			clearInterval(obj.timer);
			//动画执行完毕，调用回调函数
			callback && callback();
		}

	}, 30);
}

/*
 * 定义一个函数，用来获取指定元素的当前的样式
 * 参数：
 * 		obj 要获取样式的元素
 * 		name 要获取的样式名
 */
function getStyle(obj, name) {

	if(window.getComputedStyle) {
		//正常浏览器的方式，具有getComputedStyle()方法
		return getComputedStyle(obj, null)[name];
	} else {
		//IE8的方式，没有getComputedStyle()方法
		return obj.currentStyle[name];
	}

}
子非鱼921
关注
  • 8
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端入门到实战：JavaScript-警告（alert 消息对话框）
前端工程师年薪30万，就靠这套教程！持续更新最新知识
04-15 1473
1 alert(字符串或变量); 我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的，以上为alert()语法 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset...
web前端设计从入门到实战
qq_53886372的博客
03-14 507
世界地球日实验2
B站---【狂神说Java】JavaWeb入门到实战---笔记
热门推荐
bell_love的博客
04-23 18万+
JavaWebJava Web 1、基本概念web开发： ·web，网页的意思，www.baidu.com· 静态web 。html,sss 。提供给所有人看的数据始终不会发生变化！ 动态web 。淘宝，几乎是所有的网站； 。提供给所有人看的数据始终会发生变化，每个人在不同的时间，不同的地点看到的信息各不相同！ 。技术栈：Servlet/ISP，ASP，PHP ...
web前端入门到实战：JavaScript-确认（confirm 消息对话框）
前端工程师年薪30万，就靠这套教程！持续更新最新知识
04-15 1297
confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JavaScript-确认...
web前端入门到实战：JavaScript-提问（prompt 消息对话框）
前端工程师年薪30万，就靠这套教程！持续更新最新知识
04-15 944
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> JavaScript-提问（prompt 消息对话框）</title> 6 <script type="text...
Vue.js 快速入门实战
努力是为了站在万人之中，成为别人的光
06-12 2万+
通过这个简单的待办事项列表应用，我们学习了 Vue.js 的基本用法，包括数据绑定、事件处理和列表渲染。Vue.js 的设计使得它非常易于上手，并且能够与其他库或已有项目无缝整合。希望这篇文章能帮助你快速入门 Vue.js，并为你的前端开发之旅打下坚实的基础。接下来，你可以继续学习 Vue 的其他特性，例如组件、路由和状态管理等，以便在更复杂的项目中更好地使用 Vue.js。祝你学习愉快！
前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS基础（一）
upgrade_bro的博客
09-15 642
前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS基础（一）——JavaScript介绍、变量、数据类型、类型转换
① - 前端三剑客之基础入门篇 - 千字文认知前端开发
易编橙 · 终身成长社群，相遇已是上上签！
02-27 2万+
什么是前端？前端的发展历程？前端要学什么知识？一千字带你认识什么是前端开发。
HTML+ CSS+JavaScript实战 ----仿慕课网【简单易上手】
a23452的博客
12-07 3937
Java学习打卡：第89天 javaWeb 内容导航Web项目[仿慕课网项目]界面展示界面布局HTML代码部分展示CSS代码部分展示JS代码部分展示HTML补充URL,HTTP,HTML介绍特殊的注释【条件注释】HTML头部元素CSS和HTML属性的区别div嵌套展示< ol>标签的type通过CSS设置列表符号制作导航栏使用div和span布局表单HTML5audio音频video视频新的按钮input Java养成计划（打卡第85天) Web 项目 HTML+CSS + JavaScri
Web前端开发——JavaScript入门与实战
Marshall3572的博客
06-06 1155
JavaScript简介 javaScript是一种轻量级的脚本语言，也是一种嵌入式语言，一种对象模型语言。 其核心语法部分很精简，只包括两部分： 1.基本的语法构造(比如操作符，控制结构，语句) 2.标准库(一系列具有各种功能的对象，比如Array,Date,Math等) ...
react入门实战项目-类印象笔记应用源码
08-11
本篇，将记录如何使用React实现一个简版的印象笔记App的入门实例，本实例也比较好实现，但内容相对于上个Demo更加丰富，用到了许多新的知识点，都是非常实用，必须掌握的一些内容,本菜鸟自己实践了一遍，收益非常多...
JavaWeb 入门级项目实战 -- 文章发布系统
04-28
在本JavaWeb入门级项目实战中，我们将深入探讨如何构建一个文章发布系统。这个系统将包含用户注册、登录、发布文章、浏览文章以及评论互动等功能，是初学者掌握JavaWeb开发技术的理想实践平台。我们将主要涉及到以下...
Redux入门实战——todo-list2.0实现.7z
08-11
在`Redux入门实战——todo-list2.0实现`的压缩包中，你可能会找到以下文件： - `index.js`: 应用入口，包含`Provider`组件和应用根组件。 - `App.js`: 主应用组件，可能包含了`TodoList`和`TodoForm`等子组件。 - `...
前端入门&bootstrap;实战
06-09
本资源“前端入门&bootstrap;实战”提供了一套完整的前端技术学习路径，特别关注了Bootstrap框架的使用，这是一款流行的开源工具，用于快速构建响应式和移动优先的网页。以下是基于提供的文件信息所展开的详细知识点...
Javascript 动画入门实战课程
06-30
在本课程中，大喵将使用一款流行的JS动画框架GSAP.JS动画库，开发新手入门实战性质一个入门级炫酷动画项目，带着大家来体验使用Javascript来高效开发连续关键帧动画的过程；我们会介绍GSAP.JS的基础知识及相关动画...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1410
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
最新发布
m0_62336925的博客
08-02 324
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 895
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
前端面试：项目细节重难点问题分享（十四）
weixin_49062485的博客
08-02 379
更多详情：爱米的前端小笔记（csdn~xitujuejin~zhiHu~Baidu~小红shu）同步更新，等你来看！都是利用下班时间整理的，整理不易，大家多多👍💛➕🤔哦！你们的支持才是我不断更新的动力！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值