- 博客(11)
- 收藏
- 关注
原创 JS实现动画效果(利用定时器)
JavaScript动画主要利用定时器(setTimeout 和 setInterval)来实现。设计思路:通过循环改变元素的某个 CSS 样式属性,从而达到动态效果,如移动位置、缩放大小、渐隐渐现等。移动动画主要通过动态修改元素的坐标来实现。技术要点如下:示例下面示例演示了如何设计一个简单的元素移动效果。通过指向元素、移动的位置,以及移动的步数,可以设计按一定的速度把元素从当前位置移动到指定的位置。本示例引用前面介绍的 getB() 方法,该方法能够获取当前元素的绝对定位坐标值。 使
2022-07-01 10:43:15
1167
1
原创 JS键盘事件
onkeyup 某个键盘按键被松开时触发onkeydown 某个键盘按键被按下时触发onkeypress 某个键盘按键被按下时 触发但是它不识别功能键 比如 ctrl shift 箭头等案例: // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) ...
2022-06-30 22:21:50
1386
原创 js中的两种定时器setTimeout()和setInterval()怎么用
JS有两种定时器分别是setTimeout()和setInterval(),这两个区别就是setTimeout()是一次性的定时器,而setInterval()是循环的定时器。js中的定时器精度并不准确,这是因为JS中的定时器仅仅是将执行的语句加入队列,这样在定时器之前的语句若是在循环或者有延迟的情况下,定时器也会相应地延上面提到了js中的定时器精度不准确的原因,同样的这也会导致使用setTimeInterVal语句会卡顿,其不管语句是否执行完成,都会在时间点执行语句。实际上大多数的场景中,只是想要定时之后
2022-06-29 21:28:31
285
原创 javascript事件
目录JavaScript 常用事件鼠标事件键盘事件窗口事件 javascript常用事件:click、dblclick、mouseup、mouseout、keypress、keydown、keyup、error、load、resize、unload、blur、change、focus、reset等。JavaScript 的一个基本特征就是事件驱动。所谓事件驱动,就是当用户执行了某种操作或 Javascript 和 html 交互后导致了某种状态改变后,会因此而引发一系列程序的响应执行。在这里,用户的操作称为
2022-06-28 16:07:14
597
原创 Javascript常见循环语句
目录一、while循环二、do…while循环 三、 for循环while语法:while (条件){代码(循环体)};注:(1)、只有当条件为true时,才能执行循环体。如果条件为false,循环有可能永远不被执行。(2)、先执行条件,再执行循环体。(3)、循环一次称之为一次迭代,循环几次称之为几次迭代。上面的例子中,当年i循环到5时,不满足条件,循环结束;do ...while语法:do{//循环代码}while(条件);注:(1)、始终是先执行循环体,在检查条件是否满足。(2)、无论条件是true还是
2022-06-27 17:29:24
1599
原创 css布局之弹性布局
Flex(弹性布局)。是一种响应式布局,能自动伸缩盒模型达到自适应的效果。弹性布局由弹性容器(flex container)和弹性项目(flex item;组成。在弹性容然中,水平方向称为主轴(main axis)(起点main start,终点main end);垂直方向称为纵铂(ross axis(起点cross stat.终点cross end)。在弹性项目中,元素的宽度称为main size,高度称为cross size。弹性容器通过display: flex属性,可将元素声明块级弹性容器;
2022-06-24 19:20:45
390
1
原创 css动画
一·Css动画1.定义动画:使用@kexframes定义动画.关键帧可以使用关键字from-to.也可以使用0%-100%⒉.配置动画:1) animation-name动画名字取值:@keyframes定义的动画的名字2) animation-duration动画持续的时间取值:单位可以是s,也可以是ms,默认是O3)animation-iteration-count动画迭代次数取值:数字,默认值为1,不能为负数,可以为小数比如0.5表示播放一半infinite无限循环4)animat
2022-06-23 19:24:53
132
原创 CSS常见问题的解决办法
1.项目场景:高度塌陷问题描述:父元素由子元素撑开,当子元素全部设置浮动时,父元素的高度将无法被撑开,称为高度塌陷原因分析:父元素高度由子元素撑开,当子元素发生浮动时,浮动使元素脱离文档流,因此无法撑开父元素解决方案:1,给父元素添加overflow: hidden/auto;当overflow的值不为visible时,就会触发BFC,其中的元素布局不受外界的影响,即可解决高度塌陷问题。但是当内容增多的时候,溢出的内容会被隐藏或产生滚动条,二者不是希望看到的,不推荐使用⒉.在浮动元素之后添加一
2022-06-22 21:20:33
126
原创 css 知识点
选择器1.标签选择器通过标签的名字命名body{color:red}2.id选择器标签中的id属性,通常应用于某些标签中独有的样式#one{color:red}3.类选择器标签中的class属性通常应用于某几个标签具有相同的样式.pink{color:pink}4.全选择器使用*号来表示对整个html中所有标签都起作用*{font-size:36px} 盒子模型元素的总高度和元素的宽度计算如下:总高度:高度 + 上下内边距 + 上下边框 + 上下边距。总宽度:宽度+左右内边距+左
2022-06-21 18:40:07
67
原创 HTML 介绍
一.html介绍 HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。 HTML是由WEB的发明 者 Tim Berners-Lee (蒂姆·伯纳斯·李)和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言(SGML)的应用。 用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如 , 等)。 使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的
2022-06-20 19:03:47
233
转载 HTML 介绍
一.html介绍 HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。 HTML是由WEB的发明 者 Tim Berners-Lee (蒂姆·伯纳斯·李)和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言(SGML)的应用。 用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如 , 等)。 使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的
2022-06-20 19:01:10
162
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人