前端基础题目（二）

最新推荐文章于 2021-03-09 19:53:34 发布

irvix

最新推荐文章于 2021-03-09 19:53:34 发布

阅读量324

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_40526226/article/details/114267371

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、请使用纯CSS实现下图所示的布局效果

（手写HTML代码和CSS代码），不考虑兼容性：

在这里插入图片描述

绿色色值是：#00BC9B，灰色色值是：#BCBCBC

注意HTML的语义化、内容的扩展性以及尺寸的自适应性。

<!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>
        .container {
            display: flex;
            align-items: center;
            width: 100%;
        }

        .donecir {
            width: 50px;
            height: 50px;
            border: solid 3px #00bc9b;
            float: left;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .indonecir {
            width: 40px;
            height: 40px;
            border: solid 1px #00bc9b;
            border-radius: 50%;
            background-color: #00bc9b;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .doneline {
            width: 100px;
            height: 3px;
            float: left;
            background-color: #00bc9b;
            margin-bottom: 19px;
        }

        .line {
            width: 100px;
            height: 3px;
            float: left;
            background-color: #BCBCBC;
            margin-bottom: 19px;
        }

        .cir {
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .incir {
            width: 40px;
            height: 40px;
            border: solid 1px #BCBCBC;
            border-radius: 50%;
            background-color: #BCBCBC;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .text {
            display: block;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="area">
            <div class="donecir">
                <div class="indonecir" style="color: #fff">1</div>
            </div>
            <div class="text">第1步</div>
        </div>
        <div class="area">
            <div class="doneline"></div>
        </div>
        <div class="area">
            <div class="donecir">
                <div class="indonecir" style="color: #fff">2</div>
            </div>
            <div class="text">第2步</div>
        </div>
        <div class="line"></div>
        <div class="area">
            <div class="cir">
                <div class="incir" style="color: white;">3</div>
            </div>
            <div class="text">第3步</div>
        </div>
        <div class="line"></div>
        <div class="area">
            <div class="cir">
                <div class="incir" style="color: white;">4</div>
            </div>
            <div class="text">第4步</div>
        </div>
    </div>
</body>

</html>

二、请手写一个SVG效果，SVG大小是300*150

请手写一个SVG效果，SVG大小是300*150，然后：

已SVG元素的中心为圆心绘制出一个圆形，圆形的半径是60px，填充色是deepskyblue;
在圆形的中心位置绘制文字“阅文集团”，字号大小是14px，文字颜色是白色；

请写出满足上述要求的SVG代码。

<!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>
</head>
<body>
    <svg>
        <circle cx="150" cy="75" r="60" fill="deepskyblue"></circle>
        <text x="50%" y="50%" font-size="14" fill="white" text-anchor="middle" dominant-baseline="middle">阿爸吧啊</text>
    </svg>
</body>
</html>

三、Canvas基础测试

在页面中创建一个300*150大小的Canvas画布；
以画布中心点为圆心绘制一个圆，圆的半径大小是60，圆的填充色是deepskyblue;
在上述圆的中心绘制文字“阅文集团”，字号大小是14px，字体任意，文字颜色是白色。

// 1. 第1小题
var canvas = document.createElement('canvas');
document.body.append(canvas);

// 2. 圆形
var context = canvas.getContext('2d');

context.fillStyle = 'deepskyblue';
context.arc(150, 75, 60, 0, 2 * Math.PI);
// 也可以使用下面的椭圆函数
// context.ellipse(150, 75, 60, 60, 0, 0, 2 * Math.PI);
context.fill();

// 3. 文字
context.fillStyle = 'white';
context.font = '14px sans-serif';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('阅文集团', 150, 75);

四、链接替换

在一个Web页面中有很多的链接和图片，例如：

<a href="../some.html">链接1</a>
<a href="/home/aside/search.html">链接2</a>
<a href="./docs/yuewen.pdf">链接1</a>
<img src="../icon-a.svg">
<img src="/image/icon-a.png">

……等。

请实现，使用原生JavaScript把页面中所有的<a>元素的链接地址和<img>元素的图片地址都替换成当前完整的绝对地址。

例如，假设此时的页面地址是 https://www.yuewen.com/path/，则元素<a href="../some.html">链接1</a>替换成<a href="https://www.yuewen.com/some.html">链接1</a>，元素<a href="/home/aside/search.html">链接2`替换成链接2

document.querySelectorAll('a, img').forEach(ele => {
    if (ele.href) {
       ele.href = ele.href;
    } else if (ele.src) {
      ele.src= ele.src;
    }
});

五、处理URL

本题关于URL地址的处理。
需求如下：
请实现给当前页面的URL地址增加或替换 uid=1 的查询内容。

即：
如果当前URL地址是：https://www.yuewen.com#aaa，则处理后的URL地址是：https://www.yuewen.com?uid=1#aaa
如果当前URL地址是：https://www.yuewen.com?f=qidian ，则处理后的URL地址是：https://www.yuewen.com?f=qidian&uid=1
如果当前URL地址是：https://www.yuewen.com?uid=2 ，则处理后的URL地址是：https://www.yuewen.com?uid=1

使用URLSearchParam实现加分。

答案示意：
let params = new URLSearchParams(location.search)
params.set('userid', 1)
let hash = location.hash;
console.log(location.href.split('?')[0] + '?' + params.toString() + hash);