JS学习第十四天总结

最新推荐文章于 2023-03-17 20:39:42 发布
最新推荐文章于 2023-03-17 20:39:42 发布
阅读量168 收藏
点赞数
分类专栏： JS学习笔记 JS学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44791254/article/details/89073689
版权

1.复习回顾

  • 让一个盒子向右运动
    • 相对定位：相对于元素自身所在位置。
    • 缓动公式：leader=leader+(target-leader)/10;
    • 无缝滚动图
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				background-color: yellow;
				position: relative;
			}
		</style>
	</head>
	<body>
		<button>开始移动</button>
		<div id="box"></div>
		<script type="text/javascript">
			var box=document.getElementById("box");
			var btn=document.querySelector("button");
			var leader=0;
			var target=500;
			btn.function(){
				setInterval(function(){
					leader=leader+(target-leader)/20;
					box.style.left=leader+"px";
				},20);
			}			
		</script>
	</body>
</html>

2.焦点轮播图案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			img{
				vertical-align: top;
			}
			#box{
				width:590px;
				height:470px;
				margin:100px auto;
				border: 2px solid #333;				
				padding:10px;
				position: relative;
			}
			#content{
				width:100%;
				height:100%;
				overflow: hidden;
			}
			ul,ol{
				list-style: none;
			}
			ul{
				width:1000%;
				position: relative;
			}
			ul li{
				float:left;
			}
			ol{
				position: absolute;
				left:50%;
				bottom:15px;
			}
			ol li{
				width:40px;
				height:40px;
				background-color: white;
				text-align: center;
				line-height: 40px;
				border-radius: 20px;
				border:1px solid #333;
				float: left;
				margin-right:5px;
			}
			.bgc{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="content">
				<ul>
					<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>
				</ul>
			</div>
			<ol>
				<li class="bgc">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ol>
		</div>
		<script type="text/javascript">
			var box=document.getElementById("box");
			var uu=box.children[0].children[0];
			var oo=box.children[1];
			var lis=oo.children;
			for(var i=0;i<lis.length;i++){
				lis[i].index=i;
				lis[i].function(){					
					for(var j=0;j<lis.length;j++){
						lis[j].className="";
					}
					this.className="bgc";
					target=-590*(this.index);
				}				
			}
			var leader=0;
			var target=0;
			setInterval(function(){
				leader=leader+(target-leader)/20;
				uu.style.left=leader+"px";
			},20);
		</script>
	</body>
</html>

3.点击切换案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#box{
				width:590px;
				height:470px;
				margin:100px auto;
				border: 2px solid #333;				
				padding:10px;
				position: relative;
			}
			#content{
				width:100%;
				height:100%;
				overflow: hidden;
			}			
			ul{
				width:1000%;
				position: relative;
				list-style: none;
			}
			ul li{
				float:left;
			}
			ol{
				position: absolute;
				right:10%;
				bottom:15px;
				list-style: none;
			}
			ol li{
				width:40px;
				height:40px;
				background-color: white;
				text-align: center;
				line-height: 40px;
				border-radius: 20px;
				border:1px solid #333;
				float: left;
				margin-right:5px;
			}
			.bgc{
				background-color: yellow;
			}
			button{
				position: absolute;
				top:0;
				background-color:#666;
				opacity: .4;
				color:#ccc;
				height:80px;
				width:40px;
				font-size:30px;
				top:50%;
				margin-top:-40px;
				display: none;
			}
			#left{
				left:20px;
			}
			#right{
				right: 20px;
			}
		</style>
	</head>
	<body>		
		<div id="box">			
			<div id="content">
				<ul></ul><!--存放照片-->
			</div>
			<ol></ol><!--存放小圆点-->
			<button id="left"><</button>
		    <button id="right">></button>
		</div>
		<script type="text/javascript">
			var box=document.getElementById("box");
			var uu=box.children[0].children[0];
			var oo=box.children[1];			
			var arr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
			for(var i=0;i<arr.length;i++){//创建ul中的li及图片列表
				var cImg=document.createElement("img");
				cImg.src=arr[i];
				var cLi=document.createElement("li");
				cLi.appendChild(cImg);
				uu.appendChild(cLi);
			}
			var uulis=uu.children;
			for(var i=0;i<uulis.length;i++){//创建ol中的小圆点列表
				var cLi=document.createElement("li");
				cLi.innerHTML=i+1;
				oo.appendChild(cLi);				
			}			
			var lis=oo.children;
			lis[0].className="bgc";			
			var left=document.getElementById("left");
			var right=document.getElementById("right");	
			box.function(){//鼠标经过，显示按钮
				left.style.display="block";
				right.style.display="block";
			}
			box.function(){//鼠标离开隐藏按钮
				left.style.display="none";
				right.style.display="none";
			}
			left.function(){//左边鼠标点击右移动							
				target+=590;
				var i=-target/590;
				if(i<=0){
					i=0;
				}
				for(var j=0;j<lis.length;j++){
					lis[j].className="";
				}
				lis[i].className="bgc";	
			}
			right.function(){//右边鼠标点击左移动				
				target-=590;
				var i=-target/590;
				if(i>=3){
					i=3;
				}
				for(var j=0;j<lis.length;j++){
					lis[j].className="";
				}
				lis[i].className="bgc";	
			}
			for(var i=0;i<lis.length;i++){
				lis[i].index=i;
				lis[i].function(){//鼠标经过小圆点，图片移动到对应的那张					
					for(var j=0;j<lis.length;j++){
						lis[j].className="";
					}
					this.className="bgc";
					target=-590*(this.index);
				}				
			}
			var leader=0;
			var target=0;
			setInterval(function(){//定时器，实现动态移动效果
				leader=leader+(target-leader)/20;
				if(target>=0){
					target=0;
				}else if(target<=-(590*3)){
					target=-(590*3);
				}
				uu.style.left=leader+"px";				
			},20);				
		</script>
	</body>
</html>

4.获取元素的尺寸

  • 通过style是拿不到写在style样式表中尺寸信息的，只能用来添加行内样式，也只能获取行内样式数据，以字符串形式返回，比如：“200px”。
  • offset：自己。offsetWidth、offsetHeight来获取样式表或行内的宽高信息。
    • offsetWidth和offsetHeight能获取内容区和内边距、边框的累积尺寸。
    • offsetWidth=width+padding+border。
  • offsetLeft、offsetTop：找离自己最近的带有定位的父元素，如果父元素都没有添加定位，就找body。
    • offsetLeft包含内边距、不包含边框。
  • offsetParent：拿到的是离他最近的带有定位的父元素。tagName，拿到标签名，大写的。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			body{
				background-color: #CCCCCC;
			}
			#box{
				width:500px;
				height:50px;
				border:1px #333 solid;
				margin:50px auto;
				background-color: white;
				position: relative;
			}
			ul{
				list-style: none;
				position: absolute;
			}
			ul li{
				float: left;
				width:100px;
				height: 50px;
				text-align: center;
				line-height: 50px;	
			}
			span{
				display: inline-block;
				background: url(img/5.png) no-repeat;
				width:100px;
				height:50px;
				position: absolute;
				left: 0;
			}
		</style>
	</head>
	<body>
		<div id="box">	
			<span></span>
			<ul>				
				<li>首页</li>
				<li>首页</li>
				<li>首页</li>
				<li>首页</li>
				<li>首页</li>
			</ul>				
		</div>
		<script type="text/javascript">
			var lis=document.getElementsByTagName("li");
			var span=document.getElementsByTagName("span")[0];
			var flag=0;
			for(var i=0;i<lis.length;i++){
				lis[i].function(){
					target=this.offsetLeft;
				}
				lis[i].function(){
					target=flag;
				}
				lis[i].function(){
					flag=this.offsetLeft;
				}
			}
			var leader=0;
			var target=0;
			setInterval(function(){
				leader=leader+(target-leader)/10;
				span.style.left=leader+"px";
			},20);
		</script>
	</body>
</html>

5.event

  • js是事件驱动的
  • event事件对象
  • 存在兼容问题，IE只认识window.event
  • event事件对象属性
    • clientX; 是以当前窗口、可视区为基准的。
    • clientY;
    • pageX; 是以整个文档为基准的。
    • pageY;
    • screenX; 是以电脑屏幕为基准的。
    • screenY;
  • onmouseover 鼠标经过元素，只触发一次
  • onmousemove 鼠标移动，鼠标只要动就会触发事件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#box{
				width:100px;
				height:100px;
				position: relative;
			}
			img{
				width:100px;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="img/猴子.gif"/>
		</div>
		<script type="text/javascript">
			var box=document.getElementById("box");
			document.function(event){
				var event = event||document.event;
				targetX=event.clientX-box.offsetWidth/2;
				targetY=event.clientY-box.offsetWidth/2;
			}
			var leaderX=0,leaderY=0,targetX=0,targetY=0;
			setInterval(function(){
				leaderX=leaderX+(targetX-leaderX)/10;
				leaderY=leaderY+(targetY-leaderY)/10;
				box.style.left=leaderX+"px";
				box.style.top=leaderY+"px";
			},20);
		</script>
	</body>
</html>
恋风（微信）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
14-总结.md
03-31
HTML CSS JS HTTP 等基础知识是前端面试的第一步，基础知识不过关将直接被拒。本章将通过多个面试题，讲解前端常考的基础知识面试题，同时复习一些重要的知识点。 ## 为何要考察 扎实的前端基础知识，是作为前端...
DOM样式，常见属性
w_cyj的博客
07-16 204
7.16DOM样式，常见属性 Dom对象样式 设置Dom对象的样式 对象写法，需要将所有的css中-字母 替换为大写字母。 例如 font-size fontSize。 而style字符串方式写法，按照原css行内样式填写 dom.style.styleName="" 增添class样式 div0.className=“div1”; div0.className+=" div2"; 获取计算后的dom样式 ie currentStyle ie所支持的获取非行间样式的方法 用法
javaScript学习笔记（一）js基础
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
第十七天 JavaScript、Vue详细总结
HuanLe.的博客
03-17 2570
JS VUE详细总结
JavaScript高级程序设计第四版学习--总结
One_punchman_zxl的博客
05-31 268
title: JavaScript高级程序设计第四版学习–总结 date: 2021-5-31 15:53:41 author: Xilong88 tags: JavaScript 总结： 从5月13日到今天，每天都泡在工作室看这本书，基本模式就是打开一章，先读一遍理解，然后再写博客梳理一下。 除了 十八章 动画与Canvas 二十二章 处理XML 二十七章 工作者线程 二十八章 最佳实践 以外都看了，并且写了博客。 这一遍都有啥改变呢？ 感觉有些东西更清晰了，扫盲了。 也就是说，只要是这本.
Java学习路线总结，搬砖工逆袭Java架构师
热门推荐
学Java，找哪吒
09-07 24万+
定期分享Java硬核技术干货、分享Java学习路线、分享Java经典面试题
老男孩第三期Python全栈开发视频教程 零基础系统学习Python开发视频+资料
05-15
├─(14) 04 python s3 day42 JS的DOM节点.avi ├─(15) 05 python s3 day42 JS的DOM节点.avi ├─(16) day42.rar (7)\\python全栈day41-50\\python全栈s3 day43；目录中文件数:10个 ├─(17) 01 python s3 day43 上...
Piano-Notes:我的日常钢琴学习笔记
05-01
其实我只是想总结一下过去以及记录一下将来而已。自从去年公司买了一台雅马哈的电钢琴，然后听老板娘弹了半首卡农之后，我就瞬间爱上了钢琴。说实话，那是我人生第一次近距离听别人弹奏钢琴。爸爸听古典音乐三十年，...
threeJS开发指南pdf版，内有git下载素材地址
08-15
目录（共14章） 前言 本书内容 阅读之前的准备 读者对象 致谢 第1章 用Three.js创建你的第一个三维场景 1.1　使用Three.js的前提条件 1.2　获取源代码 1.3　创建HTML页面框架 1.4　渲染并展示三维对象 1.5　添加材质...
Vue2：小白入坑vue三部曲，关于vue在工作的使用问题总结，请看博客https：sunseekers.github.io一直保持更新
02-06
2018我所了解的Vue知识大全初期第一个flag就是掌握vue，哈哈Vue，React，角度三大主流框架，最后我选择学习Vue，接触过React，自己感觉学习曲线有些陡峭，相比较之下我个人觉得Vue的学习曲线很小很多，长长的头发；...
JS学习第一周总结
前端工程师学习记录
03-22 546
前段三层 HTML 结构层 CSS 样式层 JavaScript 行为层 1.JS能做什么？ 嵌入动态文本于HTML页面。 对浏览器事件作出反应。 读写HTML元素 在数据被提交到服务器之前验证数据。 检测访客的浏览器信息。 基于Node.js技术进行服务器端编程。 2.JS简介 JavaScript是一种直译式脚本语言，是一种动态型、弱类型、基于原型的语言。 基本特点： 是一种解释性脚...
JS学习第二天总结
前端工程师学习记录
03-19 463
1.昨天作业总结 一定要牢记，使用prompt()接收到的数据是字符串型的，要做算术运算，要先使用parseInt()转换成数值型，才能进行操作。 2.新的数据类型-布尔Boolean 昨天已经说了两种基本数据类型： Number（数值类型） 控制台显示蓝色 NaN是数值类型 String（字符串类型） 控制台显示黑色 今天再说一种：Boolean（布尔），他只有两个值 true（真） fals...
JS第一天学习总结
前端工程师学习记录
03-18 347
前段三层 HTML 结构层 CSS 样式层 JavaScript 行为层 学习网站：廖雪峰官方网站 1.JS能做什么？ 嵌入动态文本于HTML页面。 对浏览器事件作出反应。 读写HTML元素 在数据被提交到服务器之前验证数据。 检测访客的浏览器信息。 基于Node.js技术进行服务器端编程。 2.JS简介 JavaScript是一种直译式脚本语言，是一种动态型、弱类型、基于原型的语言。 基...
JS学习第二周总结
前端工程师学习记录
03-30 339
1.上周内容回顾 多个script标签，一个报错，另一个还是会继续执行。 多个window.onload入口函数，后面的会覆盖前面的，最终只会执行一个。 函数：可以重复使用的代码块的封装。 函数三种创建方式：函数声明式、函数表达式、Function——构造函数。 变量声明提升：JS执行前会预解析，将变量声明提升到最前面。 2.函数参数 注意点一： function fun(a,b,c){ ...
JS自学day1
前端工程师学习记录
03-18 300
1. script元素 在使用script嵌入JavaScript代码时，记住不要在代码中的任何地方出现"/script"字符串，负责会引发错误。例如下面的代码，执行时就会出现错误。 <script> function sayScript(){ alert("</script>"); } </script> 如果需要引入外部JS文件，那么src属...
JS学习第三周总结
前端工程师学习记录
04-07 294
1.日期对象 内置对象，JS中有很多内置对象 Math Array Date Vue var date=new Date();// 调用的是系统时间，如果运行程序的电脑时间改了，获取到的时间也会跟着变 getTime，获得到的毫秒数 1秒等于1000毫秒 从1970年至今的毫秒数 2038年问题 getFullYear，获取年份 当前年份 getMonth，获取月份 0-11月 getDa...
JS学习第三天总结
前端工程师学习记录
03-20 207
1.复习昨天内容 布尔类型Boolean 取值就两种 true false 不像Number包括很多种（数字、Ifinity，NaN等都是Number类型） 关系运算符 < > <= >= == === != !== console.log(2<3<5);// 返回true console.log(2<3<1);// 返回false ...
JS学习第二十天总结
前端工程师学习记录
04-15 187
1.通过style方式获取的样式 只能拿到行内样式； 拿到的是字符串数据类型，带px； 简单的封装（使用[]可以传变量）； 存在问题：只能拿到行内样式，但是我们一般是不使用行内样式的。 function getAttr(attr){ console.log(box.style[attr]); } getAttr("left"); 2.currentStyle当前样式/window.g...
JS自学day2
前端工程师学习记录
03-19 180
1.正则表达式 RegExp对象用于规定在文本中检索的内容。 定义RegExp 通过new关键字来定义RegExp对象。 var part1=new RegExp("e"); 定义了名为part1的RegExp对象，其模式是"e"。 当使用该RegExp对象在一个字符串中检索时，寻找的是字符"e"。 RegExp对象的方法 test（）方法检索字符串中的指定值，返回值是true或者fals...
学习vue3 第三十四章
最新发布
08-12
Vue 3是一个流行的JavaScript框架，用于构建用户界面。它是Vue.js的最新版本，带来了一些新的特性和改进。 对于学习Vue 3，你可以从官方文档开始。Vue官方提供了详细的文档，其中包含了关于Vue 3的所有知识和指南。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值