nbzyq-CSDN博客

原创 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 介绍