JackieDYH的博客_编码小技巧

JavaScript中开发常用方法-总结-持续更新

数组的常用方法lengthlength 是一个可读可写的属性，用来表示数组的长度（即数组元素个数）。通过访问 length 属性，可以获取数组长度；而通过修改

常用方法

js

JavaScript

数组

字符串

原创 2021-08-17 13:13:17 89 阅读

JavaScript中开发常用方法-总结-持续更新

数组的常用方法lengthlength 是一个可读可写的属性，用来表示数组的长度（即数组元素个数）。通过访问 length 属性，可以获取数组长度；而通过修改 length 的值，可以增加或减少数组元素，甚至可以完全清空数组元素。length 属性的读、写操作示例如下：var arr = [1,2,3];alert(arr.length);//读取数组长度,结果为3arr.length = 1;/

常用方法

js

JavaScript

数组

字符串

原创 2021-08-17 13:13:17 160 阅读

hover小技巧利用filter改变滤镜值实现效果

vue网站下面的赞助商模块做的很好玩，当鼠标悬停的时候，图片会“改变”。看过它的代码之后才发现并不是修改了图片路径，只是通过img:hover更改了图片的属性img { filter: grayscale(100

filter

vue

css

html

切换图片效果

原创 2020-11-17 10:10:33 55 阅读

hover小技巧利用filter改变滤镜值实现效果

vue网站下面的赞助商模块做的很好玩，当鼠标悬停的时候，图片会“改变”。看过它的代码之后才发现并不是修改了图片路径，只是通过img:hover更改了图片的属性img { filter: grayscale(100%); opacity: 0.66; width: 160px; }img:hover { filter: none; opacity: 1; }CSS的灰度滤镜上...

filter

vue

css

html

切换图片效果

原创 2020-11-17 10:10:33 266 阅读

html前端数据加载的loading效果

<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span></div><style type="text/css"> * { padding: 0; margin: 0; } .loading...

html

vue

数据加载中loading

加载效果

css3

原创 2020-08-17 18:22:24 571 阅读

html前端数据加载的loading效果

<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span></div><style type="text/css"> * { padding: 0; margin: 0; } .loading...

html

vue

数据加载中loading

加载效果

css3

原创 2020-08-17 18:22:24 951 阅读

js用for循环将小方块摆成到V(A)型方法四--小技巧

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ position: relative; } #box>div{ ...

for循环

V型

A型

div方块

定位

原创 2020-03-27 21:54:36 40 阅读

js用for循环将小方块摆成到V(A)型方法四--小技巧

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ position: relative; } #box>div{ ...

for循环

V型

A型

div方块

定位

原创 2020-03-27 21:54:36 41 阅读

js之左右移动的动画的函数封装

function move(ele,end,step){ //var step = 10 //先清除定时器，从而防止定时器的叠加

左右移动的动画

javascript

原创 2020-03-27 21:38:46 70 阅读

js之左右移动的动画的函数封装

function move(ele,end,step){ //var step = 10 //先清除定时器，从而防止定时器的叠加 clearInterval(timer); //设置定时器 //1.获取起点 var start = parseInt(getStyle(ele,'left'));//1000 //2.处理步长 if(e...

左右移动的动画

javascript

JavaScript

原创 2020-03-27 21:38:46 168 阅读

js获取任意元素的样式(兼容ie)插件

//获取任意元素的非行内样式var getStyle = function(ele,attr){ //1.将主要功能代码写入函数中

获取任意元素的样式

javascript

原创 2020-03-27 21:37:54 81 阅读

js获取任意元素的样式(兼容ie)插件

//获取任意元素的非行内样式var getStyle = function(ele,attr){ //1.将主要功能代码写入函数中 if(ele.currentStyle==undefined){ //证明当前浏览器是标准浏览器 var bg = getComputedStyle(ele)[attr]; return bg; ...

获取任意元素的样式

javascript

JavaScript

原创 2020-03-27 21:37:54 73 阅读

js用for循环将小方块摆成V型方法四--小技巧

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

for

v

v型

html

css

原创 2020-03-25 12:39:19 78 阅读

js用for循环将小方块摆成V型方法四--小技巧

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

for

v

v型

html

css

原创 2020-03-25 12:39:19 37 阅读

js用for循环将小方块摆成V型方法三--小技巧

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

for循环

v型

javascript

html

i++

原创 2020-03-21 13:35:56 63 阅读

js用for循环将小方块摆成V型方法三--小技巧

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

for循环

v型

javascript

html

i++

原创 2020-03-21 13:35:56 46 阅读

js用for循环将小方块摆成V型方法二--小技巧

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

for循环

javascript

小方块摆放v型

css3

html

原创 2020-03-20 09:25:00 34 阅读

js用for循环将小方块摆成V型方法一--小技巧

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #list { position: relative; list-style: none;...

javascript

小方块摆成V型

for循环

css

html

原创 2020-03-19 22:02:24 95 阅读

js用for循环将小方块摆成V型方法一--小技巧

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #list { position: relative; list-style: none;...

javascript

小方块摆成V型

for循环

css

html

原创 2020-03-19 22:02:24 82 阅读

js-2种方法输出1000以内所有的“水仙花数”--小技巧

<!DOCTYPE html><html> <head> <meta charset="utf-8">

水仙花数

javascript

求和

html

i++

原创 2020-03-19 21:40:06 93 阅读

js-2种方法输出1000以内所有的“水仙花数”--小技巧

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> //输出所有的“水仙花数” window.onload = function() {...

水仙花数

javascript

求和

html

i++

原创 2020-03-19 21:40:06 121 阅读

js编写类似购物车checkbox全选反选案例--小技巧

<!DOCTYPE html><html> <head>

javascript

checkbox

checked

全选

反选

原创 2020-03-19 21:36:15 42 阅读

js编写类似购物车checkbox全选反选案例--小技巧

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function() { var btn1 = do...

javascript

checkbox

checked

全选

反选

原创 2020-03-19 21:36:15 69 阅读

js输出*等腰三角和直角三角形

<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...

javascript

等腰三角

三角

i++

html

原创 2020-03-19 21:32:25 151 阅读

js输出*等腰三角和直角三角形

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function() { // 等腰三角形 ...

javascript

等腰三角

三角

i++

html

原创 2020-03-19 21:32:25 724 阅读

js两层for循环实现九九乘法表

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

javascript

九九乘法表

html

i++

原创 2020-03-17 21:16:53 79 阅读

js两层for循环实现九九乘法表

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

javascript

九九乘法表

html

i++

JavaScript

原创 2020-03-17 21:16:53 138 阅读

上下固定中间自动的移动端布局方案弹性盒子布局--小技巧

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

移动端布局方案

上下固定布局

css

html

弹性盒子布局

原创 2020-03-09 20:51:09 149 阅读

上下固定中间自动的移动端布局方案弹性盒子布局--小技巧

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

移动端布局方案

上下固定布局

css

html

弹性盒子布局

原创 2020-03-09 20:51:09 53 阅读

js动态计算移动端rem值(remScale.js/flexible.js)--小技巧(推荐增强版-flexible.js)

remScale.js文件// JavaScript Document(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', ...

flexible.js

remScale.js

移动端布局

rem计算

html

原创 2020-03-05 13:10:22 91 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客