2021届阅文设计前端方向笔试卷
时长:120分钟 总分:100分
172浏览 0人已完成答题
题型介绍
| 题型 | 简答题 |
|---|---|
| 数量 | 15 |
1.
1.请生成一个16位的随机数字；2.已知一个非空字符串变量str，请基于s...
1. 请生成一个16位的随机数字；
2. 已知一个非空字符串变量 str，请基于 str 生成一个16位的随机数字，也就是不同的 str 值随机数字不同，但是相同的 str 值生成的随机数是一样的。
2.
有如下字符串：varstr='CanvasRenderingContext...
有如下字符串：
var str = 'CanvasRenderingContext2D'
1. 字符串去重，返回新的不重复字符串，假设变量名是str2。
2. 字符串反向排列，返回str2的反向排列字符串，假设变量名是str3。
var str = 'CanvasRenderingContext2D'
1. 字符串去重，返回新的不重复字符串，假设变量名是str2。
2. 字符串反向排列，返回str2的反向排列字符串，假设变量名是str3。
3. 返回str3字符串中大写字母的个数。
3.
所有题目公用一个上下文，已知数组：letarr=[1,2,,3]1.ar...
所有题目公用一个上下文，已知数组：
let arr = [1,2,,3]
1. arr的长度是多少？
2. 去除arr中的空数组项
3. arr2 = arr.map(parseInt)，请写下arr2的内容
4. arr和arr2合并成数组arr3。
let arr = [1,2,,3]
1. arr的长度是多少？
3. arr2 = arr.map(parseInt)，请写下arr2的内容
5. 去除数组arr3中重复内容
4.
用户使用<inputtype="file">上传了一个文件，假...
用户使用 <input type="file"> 上传了一个文件，假设这个文件对象是 file，代码如下所示。
input.addEventListener('change', function () {
let file = event.target.files[0]
})
请问：
1. 如何返回这个文件的尺寸大小？
2. 假设文件支持大小变量是filesize，filesize这个数值的表示文件大小的字节书，例如2837475字节，哎呀，眼睛又疼了，根本看不出来究竟文件多大，请把字节为单位的尺寸全部使用K, M, G单位表示，规则如下，无论文件多小，都使用K表示，超过1M使用M单位表示，超过1G使用G单位表示，再大的尺寸本题不考虑。
// filesize就是字节单位的文件尺寸
// 请继续处理...
5.
关于字符串处理：1.写一个名为toCamelCase的方法，实现把类似'a...
关于字符串处理：
1. 写一个名为toCamelCase的方法，实现把类似'abc-def-ghi'的字符转换成'abcDefGhi'。
2. 写一个名为toDashJoin的方法，实现把驼峰形式字符串'abcDefGhi'转换成'abc-def-ghi'。
3. 写一个名为toCapitalize的方法，实现首字母大写功能（原来字母就是大写的不处理），如'i like css'转换成'I Like Css'。
1. 写一个名为toCamelCase的方法，实现把类似'abc-def-ghi'的字符转换成'abcDefGhi'。
2. 写一个名为toDashJoin的方法，实现把驼峰形式字符串'abcDefGhi'转换成'abc-def-ghi'。
3. 写一个名为toCapitalize的方法，实现首字母大写功能（原来字母就是大写的不处理），如'i like css'转换成'I Like Css'。
4. 写一个名为toBetterUrl的方法，实现把类似'CSS value type'转换成'css-value-type'（只需考虑空格和大小写处理）。
6.
请使用纯CSS实现下图所示的布局效果（手写HTML代码和CSS代码），不考...
请使用纯CSS实现下图所示的布局效果（手写HTML代码和CSS代码），不考虑兼容性：
绿色色值是：#00BC9B，灰色色值是：#BCBCBC
注意HTML的语义化、内容的扩展性以及尺寸的自适应性。
7.
请手写一个SVG效果，SVG大小是300*150，然后：1.已SVG元素的...
请手写一个SVG效果，SVG大小是300*150，然后：
1. 已SVG元素的中心为圆心绘制出一个圆形，圆形的半径是60px，填充色是deepskyblue
2. 在圆形的中心位置绘制文字“阅文集团”，字号大小是14px，文字颜色是白色；
请写出满足上述要求的SVG代码。
8.
Canvas基础测试，请实现：1.在页面中创建一个300*150大小的Ca...
Canvas基础测试，请实现：
1. 在页面中创建一个300*150大小的Canvas画布；
2. 以画布中心点为圆心绘制一个圆，圆的半径大小是60，圆的填充色是deepskyblue
3. 在上述圆的中心绘制文字“阅文集团”，字号大小是14px，字体任意，文字颜色是白色。
9.
在一个Web页面中有很多的链接和图片，例如：<ahref="../s...
在一个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">
……等。
例如，假设此时的页面地址是 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</a>替换成<a href="https://www.yuewen.com//home/aside/search.html">链接2</a>
10.
本题关于URL地址的处理。需求如下：请实现给当前页面的URL地址增加或替换...
本题关于URL地址的处理。
需求如下：
请实现给当前页面的URL地址增加或替换 uid=1 的查询内容。
需求如下：
请实现给当前页面的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
11.
已知用户输入手机号的时候可能是通过粘贴输入，此时就会带上不需要的信息，例如...
已知用户输入手机号的时候可能是通过粘贴输入，此时就会带上不需要的信息，例如：
let tel ='132 0803 3621'
或者是短横线：
let tel ='132-0803-3621'
或者是短横线：
let tel ='132-0803-3621'
或是其他的连接字符。
然后空格或短横线的位置也不固定，例如可能是下面这样：
let tel ='132 080 33621'
请实现，无论变量tel使用什么字符分隔，无论分隔位置在哪里，都过滤成连续的11位数字，类似'13208033621'。
12.
已知一段表示用户信息的数组数据，结构如下所示：letdata=[{user...
已知一段表示用户信息的数组数据，结构如下所示：
let data = [{
userId: '001',
userName: '张三(zhangsan)'
}, {
userId: '002',
userName: '李四(lisi)'
}, {
userId: '003',
userName: '王二(wanger)'
}, {
userId: '004',
userName: '麻子(mazi)'
}]
请实现数组按照数组项中userName中的姓名拼音排序。
13.
已知有一串用户数据是这样的：letdata=[{id:'1',userna...
已知有一串用户数据是这样的：
let data = [{
id: '1',
username: '张三'
}, {
id: '2',
username: '李四'
}, {
id: '3',
username: '王二'
},
...]
请实现，如果数组中有id值是'233'的数据项，则将此数组项在数组中置顶（数组第1位），如果没有匹配的数组项，则数组顺序不变。
14.
请实现纯CSS实现如下图所示的弹性布局效果，也就是随着设备的宽度不断变化，...
请实现纯CSS实现如下图所示的弹性布局效果，也就是随着设备的宽度不断变化，布局需要符合下图所示的效果，无需考虑兼容性问题，无需关注样式细节，主要考验大家的布局功力。
再使用文字描述下布局：
手写HTML结构和CSS代码，注意是一套HTML和CSS完成上述的各种宽度下的弹性布局效果，不用考虑浏览器的兼容性、
描述：
整个网站是最大宽度980px的布局效果，因此，在页面的尺寸足够的时候，导航和搜索在一个980px的范围内两端对齐，整体居中显示。然后用户信息页面右对齐（见上图①和②）。
但是，不同用户的浏览器宽度是不一样的，如果用户宽度不是很宽，例如是1200px，笔记本常见的宽度，那么上面这种布局就会有问题，右侧的用户信息就会和搜索框重叠，布局就会出问题。
所以希望，当用户信息和搜索框靠的足够近的时候，整体的980px宽度自动减小，同时左侧至少保留190px的距离（见上图③和④）。
提示：
本题布局有一定难度，但是实际上代码量很少，需要大家对CSS弹性布局有比较深入的了解。
15.
已知HTML如下：<style>a{display:block...
已知HTML如下：
<style>
a { display: block }
h1 { background: url(logo.png) }
</style>
<header>
<a href="./" class="logo">
<h1>hr门户系统</h1>
</a>
<nav>
<a href accesskey="1">导航1</a>
<a href class="active" accesskey="2">导航2</a>
<a href accesskey="3">导航3</a>
</nav>
</header>
1. 请使用JS代码获得<h1>标签里面的文字内容
2. 请使用JS代码获得类名为.active元素的accesskey属性值
3. 请使用JS代码获得<header>元素的高度（包括border大小）
4. 请使用JS代码获得<h1>元素的背景图片
5. 请使用JS判断<header>元素是否在浏览器窗口内
6. 请使用JS在<nav>元素后面插入<a href accesskey="4">导航4</a>结构
7. 请使用JS删除.logo类名对应的DOM元素
8. 请使用JS实现点击页面上任意链接都不刷新
