每日前端签到(第六十九天)

2019-10-26  本文已影响0人  拿着号码牌徘徊
第六十九天(2018-10-13)

题目一:
没用过,看起来好有意思,可以让网页更有趣。
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 还能配置好多东西。

上一篇 下一篇

猜你喜欢

热点阅读