Violetks Blog

Thinking will not overcome fear but action will.

JavaScript 基础知识（三）

一、数组和伪数组的区别 1、数组是一个特殊对象，与常规对象的区别：（1）当有新元素添加到列表中时，自动更新 length 属性。（2）可以通过设置 length 属性改变数组长度。（3）能继承 Array.prototype 中的方法。（4）是 Array 类型。 2、伪数组的特点：（1）伪数组又称为类数组，类似数组的对象。（2）具有 length 属性，但 length 属性不...

Posted by violetks on November 26, 2019

JavaScript 基础知识（二）

一、闭包是什么？有什么优点和缺点？（★） function fn() { // 外部函数 var a = 5; return function () { // 内部函数 console.log(a); } } 闭包是指有权访问另一个函数作用域中的局部变量的函数。当其中一个内部函数在外部函数以外被调用时，就会形成闭包。作用：通过一系列方法，将函数内部的变量（局部变量）转...

Posted by violetks on November 25, 2019

JavaScript 基础知识（一）

一、与 Java 的区别 1、JavaScript 的程序代码由客户端浏览器解释执行；Java 程序则必须先经过编译，转换成 class 文件，在 JVM 环境下执行。 2、JavaScript 模仿 Java 的语法，设计了一套类似于纯面向对象（常称为基于对象）的语法结构。 3、JavaScript 的程序代码直接嵌入 HTML 文件中，而 Java 编写的是一个独立的 Java 程序。 ...

Posted by violetks on November 24, 2019

纯 CSS 画图

使用 CSS 画三角形、正方形、饼状图

一、用纯 CSS 创建一个三角形 1、一般情况下，我们设置盒子的宽高，效果如下图。 { width: 20px; height: 20px; border: 20px solid; border-color: red yellow blue green; } 2、把宽高设为 0，下、左、右三条边隐藏掉，可得到一个等腰三角形。 { widt...

Posted by violetks on November 23, 2019

动画眼睛跟随鼠标移动

跟着 B 站学代码，原视频链接，查看 demo 戳这里一、伪类和伪元素 1、CSS3中使用“:”是伪类，“::”是伪元素，想要兼容低版本浏览器伪元素也可使用“:”格式。 2、伪类用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般 CSS 相似，可以为已有元素...

Posted by violetks on November 22, 2019

CSS 加载动画效果

CSS3 新特性——动画 .loading { animation: a1 2s linear infinite; } @keyframes a1 { to { transform: rotate(360deg); } } 动画是使元素从一种样式逐渐变化为另一种样式的效果。用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等...

Posted by violetks on November 21, 2019

点击方块掉落

JS： <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.container').append($(new Ar...

Posted by violetks on November 20, 2019

CSS 实现图片 3D 分层悬浮效果

transform、translate、transition 一、做最底层容器 container 二、加入图片，设置不同位置和透明度四张图一开始重叠在一起，鼠标 hover 位置改变。 HTML <!DOCTYPE html> <html> <head> <title>Layered Image...

Posted by violetks on November 19, 2019

文本溢出截断省略方案

一、单行文本溢出省略 overflow: hidden; /* 文字长度超出限定宽度，则隐藏超出的内容 */ white-space: nowrap; /* 文字在一行显示，不能换行 */ text-overflow: ellipsis; /* 文本溢出时，显示省略号 */ 1、优点无兼容问题响应式截断文本溢出范围才显示省略号，否则不显示省略号...

Posted by violetks on November 18, 2019

CSS 水平垂直居中方式

top、right、bottom、left 的值是相对于父元素尺寸的，margin、transform 是相对于自身尺寸的。一、水平居中 1、行内元素水平居中例如span这种行内元素想要水平居中，可以在其父元素上设置text-align: center。需要子元素宽度小于父元素宽度。 2、块级元素水平居中（定宽）给需要水平居中的块元素设置margin: 0 auto，块元...

Posted by violetks on November 17, 2019