每日思考(2020/07/13)
Posted ericzlin
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了每日思考(2020/07/13)相关的知识,希望对你有一定的参考价值。
题目概览
- html5如何识别语音读出的内容和朗读指定的内容
- 用CSS画出一个任意角度的扇形,可以写多种实现的方法
- 说说instanceof和typeof的实现原理并自己模拟实现一个instanceof
题目解答
HTML5如何识别语音读出的内容和朗读指定的内容
- 语音识别通过
SpeechRecognition
接口进行访问,它提供了识别从音频输入(通常是设备默认的语音识别服务)中识别语音情景的能力。一般来说,你将使用该接口的构造函数来构造一个新的SpeechRecognition
对象,该对象包含了一些列有效的对象处理函数来检测识别设备麦克风中的语音输入。SpeechGrammar
接口则表示了你应用中想要识别的特定文法。文法则通过 JSpeech Grammar Format (JSGF.) 来定义。 - 语音合成通过
SpeechSynthesis
接口进行访问,它提供了文字到语音(TTS)的能力,这使得程序能够读出它们的文字内容(通常使用设备默认的语音合成器)。不同的声音类类型通过SpeechSynthesisVoice
对象进行表示,不同部分的文字则由SpeechSynthesisUtterance
对象来表示。你可以将它们传递给SpeechSynthesis.speak()
方法来产生语音
用CSS画出一个任意角度的扇形,可以写多种实现的方法
<div class="sector"></div>
<div class="sector" style="border-radius: 0;"></div>
.sector {
display: inline-block;
margin: 20px;
background: red;
width: 100px;
height: 100px;
border-radius: 100%;
animation: sector 4s linear both infinite;
transform: rotate(45deg);
}
@keyframes sector{
from {
clip-path: polygon(50% 50%, 0% 0%, 0% 0%);
}
25% {
clip-path: polygon(50% 50%, 0% 0%, 100% 0%);
}
25.000001% {
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 0%);
}
50%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%);
}
50.000001%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 100% 100%);
}
75%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
75.000001%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
}
to{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
}
}
说说instanceof和typeof的实现原理并自己模拟实现一个instanceof
-
instanceof
-
返回
boolean
-
通过调用 class 的
[Symbol.hasInstance]
static method 来判断一个 object 是否是一个 class 的 instance -
缺省行为:判断 object 的 prototype chain 中是否有任意一个 prototype 与 class 的 prototype 相等
-
polyfill:
interface IConstructor<T> { new(...args: any[]): T } function isObject(o: any) { return (typeof o === ‘object‘ || typeof o === ‘function‘) && o !== null } function instanceOf<T>(obj: any, cls: IConstructor<T>): obj is T { if (isObject(cls)) { if (typeof cls[Symbol.hasInstance] === ‘function‘) return cls[Symbol.hasInstance](obj) else if (typeof cls === ‘function‘) { if (isObject(cls.prototype)) return cls.prototype.isPrototypeOf(obj) else return false } else throw new TypeError(‘cls is not callable‘) } else throw new TypeError(‘cls is not an object‘) }
-
-
typeof
- 返回
‘string‘, ‘number‘, ‘undefined‘, ‘boolean‘, ‘object‘, ‘function‘, ‘symbol‘
- 获取数据底层的类型标签。
- 返回
以上是关于每日思考(2020/07/13)的主要内容,如果未能解决你的问题,请参考以下文章