平时小练习
浩哥学习编程之路
这个作者很懒,什么都没留下…
展开
-
轮播图案例
轮播图是网页中最常见得,轮播图也称为了焦点图实现步骤分析1.鼠标经过轮播图得时候,让左右俩边得箭头显示出来,鼠标离开则让箭头消失2.动态生成我们得小圆圈 核心思路是,ul里面有多少张图片我们就动态生成几个小圆圈 给第一个小圆圈添加上current3.小圆圈排他思想点击当前小圆圈得时候,就添加current,其余得小圆圈移除这个current 我们在生成小圆圈得同时,就可以直接绑定这个点击事件了。4.点击小圆圈,图片跟着滚动,此时我们就需要动画函数了,我们在移动图片的时候移动的是ul而不是li ul原创 2021-06-07 18:10:07 · 568 阅读 · 0 评论 -
固定栏案例
案例分析1.首先我们需要使用到scroll滚动事件它是window下得2.滚动到某个位置我们就得判断页面被卷去得值 根据判断出得这个值把固定栏改为固定定位 其实这个值 可以通过盒子的 offsetTop 可以得到,如果大于等于这个值,就可以让盒子固定定位了3.页面被卷去的头部:可以通过window.pageYOffset 获得 如果是被卷去的左侧 window.pageXOffse 注意,元素被卷去的头部是 element.scrollTop , 如果是页面被卷去的头部 则是 window.pageY原创 2021-06-05 11:47:26 · 61 阅读 · 0 评论 -
排他思想做法
排他思想分为俩步骤1.先给所有的元素绑定事件,而在吧所有的元素样式设置为同一种样式 要使用到双for循环2.在给当前自己设置样式,总结就是先干掉所有人除了自己<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-05-22 16:55:46 · 890 阅读 · 0 评论 -
开关灯按钮
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-05-22 16:52:18 · 50 阅读 · 0 评论 -
鼠标获取焦点失去焦点以及产生随机颜色(变色龙)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-05-22 16:50:12 · 297 阅读 · 0 评论 -
打印字符串中出现字母最多的次数和索引位置;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-05-22 16:40:52 · 141 阅读 · 0 评论 -
封装一个当前时间
<script> //封装一个当前时间 function getTime() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; month = month < 10 ? month + '0' : month ..原创 2021-05-12 18:14:42 · 94 阅读 · 0 评论 -
封装一个随机验证码
<script> //封装一个随机验证码 function randomCode(len) { //我们字符串也有length属性的 var str = 'YFUOUFIYTFUVUVCKIYVCKIYVVOUYVjhuksaduasud1232254w3984sdf872ci'; var targeStr = ''; //用于接受随机返回的新的验证吗 for (va.原创 2021-05-12 18:14:03 · 95 阅读 · 0 评论 -
数组去重
// 1.封装一个数组去重 功能:只能是数组去重 把新数组和旧数组中一样的值取出来放到新数组中去 参数:对谁去重(不知道所有要传入一个参数) 既然是数组去重我们要传入一个参数的 返回值:我们数组去重后的新数组要返回 回来 //解决思路;我们要拿这旧数组去遍历新数组使用双层for循环 就可以去遍历新数组的每一个元素了 如果新数组和就旧数组中相等就说明他们中重复得值了 如果不相等则说明没有重复的值 就可以吧旧数组中的值给到新数组当中即可 function getBack(arr.原创 2021-04-29 23:20:46 · 68 阅读 · 0 评论 -
冒泡排序
冒泡排序:是一种算法,把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小)。例如,我们可以将数组 [5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序,输出: 1,2,3,4,5 <script> var arr = [5, 4, 3, 2, 1]; var arr = [4, 5, 1, 3, 2]; for (var i = 0; i < arr.length - 1; i++) { //外循环走的是趟数 趟数走多原创 2021-04-27 19:12:34 · 66 阅读 · 0 评论 -
数组筛选
方法一.这里我们声明了一个 j = 0的变量 用于存放新数组中的索引号 记住新数组应该是从0开始依次递增的,j每次递增完毕后要j++ 不然赋值的永远是最后一个值 // 39.将数组[2,0,6,1,77,0,52,0,25,7]将大于或者等于10的元素选出来,放入新数组中 var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] var newArr = [] var j = 0 for (var i = 0;原创 2021-04-27 15:37:51 · 963 阅读 · 0 评论 -
打印百位数上有3或者7得数字
// 20.打印三位数位上有3或者7的数字 解决思路题目给出得是三位数那就是100-999之间 那我们怎么去判断这些数中带有3或者7勒? // 那就是我们首先得去拿到 百 十 个 然后拿着百 十 个 一一去对比有没有3或者7得 百位直接除以100即可拿到百位 十位要除以10在取余10即可拿到十位 个位直接取余即可拿到 for (var i = 100; i <= 900; i++) { var b =...原创 2021-04-24 15:53:44 · 597 阅读 · 0 评论 -
数组翻转
// 翻转数组要求在原数组上面进行,不能创建新数组 // 解决思路 我们可以吧第一个和最后一个进行交换 第二个和最后第二个进行交换 我们可以通过数组索引号来交换 以此类推 比如1=5 2=4 arr.length/2是代表中心点 var arr= [1,2,3,4,5] for(var i =0;i<arr.length/2;i++){ var temp= arr[i] arr[i]=arr[arr.length..原创 2021-04-23 13:31:27 · 212 阅读 · 0 评论 -
要求在数组中间删除一个数字
// 要求在数组中间删除一个数字 var arr = [1, 2, 3, 4, 5] for (var i = 3; i <= arr.length; i++) { arr[i - 1] = arr[i] } arr.length--; console.log(arr);结果移动得过程原创 2021-04-22 22:06:49 · 387 阅读 · 0 评论 -
要求在数组头部删除一个数字
// 18.如何在数组头部删除一个数字 // 解决思路先把整体数组往前移动一个位置i-1这样就实现了整体数组往前移动一个位置,然后再删除数组中最后一个数值 数组.lenght--即可; var arr = [1, 2, 3, 4, 5] for (var i = 1; i < arr.length; i++) { arr[i - 1] = arr[i] } arr.length..原创 2021-04-22 17:58:06 · 580 阅读 · 0 评论 -
要求在数组中间添加一个数字
// 要求在数组元素中间添加数字 var arr = [1, 2, 3, 4, 5] for (var i = arr.length - 1; i >= 2; i--) { arr[i + 1] = arr[i] } arr[2] = 6 console.log(arr);结果执行移动得过程...原创 2021-04-22 16:43:43 · 644 阅读 · 0 评论 -
要求在数组头部增添一个数字
// 要求在数组头部增添一个数字 // 解决思路:先把所有得数统统往后移一个位置,然后再在第一个位置去增添你要加得值 // 但是我们想让数字往后移一个位置就得吧数组翻转过来然后赋值+1 这样数组都往后面移动了一个位置 var arr = [1, 2, 3, 4, 5] // arr.length - 1拿到得是数组中最后一个值 for (var i = arr.length - 1; i >= 0; i-...原创 2021-04-22 16:33:20 · 476 阅读 · 0 评论 -
求100~999之间得水仙花数
// 4.求100~999之间得水仙花数. 如:abc=a^3 b^3 c^3; for (var i = 100; i <= 999; i++) { // 先求出每个位上得数字 在乘以三方 var a = parseInt(i / 100); var b = parseInt(i / 10 % 10) var c = parseInt(i % 10) if ...原创 2021-04-22 09:46:39 · 273 阅读 · 0 评论 -
图片得翻转练习
本次练习使用到了transform旋转,定位 还有个新属性1.backface-visibility; visible/hidden: 设置当所指定的元素被进行翻转等操作而使背面显示时,是否进行显示还是隐藏要求:当鼠标经过图片得时候图片得背面进行一个翻转效果结构:需要俩个元素前面一个后面一个,代码如下: <style> .container { width: 320px; height: 320px;原创 2021-04-11 13:46:00 · 70 阅读 · 0 评论 -
立体正方形练习
立体正方形得原理:就是先使用定位先让他们在一起重叠,在使用左右Y轴翻转和z轴得移动,中间得有一块元素将其撑开。代码如下<style> html { perspective: 800px; } * { padding: 0px; margin: 0px; } .box { /*设置变形原创 2021-04-11 10:48:20 · 126 阅读 · 0 评论