web前端发布+笔记+轮播图-CSDN博客

本文链接：https://blog.csdn.net/m0_73996670/article/details/138001820

本文介绍了HTML和CSS构建的基础布局，以及JavaScript实现的基本功能，如文本输入验证、动态列表操作、事件监听（如点击、键盘输入等）和轮播图的简单实现。还涉及了jQuery的简单使用和异步任务的管理。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  
  <link rel="stylesheet" href="./css/weibo.css">
  <script src="../代码/代码/jquery.min.js">

  </script>
</head>

<body>
  <div class="w">
    <div class="controls">
      <img src="images/tip.png" alt=""><br>
      <textarea placeholder="请输入你想发送的文字！" id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="useCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send">发送</button>
      </div>

    </div>
    <div class="contentList">
      <ul>





      </ul>
    </div>
  </div>
  <script>
    const txt = document.querySelector("#area")
    const ch_span = document.querySelector(".useCount")
    const btn = document.querySelector("#send")
    const ul = document.querySelector(".contentList ul")

    txt.addEventListener("input",function(){
      console.log(txt.value.length)
      ch_span.innerHTML = txt.value.length
    })

    btn.addEventListener("click",function(){
      if(txt.value.trim().length>0){
        let newLi = document.createElement("li")
        newLi.innerHTML = `${txt.value.trim()}   <button>删除</button>`
        ul.insertBefore(newLi,ul.children[0])
        ch_span.innerHTML = "0"
        txt.value = ""
      }else{
        alert("请输入内容！")
      }
    })

    txt.addEventListener("keydown",function(e){
      
      if(e.key==="Enter"){
        btn.click()
        
        
      }
    })

    ul.addEventListener("click",function(e){
      if(e.target.tarName === "BUTTON"){
        ul.removeChild(e.target.parentNode)
      }
    })
    


  </script>
</body>

</html>

css样式：

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.w {
  width: 900px;
  margin: 0 auto;
}

.controls textarea {
  width: 878px;
  height: 100px;
  resize: none;
  border-radius: 10px;
  outline: none;
  padding-left: 20px;
  padding-top: 10px;
  font-size: 18px;
}

.controls {
  overflow: hidden;
}

.controls div {
  float: right;
}

.controls div span {
  color: #666;
}

.controls div .useCount {
  color: red;
}

.controls div button {
  width: 100px;
  outline: none;
  border: none;
  background:pink;
  height: 30px;
  cursor: pointer;
  color: #fff;
  font: bold 14px '宋体';
  transition: all 0.5s;
}

.controls div button:hover {
  background:yellow;
}

.controls div button:disabled {
  background:aqua;
}

.contentList {
  margin-top: 50px;
}

.contentList ul {
  height: 800px;
}

.contentList li {
  /* display: none; */
  padding: 20px 0;
  border-bottom: 1px dashed #ccc;
  height: 60px;
}

.contentList li a {
  margin-left: 800px;
}

运行效果图：

笔记：

4.13web前端

事件类型：

click点击事件

focus获取焦点事件

blur失去焦点

input输入事件

change 事件

mouseenter鼠标移入

mouseleave鼠标移出

keydown键盘事件

事件对象：记录关于事件的所有信息

event.key == "Enter" 记录按下回车键次数

页面加载事件：

load 等待所有资源加载完毕

滚动事件：scroll

scrollTop\scrollLeft 获取元素向上滚出的高度，向左滚出的宽度

true 捕获

false 冒泡默认的参数值

事件委托：

利用事件监听中的冒泡

e.target获取的就是我们所点击的对象

clientWidth 元素可视区域宽度，的不包含边框，margin，滚动条（clientHeight同理）

offsetWidth 获取元素自身的宽高，包含padding，border

创建节点---createElement

给新创建的元素追加内容---innerGTML

追加节点---父元素+.appendChild(新的节点)

指定追加---父元素.inserBefore(新的节点，追加的位置) 追加的位置=父元素.children[位置所对应的数字]

删除节点：

删除的操作必须基于父元素进行删除

命令：父元素.removeChild（父元素.children[元素位置对应数字]）

4.15
js是单线程的（在某一时刻一次只能干一件事情）为了防止任务堵塞，将任务分为同步和异步：
同步任务：前面一个任务执行结束之后执行后一个，执行任务按照排列顺序来
异步任务：引擎放在一边，不进入主线程，而进入任务队列的任务
常见的异步任务：普通的事件，setTimeout，setInterval，load，error。eventloop
eventloop：事件循环
dom：文档对象文档模型
bom：浏览器对象文档模型
history：
history.forward前进
history.back后退
history.go（1）前进一步
history.go（-1）后退一步
screen：显示客户端屏幕的相关信息
screen.height显示高
screen.width显示宽
在宽高前加avail显示有效宽高
location：
location.reload 强制刷新
location.href=“网址” 页面跳转
在控制台里获取：location.hostname
location.port端口 location.protocol协议
location.host location.pathname路径名
location.search
构造函数：
function Person(name, age) {
this.name = name;
this.age = age;
this.species = '人类';
this.say = function () {
console.log("Hello");
}
}

let per1 = new Person('xiaoming', 20);

4.16
环境变量this的的指向：
普通函数中this的指向：谁调用的就指向谁。
箭头函数：不存在this，引用的是距离最近的作用域里面的this，向外层作用域中一层层查找
在构造函数中this指向实例化出来的对象
this的方向是可变的，方法如下：
call（）：调用函数的同时改变this的方向
test.call（obj1）
apply（）：和call差不多，但是后面的要用数组表示
bind（）：不会调用函数，而是会返回新的函数
浅拷贝与深拷贝：
...代表展开运算符，将值展现出来
优化异常：
throw new Error（”这里的参数不能为空”）

catch（error）{
console.log(error.message)
console.log（”内容”）
}

finally{”内容”}无论是否存在错误，都会执行代码
jquery简单使用：
[图片 201.jpg]
$是jquery的顶级对象，同时也是jquery的别称
$==jQuery
jQuery对象只能用jQuery的方法，不能使用原生js的方法，原生js也不能使用jQuery的方法。
但在特定条件下可以：$（dom对象）==>转换为jQuery对象
选择器：$（”选择器”）隐式迭代，遍历内部的元素
$（”div”）.css（”backgroundColor”，”red”）
筛选器：$（“li：first”） $（“li：last”）
$（“li：eq（3）”） $（“li：odd”）：奇数
$（“li：even”）：偶数
找父级：$（“ul”）.parent（）
找子级：$（“.box”）.children（）：相当于子代选择器
$（“.box”）.find（“li”）：后代选择器
$（“.li4”）.siblings（“li”）：查找兄弟节点，不包括自己本身
css样式：$（“div”）.css({“color”：“red”，“backgroundColor”：“pink”}）
[图片 202.jpg]
jQuery效果：
显示：$（“button：eq（0）”）.click（function（）{$（“div”）.show()}）
隐藏：hide
切换：toggle

轮播图：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	
	<style>
		* {
			margin: 0px;
			padding: 0px;
		}

		.banner {
			width: 600px;
			margin: auto;
			border: 10px solid greenyellow;
			height: 350px;
			position: relative;
			overflow: hidden;
		}

		.imgList {
			list-style: none;
			
			position: absolute;
			
		}

		.imgList img {
			width: 600px;
			height: 350px;
		}

		.imgList li {
			float: left;
			margin-right: 20px;
		}

		.circle {
			position: absolute;
			bottom: 15px;
			left: 50%;
			transform: translateX(-50%);
		}

		.circle a {
			width: 15px;
			height: 15px;
			background: yellow;
			display: block;
			border-radius: 50%;
			opacity: .5;
			float: left;
			margin-right: 5px;
			cursor: pointer;
		}

		.circle a.hover {
			background: black;
			opacity: .8;
		}
	</style>
</head>

<body>
	<div class="banner">
		<ul class="imgList">
			<li><img src="../pic2.webp" alt=""></li>
			<li><img src="../pic3.webp" alt=""></li>
			<li><img src="../pic4.jpg" alt=""></li>
			<li><img src="../pic1.webp" alt=""></li>
		</ul>
		<div class="circle">
		
		</div>
	</div>
	<script>
		window.onload = function () {
			var imgList = document.querySelector('.imgList');
			var circle = document.querySelector('.circle');
			var thisIndex = 0;
			var imgListLi = imgList.children;
			var circleA = circle.children;
			var flag = true;
			imgList.style.width = imgList.children.length * 620 + 'px';
			for (var i = 0; i < imgList.children.length; i++) {
				var aNode = document.createElement('a');
				aNode.setAttribute('index', i);
				if (i == 0) {
					aNode.className = 'hover';
				}
				circle.appendChild(aNode);
			}
			circle.addEventListener('click', function (e) {
				if (flag) {
					flag = false;
					
					if (e.target.nodeName != 'A') {
						return false;
					}
					thisIndex = e.target.getAttribute('index');
					
					slow(imgList, -thisIndex * 620, function () {
						flag = true;
					});
					circleChange();
				}
			})
			function antoChange() {
				setInterval(function () {
					if (flag) {
						flag = false;
						if (thisIndex >= circleA.length) {
							thisIndex = 0;
						}
						slow(imgList, -thisIndex * 620, function () {
							flag = true;
						});
						circleChange();
						thisIndex++;
					}
				}, 3000);
			}
			function circleChange() {
				for (var i = 0; i < circleA.length; i++) {
					circleA[i].className = '';
				}
				circleA[thisIndex].className = 'hover';
			}
			function slow(obj, target, callback) {
				obj.myInter = setInterval(function () {
					var offsetLeft = obj.offsetLeft;
					var num = (target - offsetLeft) / 10;
					num > 0 ? num = Math.ceil(num) : num = Math.floor(num);
					if (offsetLeft == target) {
						clearInterval(obj.myInter);
						callback && callback();
					} else {
						obj.style.left = offsetLeft + num + 'px';
					}
				}, 10)
			}
			antoChange();
		}
	</script>
</body>
</html>

效果图：