每日前端签到（第六十九天）

第六十九天（2018-10-13）

• [html] HTML5如何识别语音读出的内容和朗读指定的内容？
• [css] 用CSS画出一个任意角度的扇形，可以写多种实现的方法
• [js] 说说instanceof和typeof的实现原理并自己模拟实现一个instanceof
• [软技能] 你对web服务器软件有了解吗？都使用过哪些？各有哪些优缺点呢？

题目一：
没用过，看起来好有意思，可以让网页更有趣。
Web Speech API
Speech Synthesis API
题目二：### CSS代码

先画一个圆,外加两个绝对定位的半圆
扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现
这只能切出180°以内的扇形
超过180°的扇形,就把圆作为底色,两个遮罩作为扇形的组成部分

不知道描述的好不好理解,但确实能实现任意角度的扇形了

                .contain {
            position: relative;
            width: 200px;
            height: 200px;
        }
        .main {
            height: 100%;
            background: lightgreen;
            border-radius: 100px;
        }
        .common {
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
        }
        .mask1 {
            transform: rotate(83deg);
            border-radius: 100px 0 0 100px;
            left: 0;
            transform-origin: right center;
            background: red;
        }
        .mask2 {
            transform: rotate(-76deg);
            transform-origin: left center;
            left: 100px;
            border-radius: 0 100px 100px 0;
            background: blue;
        }

HTML代码

        <div class="contain">
        <div class="main"></div>
        <div class="mask1 common"></div>
        <div class="mask2 common"></div>
    </div>

我也附个链接,直接改变两个mask样式里的度数即可
https://codepen.io/lu-xiansen/pen/mZXQbO

题目三：

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 clsSymbol.hasInstance
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'
获取数据底层的类型标签。
题目四：
最主流的三个Web服务器是 Apache、 Nginx 、IIS 吧，
很显然都没用过，最多玩玩 phpstudy 和 xampp 这类傻瓜式可视化的软件。

所以暂时面对的需求，除了配端口指向不同文件夹外暂时还没啥别的尝试。

那么，直接在服务器上跑 npm 的 anywhere 或 http-server 好像也阔以。
如果没有服务器，那用 now-cli 直接随机放在云端，
或结合 git 用 netlify.com 也阔以直接部署静态网站。

当然，这么玩就只是 web 容器了，不算是 web 服务器，就像 nginx 还能配置好多东西。