javascript
文章平均质量分 57
周百万.
生于华夏,吾辈当自强!
展开
-
前端最常用、易忘的命令
赶快收藏,忘了就看,错过就吃亏哦~原创 2022-11-16 19:41:21 · 999 阅读 · 0 评论 -
原生JS项目练习——全选与全不选和反选
一、主要功能介绍:1、用原生JS实现全选:用for循环遍历每一个input,让他全部选中2、用原生JS实现全不选:用for循环遍历每一个input,让他全部选中3、用原生JS实现反选:用for循环遍历每一个input,让他现在的选中状态的相反值,赋值给他的选中状态(重点)二、JS代码详细步骤解析:这不是重点,重点是学习原生JS。原创 2022-10-14 23:47:57 · 1414 阅读 · 0 评论 -
原生JS项目练习——tab选项卡功能
一、主要功能介绍:1、写UI结构2、获取元素3、for循环遍历数组,给每一个li添加一个index属性并赋值。(原因等会会总结)4、绑定鼠标的mousemove事件,鼠标移到某个模块,将该模块变色,换上相应的图片5、当鼠标离开li的时候,就让当前li的背景颜色改变为原来的颜色,图片隐藏6、鼠标离开ul的时候,将li模块和图片恢复到刚开始的样子7、主要实现tab栏的来回切换操作原生JS好,前端学的才是真的好,对以后的发展有很大的作用。原创 2022-10-13 13:11:16 · 1468 阅读 · 0 评论 -
原生JS案例——搜索框的搜索数据展示
一、主要功能介绍:1、生成UI结构,定义一个数组2、获取表单元素3、创建搜索框的键盘弹起事件4、当在搜索框中输入内容时,遍历数组中的每一个元素,将其中的每一个元素与输入框中输 入的元素相匹配,如果能匹配上就将该内容渲染到提示列表中5、如果输入内容,显示提示列表 ,如果没输入内容,隐藏提示列表6、通过trim() 去掉左右两边的空格,因为空格能匹配所有字符。原创 2022-10-11 13:17:18 · 3338 阅读 · 1 评论 -
Ajax案例——仿淘宝页面数据请求
2、封装一个getSuggestList函数(进行JSONP请求)3.4搜索关键字为空时隐藏搜索建议列表。3.4搜索关键字为空时隐藏搜索建议列表。5.2 将搜索结果保存到缓存对象中。5.2 将搜索结果保存到缓存对象中。5.3 优先从缓存中获取搜索建议。5.3 优先从缓存中获取搜索建议。1、获取用户输入的搜索关键字。3.3定义渲染模板结构的函数。1、获取用户输入的搜索关键字。3.3定义渲染模板结构的函数。5.1 定义全局缓存对象。5.1 定义全局缓存对象。3.1定义搜索建议列表。3.1定义搜索建议列表。原创 2022-10-09 23:22:33 · 347 阅读 · 0 评论 -
原生JS项目练习——验证码的生成及教验
主要功能介绍: 1、通过for循环生成生成六位随机验证码 2、通过for循环随机生成验证码颜色 3、窗口加载事件,窗口一加载就调用函数,重置验证码 4、按钮点击事件,一点击就调用函数,重置验证码5、input输入框已失去焦点就进行验证 6、正则表达式验证输入内容是否符合条件 7、如果输入验证码和随机生成的验证码相同,在后方显示绿色正确标签原创 2022-10-06 13:10:16 · 1359 阅读 · 0 评论 -
原生JS项目练习——支付倒计时
一、主要功能介绍: 1、点击支付按钮弹出确认框 2、点击确认按钮后,进入支付成功界面 3、支付成功界面有一个页面加载时间 4、每次加载都会出现一个倒计时setInterval,倒计时结束后返回支付界面 5、点击支付成功按钮会立即返回支付页面原创 2022-10-04 19:18:39 · 1365 阅读 · 0 评论 -
查询商品案例 ES5新增方法
1、主要步骤1、把数据渲染到页面 forEach( )方法遍历数组 createElement 动态创建元素 appendChild 在子元素的子类最后面插入2、根据价格显示数据 filter( )方法遍历数据,以数组的形式返回3、根据商品名称显示数据 some( )方法查找数组中唯一的元素 找到元素后就不再循环,效率更原创 2022-09-21 23:32:04 · 199 阅读 · 0 评论 -
JavaScript面向对象动态添加标签页 (ES6)
1、主要功能介绍:将不同的功能抽离出来1、 创建对象具有切换选项卡的功能2、 创建对象具有添加选项卡的功能3、 创建对象具有删除选项卡的功能4、 创建对象具有修改选项卡内容的功能5、动态获取、绑定元素、渲染UI界面原创 2022-09-17 22:39:54 · 1746 阅读 · 0 评论 -
pageX和clientX的区别
e.page:返回鼠标相对于文档页面的左上角的坐标(滚轮滑动时改变)page的大小=页面滚动部分大小+距离窗口可视区距离的大小(距离整个文档左上角距离的大小)e.client:返回鼠标相对于浏览器窗口可视区的坐标(滚轮滑动不变)client的大小=距离窗口可视区的大小代码求证注意点:上下滑动要比较pageY和clientY,比较pageX和clientX没有意义页面中有一个50*50大小 绝对定位 的盒子,如下图所示。.........原创 2022-08-13 11:06:54 · 3926 阅读 · 0 评论 -
jQuery购物车完整功能实现,全代码详解(有动态效果图)
jQuery购物车 实现购物车完整功能全代码详解(有gif动态效果图)原创 2022-07-25 00:23:07 · 8643 阅读 · 7 评论 -
手风琴效果
手风琴效果原创 2022-07-21 17:37:28 · 307 阅读 · 0 评论 -
图片突出显示案例html+css+jquery
图片突出显示案例html+css+jquery原创 2022-07-20 23:50:19 · 955 阅读 · 0 评论 -
会话存储sessionStorage与本地存储localStorage叙述与案例分析
会话存储sessionStorage与本地存储localStorage叙述与案例分析原创 2022-07-16 23:41:54 · 311 阅读 · 0 评论 -
javascript轮播图超详细
鼠标移动到轮播图中显示左右按钮,轮播图片的定时器停止鼠标移出轮播图隐藏左右按钮,轮播图片的定时器开始动态创建下面的小圆点无缝滚动效果点击左右按钮能切换图片,点击小圆点也能切换到对应的图片中,定时器切换图片使用时间阀,只有点击左右按钮图片运动完成之后,点击左右按钮才能再次滚动,防止点击左右按钮次数过多,图片滚动过快的情况...原创 2022-07-06 16:13:53 · 15613 阅读 · 10 评论 -
JS缓动动画原理教学(超细节)
JavaScript缓动动画原理教学(超细节)原创 2022-07-02 23:49:38 · 439 阅读 · 0 评论 -
仿京东放大镜效果(pink老师版)
跟着pink老师学的,根据pink老师的代码敲,顺便改良了一下他的一个小bug原创 2022-07-01 00:18:54 · 1201 阅读 · 0 评论 -
WEB期末大作业——我的家乡济南,免费HTML项目练习
目录编辑一、首先创建base.css文件夹,对总体设置css样式 二、首页的HTML代码的书写,大伙自个看吧,我也不多说啥了。三、创建common.css文件夹,对nav,shortcat,footer部分的css样式进行书写,因为所有的页面都得用,不直接复制,用的时候直接link引入即可 四、创建index.css文件夹,对index首页布局设置,大伙还是自个看五、index文件的倒计时效果的js代码六、轮播图...原创 2022-06-29 11:00:03 · 1203 阅读 · 1 评论 -
javaScript中倒计时效果(详细步骤版)
总代码(赶时间直接复制即可):详细步骤(想学会的请看此处):1、先创建三个盒子 2、给盒子用css写一下他的属性,定义它的宽高,以及颜色,效果如下图所示! 3、获取三个盒子对象......原创 2022-06-25 22:36:34 · 761 阅读 · 0 评论 -
java script实现 :hover 的盒子现实与隐藏效果
核心:运用javascript代码,实现鼠标经过ul标签显示,实现鼠标移走ul标签隐藏。用html与css实现案例的外观HTML代码(就是四个盒子里面包含a和ul,ul里面又包含li) <div class="nav"> <li> <a href="#">a</a> <ul> <li>1</li>原创 2022-05-21 14:53:55 · 648 阅读 · 0 评论 -
javascript 利用排他思想创作点击按钮显示颜色
代码不难主要是利用排他思想:排除其他的元素的干扰这是没利用排他思想,直接获取元素,注册事件,让他点击后获得背景颜色的改变但是无法使盒子点击一次只显示一个,所以下面使用for循环来给盒子进行排他思想的设置<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button&g..原创 2022-05-08 17:01:19 · 764 阅读 · 1 评论 -
javascript 显示隐藏密码案例
效果图:这是显示密码,有个睁开的小眼睛这是密码框,有个不让观看的小眼睛核心思路:绑定小眼睛的img和input点击img时,有点击触发事件,让密码框变成文本框,图片换成睁开的眼睛再次点击img时,又有点击触发事件,文本框让变成密码框,图片换成闭上的眼睛 <style> * { padding: 0; margin: 0; } ...原创 2022-05-06 08:56:21 · 499 阅读 · 0 评论 -
修改版ATM小型项目
费话不多说,直接上代码!var money = 100; while (num != 4) { var num = prompt('请输入你想进行的操作:\n1、存钱 \n2、取钱\n3、显示金额\n4、退出'); switch (num) { case '1': var saveMoney = prompt('请输入你存钱的金额:');原创 2022-04-17 08:00:00 · 172 阅读 · 2 评论 -
break,continue,return的区别
break:结束当前的循环体(for,while);continue:跳出当前循环,继续以后的循环(for,while);return:不仅可以跳出循环,还可以返回return语句中的值,同时还能结束循环体,不再执行下面的代码(只能在函数中使用);1、break的使用首先:就如他的含义一样他是结束的意思。就是直接结束整个循环;在代码中写了一个for循环,里面遍历了一下1~10的整数并输出,但是如果 i 的值等于3,就break,可以在输出结果中明显看到,break后整个循环就已经..原创 2022-04-16 15:57:46 · 247 阅读 · 0 评论 -
简易ATM项目(switch case)
主要运用了,switch case 循环语句,用户输入那个数,就进行 var money = 100; var num = prompt('请输入你想进行的操作:\n1、存钱 \n2、取钱\n3、显示金额\n4、退出'); switch (num) { case '1': var saveMoney = prompt('请输入你存钱的金额:'); money += saveMo.原创 2022-04-11 23:15:52 · 555 阅读 · 1 评论 -
pink老师的for,while,switch循环课后练习题
作业1:一百以内的累加和,平均值 // 一百以内的累加和,平均值 var sum = 0; var average = 0; for (var i = 1; i <= 100; i++) { sum += i; } average = sum / 100; console.log(sum); console.log(average);作业2:一原创 2022-04-11 20:06:12 · 433 阅读 · 2 评论 -
Javascript 利用for循环制作多种星星模型
使用javascript制作星星模型的主要工具就是for循环语句!使用一个for循环语句可以生成一维的星星样式!使用两个for循环语句可以制作二维星星样式!(可直接往后面看)首先先看一维星星样式!实例1:打印五颗横向排列的星星。 // 打印五颗星星 var str = ''; for (var i = 1; i <= 5; i++) { str = str + '★'; }原创 2022-04-08 00:11:02 · 4858 阅读 · 3 评论 -
Javascript ++a 和 a++ 的联系与区别
前加 :++a后加:a++联系:当单独加的时候结果是一样的。区别:a++ 先返回原值 再加一 |||||| ++a 先加一 再返回原值但使用后加的概率大一点 前加和后加在单独使用的时候结果是相同的! var num = 1; //前加 num++; console.log(num); //后加 ++num; console.log(num)...原创 2022-04-04 22:05:44 · 1217 阅读 · 0 评论