读心术游戏

狡辉两门

于 2022-04-14 19:51:41 发布

阅读量2.6k

点赞数 3

分类专栏： JS项目文章标签： javascript 前端开发语言 css html

本文链接：https://blog.csdn.net/qq_46262422/article/details/124180081

版权

JS项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

读心术前置知识

HTML5 新增查询 API

querySelector
querySelectorAll

<body>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
   </ul>
   <script>
       // querySelector 只会选择上匹配的第一个元素
       var li = document.querySelector('ul li');
       console.log(li);

       // querySelectorAll 会选择中所有匹配的元素
       var lis = document.querySelectorAll('ul li');
       console.log(lis);
   </script>
</body>

模拟 jquery 封装两个查询方法：

function $(selector) {
  	return document.querySelector(selector);
}

function $$(selector) {
    return document.querySelectorAll(selector);
}

弹性盒子

2009 年，W3C 提出了一种新的方案，flex 布局。

可以简便，完整，响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能了。

flex 布局已经成为当前布局的首选方案。

生成弹性容器和弹性项目

更改方向

通过flex-direction可更改主轴方向

主轴排列

通过justify-content属性，可以影响主轴的排列方式

侧轴排列

通过align-items属性，可以影响侧轴的排列方式。

网格布局

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局。

Grid 布局则是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

display 属性

display: grid 可以指定一个容器采用网格布局。

默认情况下，所指定的容器元素为块级元素，但也可以通过 display: inline-grid 将其设成行内元素。

下面是一个 display: grid 的示例：

html 代码片段：

<body>
    <span>foo</span>
    <div class="wrapper">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <span>bar</span>
</body>

css 代码片段：

.wrapper {
    width: 450px;
    height: 450px;
    background: #f3f3f3;
    text-align: center;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px 150px;
}

.item {
    text-align: center;
    border: 1px solid #fff;
    color: #fff;
    font-weight: bold;
    line-height: 150px;
}

.item:first-of-type {
    background: #ef342a
}

.item:nth-of-type(2) {
    background: #00a0a0;
}

.item:nth-of-type(3) {
    background: #a0a0ff;
}

.item:nth-of-type(4) {
    background-color: skyblue;
}

.item:nth-of-type(5) {
    background-color: greenyellow;
}

.item:last-of-type {
    background-color: pink;
}

注：grid-template-columns 与 grid-template-rows 属性在稍后会具体进行介绍。

效果：

grid-template-rows 和 grid-template-columns 属性

容器指定了网格布局以后，接着就要划分行和列。

grid-template-columns 属性定义每一列的列宽，grid-template-rows 属性定义每一行的行高。

...
.wrapper {
    width: 450px;
    height: 450px;
    background: #f3f3f3;
    text-align: center;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px 150px;
}
...

在上面的代码中，我们就指定了一个 3 行 3 列的网格，列宽和行高都是150px。

除了使用绝对单位，也可以使用百分比。

...
.wrapper {
    width: 450px;
    height: 450px;
    background: #f3f3f3;
    text-align: center;
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 33.33% 33.33% 33.33%;
}
...

效果同上。

通过 grid-template-columns 属性和百分比值的配合，我们可以很轻松的写出两栏式布局。例如：

...
.wrapper {
    width: 450px;
    height: 450px;
    background: #f3f3f3;
    text-align: center;
    display: grid;
    grid-template-columns: 70% 30%;
}
...

效果：

repeat 方法

有时候，重复写同样的值非常麻烦，尤其网格很多时。

这时，可以使用 repeat 函数，简化重复的值。

上面的代码用 repeat 改写如下：

...
.wrapper {
    width: 450px;
    height: 450px;
    background: #f3f3f3;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(3, 150px);
}
...

repeat 方法接受两个参数，第一个参数是重复的次数（上例是 3），第二个参数是所要重复的值（上例是 150px）。

repeat 方法也可以重复某种模式。

...
grid-template-columns: repeat(2, 100px 20px 80px);
...

上面代码定义了 6 列，第一列和第四列的宽度为 100px，第二列和第五列为 20px，第三列和第六列为 80px。

具体示例如下：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 500px;
            height: 500px;
            border: 1px solid;
            display: grid;
            grid-template-columns: repeat(2, 250px);
            grid-template-rows: 200px 200px;
        }

        .container div {
            border: 1px solid;
            text-align: center;
            font-size: 18px;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

CSS 过渡效果

在 CSS3 中，新增了过渡效果，可以让我们在样式切换时更加的丝滑，不至于两个样式之间切换很生硬。

transition 语法如下：

transition: property duration timing-function delay

transition属性是个复合属性，包括以下几个子属性：

transition-property ：规定设置过渡效果的 css 属性名称
transition-duration ：规定完成过渡效果需要多少秒或毫秒
transition-timing-function ：指定过渡函数，规定速度效果的速度曲线
transition-delay ：指定开始出现的延迟时间

CSS 过渡示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            transition: all 1s;
        }
        div:hover{
            height: 300px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果：

2021-07-24 21.40.41

CSS 变形

CSS 变形 transform 是一些效果的集合，主要是移动、旋转、缩放和倾斜这四种基本操作，还可以通过设置 matrix 矩阵来实现更复杂的效果。变形 transform 可以实现 2D 和 3D 两种效果。

旋转 ratate函数

通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。

如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

transform:rotate(-20deg) 如下图：

扭曲 skew 函数

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

一个参数：表示水平方向的倾斜角度；
两个参数：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

分3种情况

transform:skewX(30deg) 如下图：

transform:skewY(10deg) 如下图：

transform:skew(-45deg) 如下图：

缩放 scale 函数

让元素根据中心原点对对象进行缩放。 scale()**的取值默认的值为1，当值设置为**0.01到0.99之间时，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

也分3种情况：

transform:scale(x,y) 使元素水平方向和垂直方向同时缩放

transform:scale(x) X轴缩放

transform:scale(y) Y轴缩放

位移 translate 函数

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

分为三种情况：

transform:translate(x,y) 使元素水平方向和垂直方向同时移动

transform:translateX(x) 使元素水平方向移动

transform:translateY(y) 使元素垂直方向移动

原点 transform-origin

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示：

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过 transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

transform-origin取值和元素设置背景中的background-position取值类似(也可以是具体的像素值)，如下表所示：

读心术笔记

随机数

产生随机数的公式如下：

Math.floor(Math.random() * 可能性数 + 第一个可能值)
// 例如，我要生成 1-10 的随机数，那么写法如下
Math.floor(Math.random() * 10 + 1)

接下来，进一步我可以封装一个函数

// 返回从 min 到 max 的随机数
function getRandom(min, max){
  return Math.floor(Math.random() * (max - min + 1) + min)
}

transitionend

该事件会在 transition 过渡效果结束后触发。

狡辉两门

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
读心术游戏

读心术前置知识HTML5 新增查询 APIquerySelectorquerySelectorAll<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <s
复制链接

扫一扫