html5画布funcition,2020前端基础知识学习第一节(示例代码)

一、选择题

1. 浏览器端的存储技术有哪些()

A.cookie  B.localStorage  C.session  D.userData

答案:A B D

分析:cookie通常用于存储用户等登录信息,能够存储的数据是有限的,而且在指定域名下所有的请求都会带上。

localStoage是H5新增用于本地存储,能够存储更多的数据,通常是5M

session服务器端与客户端建立的会话,不属于浏览器端存储技术

userData是IE专有的存储方案,可以用来存储一些数据

2. (function() { return typeof arguments; })(); 代码将会返回()

A.object  B.array  C.arguments  D.undefined

答案:A

分析:arguments 是类数组,正常情况下typeof []会返回"object",所以typeof arguments也会返回"object"

3. function fn() { return fn; } new fn() instanceof fn; 上面的代码会输出()

A.true  B.false

答案:false

分析:fn作为构造函数,如果内部没有显示的声明return语句,默认会返回一个fn的实例对象,也就是new fn() instanceof fn会返回true,

但是这里有return fn;这条语句,那么new fn()就会返回fn,所以结果为false

4. 下列哪个属性不会让div脱离文档流(normal flow)()

A.position: absolute  B.position: fixed  C.position: relative  D.float: float

答案:C

分析:position: relative相对于自己定位,不会脱离文档流

5. 正则表达式/^d**[^d]*[w]{6}$/,下面的字符串哪个能正确匹配?()

A.***abcABCD_89    B.abc*abcABCDEF

C.123*abcABCD_89    D.123*ABCabcd-89

答案:A,C

分析:

^           表示匹配字符必须以后面规则开始

d*          表示零个或者多个数字

*          表示只匹配字符*

[^d]*     表示匹配零个或者多个非数字字符

[w]      表示匹配字母数字下划线字符相当于[0-9a-zA-Z_]

{6}        表示要要进行匹配的字符数要大于等于6

答案A,* 属于初次匹配内容,其他的是剩下规则匹配

6.  (function() { var a = b = 5; })(); console.log(b); console.log(a); 代码输出结果:()

A.5, 5  B.undeinfed, undefined  C.5, undefined  D.程序抛错

答案:D

分析:程序执行完之后会先打印5,然后抛错,因为var a = b = 5;相当于b = 5; var a = 5;在非严格模式下,全局环境不声明直接

赋值相当于给window对象赋值,所以相当于window.b = 5; 然而a的作用域是匿名自执行函数内,所以在全局作用域下面是访问不到的

二、简单题

7. 下面的代码输出顺序?

console.log(‘one‘);

setTimeout(function() {

console.log(‘two‘);

}, 0);

new Promise(function(resolve, reject) {

console.log(‘three‘);

resolve();

}).then(function() {

console.log(‘four‘);

});

console.log(‘five‘);

答案:one three five four two

分析:程序从上往下执行首先打印出来one,new Promise会执行他的构造函数这时候打印three,

然后因为Promise属于异步microtask,这个时候会继续执行主线程代码打印出来five,这个时候会执行microtask队列,

打印出来four,接下来执行macrotask任务队列打印出来two

8. 下面的代码输出结果?

falseStr = "false";

if (true) {

var falseStr;

if (falseStr) {

console.log("false" == true);

console.log("false" == false);

}

}

答案:false false

分析:下面的规则用于判定==运算符比较的两个值是否相等:

1.如果两个值具有相同的类型,那么就检测它们的等同性。如果这两个值完全相同,它们就相等。如果它们不完全相同,则它们不相等。

2.如果两个值的类型不同,它们仍然可能相等。用下面的规则和类型转换来检测它们的相等性:

2.1 如果一个值是null,另一个值是undefined,它们相等。

2.2 如果一个值是数字,另一个值是字符串,把字符串转换为数字,再用转换后的值进行比较。

2.3 如果一个值是true,将它转换成1,再进行比较。如果一个值为false,把它转换成0,再进行比较。

2.4 如果一个值是对象,另一个值是数字或者字符串,将对象转换成原始类型的值,再进行比较。

2.5 其他的数值组合是不相等的。

9. 下面的代码输出结果?

var length = 10;

var obj = {

length: 5,

func: function() {

console.log(this.length);

}

};

var func = obj.func;

func();

obj.func();

答案:10,5

分析:函数的作用域是在被定义时候决定,跟执行环境没有关系,所以var func = obj.func;可以理解为在全局作用域定义了func

所以func函数内的this应该是全局,浏览器环境下是window,所以length为10。obj.func函数的执行上下文对象是obj,所以

length是5

10. PNG,GIF,JPG的区别及如何选?

GIF:

256色

无损,编辑 保存时候,不会损失。

支持简单动画

支持boolean透明,也就是要么完全透明,要么不透明

JPG:

millions of colors

有损压缩, 意味着每次编辑都会失去质量

不支持透明

适合照片,实际上很多相机使用的都是这个格式

PNG:

无损,其实PNG有好几种格式的,一般分为两类:PNG8和truecolor PNGs

与GIF相比:

它通常会产生较小的文件大小

它支持阿尔法(变量)透明度

无动画支持(可通过CSS3实现动画效果)

与JPEG相比:

文件更大

无损

因此可以作为JPEG图片中间编辑的中转格式

结论:

JPEG适合照片

GIF适合动画

PNG8适合其他任何种类——图表,buttons,背景,图表等等

11. 请用CSS实现屏幕正中间有个元素A,随着屏幕宽度的增加,始终满足以下条件:

1)A元素垂直居中于屏幕中央

2)A元素离屏幕左右边距各10px

3)A元素的高度始终是A元素宽度的50%

答案:这道题目有多种实现方案,方案如下,

1.1 CSS3 flex来实现,对父元素设置样式display: flex; align-items: center;

1.2 父元素设置postion: relative; A元素设置样式position: absolute; top: 50%; transform: translateY(-50%);

1.3 父元素设置postion: relative; A元素设置:postition: absolute; top: 0; bottom: 0; margin: auto 0;

2.1 A元素margin-left: 10px; margin-right: 10px;

3.1 这里借助于padding百分比来实现,padding百分比w3c解释是:规定基于父元素的宽度的百分比的内边距

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/346198.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

names文件和data文件_data.table让你的读取速度提升百倍

不知道大家有没有用read.table和read.csv读取过文件,当文件不大的时候你可能还感觉不出读取速度,但是当文件比较大的时候,比如有上万行的时候,你就会感觉到等待时间明显变长,甚至无法忍受。今天小编给大家安利一个实用…

差分放大电路差模共模公式_提高差分放大器的共模抑制比,电阻的选择很关键...

在各种应用领域,采用模拟技术时都需要使用差分放大器电路。例如测量技术,根据其应用的不同,可能需要极高的测量精度。为了达到这一精度,尽可能减少典型误差源(例如失调和增益误差,以及噪声、容差和漂移)至关重要。为此…

计算机网络的含义是什么意思,互联网的基本含义是什么

互联网大家都知道,但是互联网的基本含义都了解吗?学习啦小编为大家整理了相关内容,供大家参考阅读!互联网的基本含义互联网是由一些使用公用语言互相通信的计算机连接而成的网络,即广域网、局域网及单机按照一定的通讯协议组成的国际计算机网…

在单个try-with-resources语句中仔细指定多个资源

Java 7更有用的新功能之一是引入了try-with-resources语句 [AKA 自动资源管理 ( ARM )]。 try-with-resources语句的吸引力在于其承诺 “确保在语句末尾关闭每个资源”。 在这种情况下,“资源”是实现AutoCloseable及其close(&…

两轮差速机器人舵机转轴示意图_机器人教程2:舵机及转向控制原理

图3舵机外形图2、舵机的组成一般来讲,舵机主要由以下几个部分组成,舵盘、减速齿轮组、位置反馈电位计、直流电机、控制电路等,如图4、图5所示。图4舵机的组成示意图图5舵机组成舵机的输入线共有三条,如图6所示,红色中间…

label标签 html5,HTML5 label 标签

实例HTML5 标签用于为 input 元素做出标记。带有两个输入字段和相关标记的简单 HTML 表单:MaleFemale尝试一下 浏览器支持目前大多数浏览器支持 标签。标签定义及使用说明标签为 input 元素定义标注(标记)。label 元素不会向用户呈现任何特殊效果。不过,…

me shy是什么歌 抖音make_抖音星河滚烫你是人间的理想下一句是什么歌 星河歌词完整版...

最近在抖音上听到一段话,这段话的开头是“星河滚烫,你是人间的理想……”。抖音星河滚烫你是人间的理想下一句是什么歌?星河歌词介绍?星河,是非常好听的一首歌曲,是很多人都喜欢的一首歌曲。抖音星河滚烫你…

修改使用计算机的名称,Windows 10中修改计算机名称的方法,你知道几种?

当用户新入手一台电脑时,通常做的第一件事就是做一些个性化设置。一般来说个性化的第一步就是给计算机起一个自己满意的名字,下面介绍几种修改计算机名字的方法。通过设置更改计算机名字按WinI键进入设置,在设置窗口中找到“系统”,点击它。在…

apollo 参数传递_使用Apollo通过WebSocket通过STOMP轻松进行消息传递

apollo 参数传递在我以前的文章中,我介绍了几个有趣的用例,这些用例使用著名的消息代理HornetQ和ActiveMQ通过Websockects实现STOMP消息传递。 但是我没有介绍的是Apollo,因为我个人认为它的API是冗长的,并且不像Java开发人员那样…

mysql不能改编码_(转)MySQL设置和修改编码问题

mysql版本:5.7.18一、常用查看字符集设定命令1、查看数据库支持的所有字符集。show character set;(或 show char set;)2、查看当前状态命令(显示结果会包含数据库的字符集设置)status(或 /s)其中Db characterset对应的是数据库目录下的db.opt文件内容。(查到mysql安…

python 编程语言排行榜_2019年6月编程语言排行榜:Python 排名飙升,三年内有望超越Java...

TIOBE 6 月编程语言排行榜 更新已发布,排名前三的依然是:Java, C, Python。本月Python的TIOBE指数再次创下8.5%的历史新高。如果Python能够保持这样的速度,那它完全有可能在3到4年内取代C和Java,从而成为世界上***的编程语言。Pyt…

使用IntelliJ调试Java流

流功能非常强大,只需几行就可以捕获您预期功能的要点。 但是,就像它们在一切正常工作时一样平滑,就像它们在表现不正常时一样令人痛苦。 了解如何使用IntelliJ调试Java Streams并深入了解Stream的中间操作。 在本文中,我将在示例…

四川对口高职本科学校计算机,2018四川对口高职本科学校有哪些

相信很多想要报考四川单招对口高职的同学,都是非常的关心四川对口高职本科学校有哪些的,小编整理了相关信息,希望会对大家有所帮助!四川文化艺术学院(Sichuan University of Culture and Arts),简称“川文艺”,是经教育…

echart 饼图每一块间隙_花10分钟做酱香饼,简单方便又美味,酥脆咸香比买的还要好吃...

花10分钟做酱香饼,简单方便又美味,酥脆咸香比买的还要好吃前几年,在单位附近有一家只做酱香饼的小店,刚开张的时候排很长队,我为了一块酱香饼排队半小时。后来买酱香饼的人少了,我三天两头买一块酱香饼解馋…

html 边框轮廓,CSS半圈(边框,仅轮廓)

小编典典您可以使用border-top-left-radius和border-top-right- radius属性根据框的高度(和添加的边框)在框上四角。然后在框的顶部/右侧/左侧添加边框以达到效果。干得好:.half-circle {width: 200px;height: 100px; /* as the half of the width */background-col…

人类一败涂地做图教程_《人类一败涂地》形象绘画技巧图文指南

第2页:展开第四步进行对人物细节描边处理,使粗细不同的变得一致,还是拉近镜头,利用底色扣细致。最重要的一点来了!不管你画成什么样子,如果你在护理细节的过程中镜头过于拉进并且没有某一部位时模型会变成黑…

Spring Data Pivotal Gemfire教程

1. Spring Data Pivotal Gemfire –简介 在这篇文章中,我们将介绍有关Spring Data Pivotal Gemfire的全面教程。 Pivotal Gemfire是由Apache Geode支持的内存中数据网格解决方案。 使用Pivotal Gemfire构建的应用程序使您可以在分布式服务器节点之间轻松扩展系统。 …

计算机诞生发展分类特点及应用,计算机的诞生与发展,及其特点

计算机基本常识一、计算机的概念:计算机是一种能迅速而高效的自动完成信息处理的电子设备,它能按照程序对信息进行加工、处理、存储。二、计算机的诞生与发展1、诞生:1946年,美国为计算弹道轨迹而研制成功了世界第一台计算机。2、…

404 单页应用 报错 路由_通过 Laravel 创建一个 Vue 单页面应用(五)

文章转发自专业的Laravel开发者社区,原始链接:https://learnku.com/laravel/t/34858我们在第4部分完成了编辑用户的功能,并且学习了如何使用 v-model 来监听视图组件中用户信息的更改。现在我们可以开始构思删除用户功能,以及删除…

使用计算机求解雷达方程,关于雷达方程

满意答案zjit99402014.01.27采纳率:41% 等级:12已帮助:2803人带宽校正系数是Co而不是Do.我们知道雷达接收到回波信号后,必须进行信号处理,使中频接收机的输出端(检波器的输入端)输出的信号和噪声功率比(简称信噪比)…