deliefu3790-CSDN博客

转载 js键盘按下移动元素

文章地址 https://www.cnblogs.com/sandraryan/功能：点击上下左右按钮，移动元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content...

2019-10-03 21:02:00 211

转载原生js实现计时器

文章地址 https://www.cnblogs.com/sandraryan/点击开始计时，可以计次，暂停。点了暂停可以继续计时，计次，点击重置清空。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta...

2019-10-03 11:59:00 276

转载 js快速排序

文章地址 https://www.cnblogs.com/sandraryan/　　 function sort(arr){ // 如果数组中中有一个元素，返回数组 if(arr.length<1){ return arr; } ...

2019-10-02 19:33:00 169

转载利用sort对数字排序

sort，可排序字符串，按照ASCII码排序。但也可以穿一个比较函数，实现比较数组内容，排序数组的功能。 var arr = [40, 32, 45, 89, 93, 0, 46, 74]; var arr1 = arr.sort(function (a, b) { return a - b; }); ...

2019-10-02 14:59:00 1122

转载随机一个十六进制颜色

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...

2019-09-29 21:19:00 151

转载 js冒泡排序

文章地址 https://www.cnblogs.com/sandraryan/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...

2019-09-28 10:42:00 81

转载模拟双色球随机数组

　<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...

2019-09-28 10:21:00 217

转载原生js实现选字游戏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...

2019-09-25 11:57:00 322

转载 canvas实现碰壁反弹（单个小方块）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...

2019-09-24 14:54:00 270

转载 h5的canvas绘制方格（边框随即色）

文章地址 https://www.cnblogs.com/sandraryan/两个循环绘制<body> <canvas id="cv" width="800" height="500"></canvas> <script> var cv = document.querySelector('...

2019-09-24 11:29:00 360

转载 h5 的canvas绘制基本图形

文章地址：https://www.cnblogs.com/sandraryan/canvas是一个标签，可用于绘制复杂图形，渲染效果比普通DOM快某些低版本浏览器不支持canvas使用原生几乎不借助框架目前多用于：数据统计图，地图；小网页游戏、canvas默认样式是300*150，背景白色，支持标签的所有样式，但一般不添加3D变换可能会影响原有内容c...

2019-09-24 10:33:00 277

转载 for in 循环

文章地址: https://www.cnblogs.com/sandraryan/ // for in 遍历数组和对象 var Dog = { name: 'jack', age: 2, eat: function(){ console.log('eating'); ...

2019-09-23 10:22:00 91

转载 js创建对象的三种方式和js工厂模式创建对象

文章地址: https://www.cnblogs.com/sandraryan/创建对象创建对象的三种方式构造函数，是一种特殊的方法。主要用来在创建对象时初始化对象1. 调用系统的构造函数创建对象（又称为实例化一个对象）　　var obj = new Object(); // 添加属性，方法 obj.name = 'jack'; ...

2019-09-21 17:39:00 204

转载类的继承

https://www.cnblogs.com/sandraryan/类的继承要求构造函数首字母大写，便于区分构造函数和普通函数编程过程中有一批数据有相同的属性和行为，为代码不冗余，让编程更有效率。将这些属性和行为封装起来，称为类（实际上还是函数）。然后通过特殊方法调用函数，拿到返回值和具体的对象。类为什么要继承 A类和B类有相同的行为属性，单独封装代码冗...

2019-09-18 11:35:00 135

转载 js面向对象（对象/类/工厂模式/构造函数/公有和原型）

https://www.cnblogs.com/sandraryan/什么是对象js中一切都是对象（有行为和特征）。js允许自定义对象，也提供了内建对象（string date math等）对象拥有属性和方法。属性是本身的特征，如车的颜色，型号。方法是可执行的操作。如，车可以代步如数组length是属性，pop push是方法（直接调用的是函数，通过对象调用的...

2019-09-17 10:08:00 113

转载 jq操作class类

https://www.cnblogs.com/sandraryan/鼠标移入移除切换样式方法一：css .menu { color: green; } .active { color: red; text-decoration: underline; }html <...

2019-09-16 18:01:00 155

转载 jq添加插入删除元素

https://www.cnblogs.com/sandraryan/append() - 在被选元素的结尾插入内容<body> <div class="wrap"> <h2>this is h2</h2> <p>this is a para</p> ...

2019-09-16 17:43:00 198

转载 jq杂项方法/工具方法----trim() html() val() text() attr()

https://www.cnblogs.com/sandraryan/$.trim() 函数用于去除字符串两端的空白字符。在中间的时候不会去掉。var str = ' 去除字符串左右两端的空格，换行，制表符。 ';res = $ .trim(str);console.log(str);console.log(res);...

2019-09-16 17:20:00 149

转载 jq杂项方法/工具方法----isArray()

https://www.cnblogs.com/sandraryan/$.isArray()函数用于判断指定参数是否是一个数组。返回布尔值。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body&...

2019-09-16 16:48:00 173

转载 jq杂项方法/工具方法----each() grep() map()

each() 用于循环数组对象。（单纯遍历）返回 false 可提前停止循环。接受的参数是数组名和要执行的函数，函数参数为数组索引和当前元素。var arr = [30, 40, 50,1 ,8]; $.each(arr, function(i,item){ console.log(i,item); }); // i ...

2019-09-16 16:30:00 101

转载 jq on绑定事件off移除事件

https://www.cnblogs.com/sandraryan/以前用的是bind(); 后来更新后用的on（on() 方法是 bind()、live() 和 delegate() 方法的新的替代品）<!DOCTYPE html><html lang="en"><head> <meta charset="U...

2019-09-16 14:43:00 594

转载 jq常用事件

https://www.cnblogs.com/sandraryan/click(); 点击事件dblclick(); 双击事件 $('.box').dblclick(function(){ alert('hi'); });keydown - 按键事件，键按下的过程keypress -按键事件。键被按下keyup - 按...

2019-09-16 14:29:00 88

转载 jq css()

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...

2019-09-16 12:00:00 78

转载 jq动画和停止动画

使用jq 实现动画循环效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

2019-09-16 11:42:00 194

转载 jq常用动画fade slide

https://www.cnblogs.com/sandraryan/hide();<divclass="box">bigbox</div> $('.box').hide(5000, function(){ console.log('hhhhh'); }); //hide() h设置隐藏元素...

2019-09-16 10:25:00 169

转载 jQuery的引入和使用

https://www.cnblogs.com/sandraryan/前端代码优化：无效循环越少越好，DOM节点操作越少越好，HTTP请求越少越好jq是一个js库。（不是框架）JQ优点1. 方便的DOM操作系统，降低了DOM代码操作量，提高了DOM操作代码的可维护性。2. 优化了对DOM节点的操作（开发中对DOM操作越少越好，程序员无法完全写出特别优秀的代码，可以借助...

2019-09-16 10:00:00 253

转载 js图片懒加载和预加载

https://www.cnblogs.com/sandraryan/什么是懒加载和预加载？复杂一点的说法参考：https://www.cnblogs.com/zhonghuali/p/9625943.html我个人的理解是：预加载是提前把图片等资源下载到客户端，一次性请求到所有资源，需要时从客户端调用渲染，减少了http请求次数，优化性能，但是会增加服务器压力（一次性缓存所...

2019-09-12 15:34:00 78

转载原生js设置audio在谷歌浏览器自动播放

https://www.cnblogs.com/sandraryan/谷歌浏览器更新后禁止了autoplay功能，但是有时候可能会需要自动播放。研究了一段代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n...

2019-08-29 17:09:00 4101

转载原生js实现多个随机大小颜色位置速度小球的碰壁反弹

需求：生成n个小球，让他们在一个大盒子中碰壁反弹，要求小球随机颜色，大小，初始位置，运动速度。思路分析：创建小球随机颜色等，添加到页面中。然后让小球发生移动。ps：计时器超级耗性能的qwq<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...

2019-08-27 10:37:00 461

转载响应式瀑布流

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...

2019-08-21 15:03:00 107

转载原生js实现最简单的瀑布流布局

瀑布流：瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部（百度百科）我的理解是：按照行布局，每行先添加一个元素，第二行元素从最矮的一行开始添加~~图片大概是这样子~~案例在这里：https://github.com/sandraryan/practise/blob/mast...

2019-08-21 12:04:00 153

转载原生js用div实现简单的轮播图

原省js实现轮播图。打开页面图片自动轮播，点击prev next按钮切换到上/下一张图片，点击1-5切换到对应图片。代码链接：https://github.com/sandraryan/practise/blob/master/js/%E8%BD%AE%E6%92%AD%E5%9B%BE.html大概长这样不用加图片，div就可以实现css代码：.wr...

2019-08-21 11:18:00 645

转载 js实现div的碰壁反弹效果

需求：写一个div，让div在父级进行匀速运动，碰到父级上下左右的边框，就向反方向运动。碰壁反弹在游戏制作中很常用~~~~<style> .wrap { width: 1000px;height: 500px; border: 1px solid red; margin: 40px auto; ...

2019-08-19 15:44:00 559

转载封装函数求任意两个值之间数字的累加和

function add(a,b){ // 给函数形参 var sum = 0; // 初始化sum用于存放和 for (var i = a; i <= b; i++){ sum += i; // 计数器初始值为a，结束值为b，每次给sum＋1 ...

2019-08-17 11:39:00 2643

转载 js数组冒泡排序

js数组的冒泡排序是最经典的一种排序方式（我以为）。冒泡排序是吧一组数组的元素两两比较，交换位置，通过多轮比较，实现从大到小或者从小到大的排序。 var arr = [1,0,5,6,3,9,22,49,20,11,78,9]; // 创建一个新数组 for(var i = 0; i <= arr.length-1; i++){ ...

2019-08-17 11:04:00 208

转载 js用for循环模拟数组翻转

js本身为数组提供了reverse()方法，可以翻转数组，返回一个新的数组，不影响原数组。本例中用for循环简单模拟reverse功能，实现数组翻转的效果。 <script> var arr = [1,9,0,8,5,3,0,2,0,2,4,9] var newArr = []; for(var i = arr.length...

2019-08-17 10:22:00 850

转载 js实现开关灯游戏

需求：点击三个按钮，页面出现不同数量的“灯”所有的灯有相同的点击效果。点击一个灯的时候，this和他的上下左右都会变成另一种背景色。代码在这里~~~https://github.com/sandraryan/practise/blob/master/js/%E5%BC%80%E5%85%B3%E7%81%AF%E6%B8%B8%E6%88%8F2.html<...

2019-08-15 20:31:00 275

转载数组去重（去掉旧数组中重复的0）

案例：去掉旧数组中0，去掉其他数字的方法同理可得<script> var arr1 = [0,9,3,0,0,4,0,99,20,10,0,4,10,0,9]; var arr2 = []; for(var i = 0; i < arr1.length; i++){ if(arr1[i] != 0){ ...

2019-08-13 20:57:00 361

转载从旧数组里筛选出符合条件的元素

arr1 中有一些数字，需要筛选出大于10的，并放进arr2里面。方法1：var arr1 = [3,90,9,49,0,22,19,9,3,5];var arr2 = [];for(var i = 0; i < arr1.length; i++){ if(arr1[i] > 10){ arr2.push(arr1[i]);...

2019-08-13 20:45:00 126

转载 js对数组的元素分割

不用方法（模拟方法）<script> var arr = ["hi",2,3,true,"hh","hi"]; var str =""; for(var i = 0; i < arr.length; i++){ str += arr[i] + "|"; } console.log(str);&lt...

2019-08-13 18:00:00 634

空空如也

空空如也