- 博客(13)
- 收藏
- 关注
RSS订阅原创 AJAX的简单封装
创建一个发送按钮<button id='btn'>发送一个请求</button>主要封装的需求：1：可以发送请求。2：可以处理响应数据，用回调函数完成功能。3：携带数据：允许用户传入对象格式的数据。判断对象,返回true/falsefunction isObject(data) { return typeof (data === "object") && data !== null && !(data ins
2022-05-10 20:49:20
190
原创 JS简单的运动封装
function animate(options, dom, callback) { // 之前的参数是 attr 和 target ,但是没办法满足多个属性同时传入的需求; // - 因此我们把attr和target参数优化成了 options 对象参数 , 这样方便多条数据传入; // 1. 格式化options对象，把原本只有目标点的数据变成 : // { 属性 : { 目标点信息 , 当前位置信息 } } for (var attr in o.
2022-05-08 16:00:06
222
原创 JS实现轮播图
HTML结构部分 <!-- 显示区域 --> <div class="container"> <!-- 图片容器 --> <div class="wrapper"> <div class="slide"><img src="https://img.zcool.cn/tubelocation/dfd162562d160002e0326467a4f3.jpg" alt=""&g
2022-05-07 20:52:10
152
原创 JS中的表单验证。
HTML部分：<!-- 避免表单在点击按钮的时候页面刷新无法执行JS的问题出现,我们在 action 里面编写一个地址，这个地址是防止跳转的; action="javascript:void(0)"--> <form action="javascript:void(0)" id="login"> <p>账号:  <input type="text" id="email"> &
2022-04-19 14:04:56
2863
原创 JS实现：盒子随着鼠标点击在页面跳动的效果
HTML：<div id='box'> <img src='图片链接' alt=''></div>CSS：<style> #box{ width: 100px; height: 100px; overflow: hidden; position: absolute; left: 45%; /* 因为我们在使用过渡效果时
2022-04-18 10:32:38
1103
原创 JS实现单选按钮和多选功能
HTML部分：//容器 <div class="container"> <div class="all"> 全选<div class="checkbox"></div> </div> <div class="btns"> <div class="checkbox"></div> <
2022-04-14 23:23:06
5420
原创 JS实现回到顶部按钮
CSS部分忽略。//1.当我们的页面高度隐藏了800px的时候，让回到顶部按钮显示出来;//2.当我们点击回到顶部按钮的时候，页面的隐藏高度设置为0;知识点：用：document.documentElement.scrollTop; 获取当前页面的滚动条纵坐标位置，而不是：document.body.scrollTop; documentElement 对应的是 html 标签，而 body 对应的是 body 标签。 在标准w3c下，docume...
2022-04-13 17:04:25
774
原创 JS实现时钟。
此处CSS的样式忽略。HTML简单结构如下:JS简单代码如下：<body> <div id="clock"> <p id="hours"></p> <span>:</span> <p id="min"></p> <span>:</span> <p id="sec"></p
2022-04-12 23:14:24
1206
原创 JS之倒计时。
//-在所有使用定时器的功能上，我们都需要先把功能封装在一个函数之中;知识点：1、new Date():创建一个Date对象。2、Date.now()获取时间戳，默认时间是1970/01/01/00:00:00，单位毫秒。3、getTime()获取目标时间的时间戳。<script>function countDown(){// 倒计时功能分成两个部分 : // - 目标点时间; var date = new Date("2022/04/0...
2022-04-07 11:21:53
446
原创 JS之简单的页面渲染。
// 渲染页面流程 :// - 1. 我们需要先去排页面;// - 2. 结构排列好了之后我们才能考虑使用js进行页面渲染;// 渲染的字符串结构 :// 1. 容器结构开头 : <div class="container">// 2. box结构 (根据我们创建的商品列表，进行box结构拼接)// 3. 容器结构结尾 : </div>CSS样式部分忽略。<script>//容器 document.write('<div cla
2022-04-07 09:45:17
3958
原创 JS的冒泡排序
//冒泡排序:从左到右两两比对，不符合规则就换位;//规则:从小到大排列;-左小右大，从小排到大。<script> var arr = [ 5,3,2,7,1,6,4 ]; //对比次数 for(var count = 0;count < arr.length-1;count++){ //执行第一轮之后就可以找到最大值，则不需要再去对比最大值，减少对比次数 for(var i = 0;i < arr.l...
2022-04-06 16:51:59
134
原创 选项卡，JS应用写法思路。
实现功能：鼠标移动到某标题，显示相应的内容。CSS样式部分此处忽略。HTML部分：重要思路 :鼠标移入到哪个元素里面，哪个按钮元素就添加active同时清除其余按钮的active类名。 使用this标记触发事件的元素。 利用伪数组之中的下标找到对应内容。知识点1、QS选择器：document.querySelectorAll(); 选择所有相同类名的标签。2...
2022-04-04 18:29:47
179
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人