宁远君-优快云博客

原创自制gif效果

自制gif效果说明：本例中以最初的效果为准写在前面：本来是想写一个这样的效果;但是写完以后发现再给他加一个定时播放的效果也挺好的;于是改进后的效果如下这个做完以后我觉得还不是很完美;于是我联想到了“连环画”，也就是可以动起来的动画，于是我找来一些列连贯的图片素材，将其添加进来，随后就形成了下面的效果。页面部分准备一个容器tab里面装有tab-content、tab-list、tab-content里面有一个图片img用来充当大图;tab-list,里面放的是一系列的小图他们来充当“简

2021-11-28 00:21:39 335

原创验证码案例

验证码案例成品图：准备：用一个数组存储验证码内容的源;简单的前端界面思路：循环模拟数组的数据;在循环里面用随机数方法实现数组数据的随机抽取；这个随机数方法我们用Math.Random();这个方法用来实现四舍五入。步骤：因为要取数组里面随机的值来拼接成验证码,用随机数来完成； var index = Math.round(Math.random() * 21); //值从0-21随机出现本次生成6位随机验证码:用for循环循环长度为6

2021-11-26 23:46:20 174

原创模糊查询案例

案例-模糊查询成品展示：准备：一个数组用来存放需要查询的数据。一个搜索框用来输入进行模糊查找事件均用事件监听的方式【addEventListener】案例思路：建立一个输入框，创建键盘按键弹起事件【keyup】;当输入内容包含在查询数据的时候就将符合条件的内容以列表的形式展示在另一个盒子里。对数组进行遍历【forEach】,利用字符串的indexOf()方法的负值来判断输入的值是否符合条件；如果上述中输入的内容在上述步骤返回-1;就说明当前输入内容不符合条件;否则就是符合

2021-11-26 22:46:16 2116

原创添加元素后改变背景

添加元素后改变背景颜色案例要求：有一组li元素用来点击时变换背景颜色有一个点击按钮button用来增加li元素生成的元素再次点击后仍能改变背景颜色错误操作：直接把变换背景的事件绑定在每一个小li的身上后果：因为当前绑定的点击变换背景颜色事件在每一个小li身上这就导致了该点击事件只能识别文档中现有的li而不能识别新生成的lil;从而新生成的li再点击以后不会有任何的变化。正确思路：一、按钮点击事件为点击按

2021-11-22 22:57:28 175

原创数组sort排序

sort里面有一个回调函数函数里面有两个参数n1，n2一般用n1，n2比较就能对数组进行升序或者降序操作参考的标准是两数差的返回值

2021-11-09 23:39:59 83

原创 es6一些新特性

ES6语法let声明变量具有块级作用域的特点，在他的作用域下才能使用如下代码所示： if (true) { let a = 10; }console.log(a) // a is not defined不存在变量提升console.log(a); // a is not defined let a = 20;存在暂时性死区var tmp = 123; if (true) { tmp = 'abc';

2021-11-06 15:54:04 107

原创对于拼接字符串的一些心得

在javascript中用拼接字符串的方法来把字符串和变量连接起来那么整体用的引号一定是一样的，如果是单引号的话那么从头到尾都是单引号如果是双引号的话，那么从头到尾都是双引号如下面的例子： var str = "个人"; for (var i = 0; i < 3; i++) { console.log("你是第"+i+"个人"); **//"你是第"+i+"个人"** }如果上面的既有单引号又有双引号的

2021-11-04 10:29:27 156

原创盒子装载图片时出现的盒子比图片实际偏高的问题

行内元素默认是以baseling对齐的但是有时候这个设定值会有问题出现比如设置图片加一个遮罩层的话，这时候就会出现图片不会和这个遮罩层完全重合的情况如下图所示：在这里 * { margin: 0; padding: 0; box-sizing: border-box; } .box { position: relative; width: 300p

2021-11-02 10:42:02 527

原创 JavaScript高级第03天笔记

本资源由 itjc8.com 收集JavaScript高级第03天笔记1.函数的定义和调用1.1函数的定义方式方式1 函数声明方式 function 关键字 (命名函数)function fn(){}方式2 函数表达式(匿名函数)var fn = function(){}方式3 new Function()var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);var fn = new Function

2021-10-31 17:14:19 118

原创 JavaScript高级第02天笔记

本资源由 itjc8.com 收集JavaScript高级第02天笔记1.构造函数和原型1.1对象的三种创建方式–复习字面量方式var obj = {};new关键字var obj = new Object();构造函数方式function Person(name,age){ this.name = name; this.age = age;}var obj = new Person('zs',12);1.2静态成员和实例成员1.2.1实例成员实例成

2021-10-31 17:07:18 109

原创 JavaScript高级第01天笔记

本资源由 itjc8.com 收集JavaScript高级第01天笔记1.面向过程与面向对象1.1面向过程面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。1.2面向对象面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。1.3面向过程与面向对象对比面向过程面向对象优点性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。易维护、易复用、易扩展，由于面向对象有封

2021-10-31 17:02:26 111

原创 jquery2

jquery2一、获取属性1、获取自有属性prop()<a href="http://www.baidu.com">百度</a>$(function() { prop用来获取自有属性 console.log($("a").prop("href")); })2、设置并设置自定义属性利用attr设置并读取自定义属性<a href="http://www.baidu.com" index = "1"&

2021-10-19 23:19:07 76

原创 jquery

jquery一、jquery的顶级对象是$或者是jquery在调用jquery的时候只需要用一个$(“标签/css/id”)看一个例子 <div></div> div { *width*: 100px; *height*: 100px; *background-color*: pink; }$('div').hide();这个的功能就类似与原生js的div.style.display = 'none'

2021-10-18 23:35:48 176

m0_51404378的博客