- 博客(30)
- 收藏
- 关注
RSS订阅原创 Js中offset、client
Js中offset、client有几个相似的属性Offset：offsetLeft、offsetTop、offsetWidth、offsetHeight；Client：clientLeft、clientTop、clientWidth、clientHeight；这里使用一个案例，来查看offset、client属性之间的区别；1.先设置一些基本样式<!DOCTYPE html><html lang="en"><head> <me..
2022-05-08 16:44:51
388
原创 js正则表达式基础
1.正则表达式可以通过两种方式创建，构造函数与字面量两种。2.检索方式共有两种接下来将通过一个小例子演示匹配模式的区别：3.这里不添加任何匹配模式可以发现正则表达式”/A/”只获取到字符串中间那个大写的A，跳过前面小写的a。说明在不添加匹配模式的情况下，正则表达式只能获取大写或小写不能同时获取。（ match( ) - 找到一个或多个正则表达式的匹配值）4.这里给它添加了忽略大小写的匹配模式，它就获取到了前面的小a；5.这里给它添加了全局匹配的匹配模式，它就获取到了两个小
2022-04-19 09:19:37
113
原创 ClassList属性
1.ClassList属性有以下几种方法:(1)通过ClassList可以获取元素的全部类名;(2)通过ClassList.remove()可以删除元素的一个或多个类名;(3)通过ClassList.add()可以向元素添加一个或多个类名;(4)通过ClassList.lentgh可以获取到元素类名的数量;(5)通过ClassList.item(x)可以获取到元素类名索引为x的类名;(6)通过ClassList.toggle可以为元素切换类;(7)通过ClassList.cont
2022-04-10 14:51:16
16611
原创 js随机变换颜色
1. 在页面放置一个div和button给予他们基本的样式；2.在script中分别获取到div和button；3.button给按钮添加一个点击事件4. 我们使用background-color: rgb(20,20,20)方法给予div颜色,通过更改rgb三个数值实现随机变换颜色;5.想要随机改变RGB三个数值需要使用Math对象里面的random（）方法6.在使用Math对象中的round（）方法对生成出来的随机数进行四舍五入化为整数；7.通过var分别
2022-03-29 15:49:29
4776
原创 11111
1.先创建基本样式2.先获取到需要进行判断的元素3.给它绑定onscroll()事件滚动条滚动时触发4.接下来我们需要以下几种方法5.将scrollHeight 、scrollTop 、 clientHeight 将这三种方法放进滚动条滚动事件中，通过在浏览器中检查元素我们可以发现将滚动条拉到底时scrollTop元素垂直滚动条滚动的距离 + clientHeight元素可见高度 = scrollHeight元素总高度；6.我们可以通过scrollTop
2022-03-20 16:23:11
141
原创 js数组方法
1. concat( ) 将数组链接起来2. join( ) 指定数组数据之间的间隔符号3. push( ) 给数组末尾添加一个或多个元素,并且会返回新的数组长度;4. unshift( ) 给数组开头添加一个或多个元素,并且会返回新的数组长度5. pop( ) 删除数组的最后一个元素，并返回删除的元素；6. shift( ) 删除数组的第一个元素,并返回删除的元素;7. filter( ) 过滤筛选数组,不影响原数组,返回过滤后的数组;8. map
2022-03-08 16:42:27
114
原创 JS数组.
1.可以通过Array()构造函数与数组字面量两种方法创建数组;2.使用构造函数创建数组,可以同时添加元素,也可以通过索引向里面添加元素3.使用字面量创建数组,在创建时就向里面添加元素;4.数组可以通过”数组加[索引]”的方式读取到数组中的元素5.数组中的元素可以是任意的数据类型6.使用构造函数创建数组时,可以通过改变Arrray()括号中的值创建一个指定长度的数组7. 获取数组的长度,可以使用length这个属性获取8. 数组可以通过for循环将数组
2022-03-08 16:36:00
66
原创 2D转换.
1.2D转换能让某个元素改变形状,大小,位置;2.他有以下几种方法translate() rotate() scale() skew() matrix()3.translate(x,y)通过给的X轴和Y轴给定的参数,由当前位置开始移动4.rotate(ndeg)通过给定一个度数让某元素旋转(正数将顺时针旋转,负数将逆时针选择;5.通过rotate(ndeg)旋转时可以通过transform-origin调整旋转顶点6. scale()通过元素本身的高度宽度与scale...
2021-12-28 16:30:12
158
原创 获取到当前时间
1. 先通过Date( )获取到当前的日期2.通过getFullYear()获取到年份3.通过getMonth()获取到月份4.通过getDate()获取到日期5.通过getHours()获取到小时6.通过getMinutes()获取到分钟7. 通过getSeconds()获取到秒8.将它们封装在函数里,通过setInterval不断的调用函数刷新时间...
2021-12-19 08:04:33
216
原创 更换网页背景色
完成效果2.先将HTML 写完；3.在HTML添加上CSS效果4.在js部分，我们先获取到背景body和选择颜色的div5.通过console.log( )查看元素是否获取成功6.通过for循环获取到每一个选择颜色的div的点击事件7.在点击事件中申明一个变量，获取到点击div的颜色8.将上面获取到的颜色给到背景9.就做完了10.谢谢观看...
2021-12-08 15:22:01
1048
原创 添加过渡效果
1.先放一个DIV。2.给DIV加上css样式。3.给DIV加上鼠标移入时变色4.它现在变色没有过渡效果5.我们可以用transition来实现过渡效果（1）transition-property规定应用过渡的 CSS 属性的名称。（2）transition-duration定义过渡效果花费的时间。默认是 0。（3）transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。（4）transition-de
2021-11-28 20:05:21
235
原创 css常用属性
1.font在一个声明中设置所有的字体属性2.font-family指定文本的字体系列3.font-size指定文本的字体大小4.font-style指定文本的字体样式5.font-variant以小型大写字体或者正常字体显示文本。6.font-weight指定字体的粗细。7.color设置文本颜色8.direction设置文本方向。9.letter-spacing设置字符间距10.line-height设置行高11.text-align对齐元素中的文本12.te
2021-11-28 16:10:33
81
原创 2021-04-28
1.我们先进入阿里巴巴矢量图标库。2.找到自己要用的图标，点击添加到购物车。图标选好后点击右上角的购物车图标。3.点击下载代码4.我们下载完后会得到一个压缩包，解压后点击demo—index.html.5.打开后我们可以看到自己下载好的图标，有三种引用方式我们使用第二种。6.我们根据文件上的教程来操作。7.打开之前解压出来的文件夹找到iconfont.css这个文件引入。8.给span加上类名icon
2021-11-17 14:38:40
4911
原创 2021-11-08
1.完整效果2.首先我们先放入六张扑克牌的图片3.我们给图片设置定位让扑克牌重叠在一起。4.依次给扑克牌设置当鼠标移入时旋转xx度。5.现在我们把鼠标移入会发现他的旋转效果达不到预期，这是因为我们没有设置它的旋转轴心，它默认按中心点旋转。6.我们给它们设置旋转轴心为右上角。7.现在旋转的效果就出来了8.在给它加上过渡9．旋转轴心就做好了10.谢谢大家...
2021-11-08 08:00:38
76
原创 2021-10-28
1.先放入两个按钮标签，分别写上隐藏、显示。2.在放入一个div标签，并且给它设置样式。3.创建一个script标签，分别获取到按钮和div标签。4.在script标签中给显示按钮设置点击事件。5.给显示按钮点击事件设置将div标签的display属性设置为“block”；6.在script标签中给隐藏按钮设置点击事件。7. 给隐藏按钮点击事件设置将div标签的display属性设置为“none”；8. 现在到...
2021-10-28 09:31:53
129
1
原创 2021-10-17
CSS3动画可以在许多网页中取代动画图片、Flash动画以及JavaScript。 在CSS3中创建动画需要用到@keyframes规则，在@keyframes中规则某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。 这是一个简单的动画，只有最基础的名称和时长。（如果忽略时长，则动画效果不会显示，因为默认值为零）当在@keyframes中创建动画时，需要绑定到某个选择器，否则不会产生动画效果。（画黄线的部分是@keyframes绑定到某个选择器的部分，名字可以更改）5.可以..
2021-10-17 20:30:22
94
原创 CSS过渡
在使用伪类（hover）的放大缩小元素的时候，元素会在一瞬间放大缩小没有一个过渡。通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 transition-property是规定应用过渡的属性名称。transition-duration是定义过渡效果花费的时间。transition-timing-function是规定过渡效果的时间曲线。6. 时间曲线样式有以下几种（1）linear 规定以相
2021-10-11 15:39:29
75
原创 2021-09-26
通过CSS3转换，我们可以旋转、缩放、移动、倾斜元素。2.我们能通过以下几种方法转换元素：(1)通过rotate()方法，元素会根据给的角度顺时针、逆时针旋转。(2)通过scale()方法，元素会根据给的宽度和高度增加缩减。(3)通过translate()方法，元素会根据给的X坐标和Y坐标移动。(4)通过skew()方法，会根据给的X坐标和Y坐标进行倾斜。3.放出4个<div>标签，并且统一设置宽度高度。4.再分别给4个<div>标签设置颜色。5
2021-09-26 20:24:03
90
原创 2021-09-07
在Dreamweaver中为了页面的布局，可能会用到浮动来调整元素的位置。我给蓝色的div设置一个向右浮动的浮动效果。2.在图中看到蓝色的div浮动到了页面的最右边，同时因为设置了浮动脱离了原先的文档流，导致原本包裹着它的父元素绿色div无法被撑开。3.我们可以通过下面几种方式来清除浮动带来的问题。4.（1）通过直接设置绿色div的高度清除浮动。5（2）在绿色div结束标签之前添加额外的div，设置clear:both的样式清除浮动；6.（3）通过设置伪元素的方式清除浮动。
2021-09-07 16:03:10
62
原创 2021-08-26
1.在导航栏中找到文件，选择新建2.新建一个HTML文档 3.在body标签中放入div标签4.在head标签中放入一个style标签5.在style标签中选择到body标签中的div标签6.在style标签中给div标签添加一个100px的宽度7. 在style标签中给div标签添加一个100px的高度8. 在style标签中给div标签添加一个背景颜色，打开浏览器查看，我们获得了一个正方形9. 在style标签中给div标签添加百分之50的
2021-08-26 14:37:29
82
原创 Axure预览工具栏插入图标
1.打开Axure2.在上方导航栏中找到发布点击3.在找到预览选项点击进入预览选项面板4.在预览选项面板中找到配置点击5.进入到生成HTML页面点击标志6.分别选中标题与标志导入图片写上标题点击确定7.点击关闭预览选项页面8.点击预览9.图片与标题成功的放在工具栏上面10.注意插入JPG格式的图片好像不显示...
2021-06-27 15:44:21
329
原创 2021-06-16
1.在元件库中找到下拉列表框拖出调整为合适大小在复制一份2.右键第二个下拉列表框转化为动态面板3．双击进入动态面板，复制一个新的图层并给他们命名4.双击第一个下拉列表选项框，复制一个选项分别命名为饮料、零食5.双击进入动态面板的饮料面板，双击下拉列表选项框给它命名6.双击进入动态面板的零食面板，双击下拉列表选项框给它命名7.选中第一个下拉列表框，在属性面板找到选项改变时点击进入用例编辑页面8.在用例编辑页面，找到设置面板状态设置动态面板状态为饮料面板，
2021-06-16 09:04:15
134
原创 动态面板拖动
1打开Axure2.在元件库中拖出矩形3.选中矩形右键转换为动态面板4.选中动态面板在属性中拖动时打开5.在添加动作中找到移动点击，在配置动作中将选中当前原件，移动下拉框中设置为推动6.还可以将移动下拉框中的拖动换成垂直拖动或水平拖动固定他拖动方向7.还可以通过配置动作中的界限给它添加限制8.动态面板的拖动就设置完了...
2021-06-07 20:20:54
496
原创 动态面板缩放
1.在做动态面板轮播的时候，如果要做放大缩小的效果，就需要在每一张图片上都设置上设置尺寸。2.一但图片多了设置起来就会很繁琐。3.可以将要轮播的图片在State1.2.3.4中设置为背景图片。（在样式面板中找到背景图片导入，再将下面的三个选项分别改为水平居中，垂直居中，填充。这样可以通过改变动态面板的大小来控制轮播图片的大小）4. 在放大缩小按钮中只需要设置动态面板的尺寸就可以了...
2021-05-27 08:15:06
199
原创 中继器导入图片
在元件库中找到中继器拖出2.双击中继器将里面的矩形删除，在元件库中找到图片拖出3.选中矩形在右侧属性面板中找到中继器选中下方方框右键导入图片4.选中中继器，在属性面板中找到每项加载时双击进入用例编辑页面，在添加动作中找到设置图片点击，在配置动作中选中图片,在Default中点击下拉三角将图片改成值5.点击 Default中的FX，进入编辑值页面点击插入变量或函数选择[[Item.Column0]]点击确定完成...
2021-05-17 20:29:24
1314
原创 动态面板
1.在元件库中找到动态面板拖出2.双击动态面板进入State1，在元件库中找到矩形拖出3.在属性面板中找到固定到浏览器打开4.在固定到浏览器页面中勾选固定到浏览器，水平固定选择居中、垂直固定选择居中...
2021-05-08 09:22:50
70
原创 动态面板
1.在元件库中找到动态面板拖出2.双击动态面板进入State1，在元件库中找到矩形拖出3.双击动态面板进入面板状态管理，选中state1点击复制，复制两个4.分别把State1.State2.State3中的矩形设置数字1.2.3.5.选中动态面板，在属性面板中双击鼠标单击时进入用例编辑页面，在添加动作中找到设置动态面板状态点击，配置动作中选中动态面板，选择状态Next进入动画选择向左滑动...
2021-05-08 08:59:29
578
原创 动态面板
在元件库中找到文本标签拖出并命名为点击展开2.在元件库中找到文本段落拖出并隐藏3.在元件库中找到一级标题拖出并改名为推动展开4.在元件库中找到文本标签拖出命名为收回，叠在点击展开上方并隐藏5.选中点击展开矩形，在属性面板中双击鼠标单击时进入用例编剧面板，在添加动作中选择显示隐藏，在配置动作中选中文本段落，可见性选择显示，更多选项设置为推动原件，动画选择线性。设置隐藏点击展开.显示收回6.选中收回矩形，属性面板中双击鼠标单击时进入用例编剧面板，在添加动作中选择显示隐藏，在
2021-05-08 08:40:29
73
原创 动态面板
先在元件库中拖出矩形右键矩形在菜单栏中找到转化为动态面板点击点击选中矩形在右侧属性面板找到拖动时双击进入用例编辑页面，在原件中找到移动点击，在右侧配置动作中选中当前原件设置移动为拖动确定选中矩形在属性面板双击拖动结束打开用例编剧页面在添加动作中找到移动点击，在配置动作中选中当前原件和设置移动回到拖动前位置确定...
2021-04-28 20:43:00
75
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人