Flipclock

222 阅读1分钟

Flipclock🕓

一个类似FliqloScr的屏保页面;

image.png

点击任何位置都可全屏显示;

全屏即可使用,鼠标移动至左上角会滑出是否添加秒钟的滑块;

image.png

image.png

线上版链接 clock.xubh.top/

缩放、页面旋转

 transform: scale(1, 1);
 transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 /* Internet Explorer 9*/
 -moz-transform: rotate(90deg);
 /* Firefox */
 -webkit-transform: rotate(90deg);
  /* Safari 和 Chrome */
 -o-transform: rotate(90deg);
 /* Opera */

因为自己有手机上使用的需要所以做了一些尺寸的适配

image.png

点击页面任何位置都全屏显示

        document.body.addEventListener('click', function () {
            // alert('click')
            if (!document.fullscreenElement &&
                !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {  // current working methods
                if (document.documentElement.requestFullscreen) {
                    document.documentElement.requestFullscreen();
                } else if (document.documentElement.msRequestFullscreen) {
                    document.documentElement.msRequestFullscreen();
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.webkitRequestFullscreen) {
                    document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                }
            }
        })

代码已开源至 github.com/xubohuah/Fl…

参照使用了objectivehtml/FlipClock 开源的代码简化了部分操作;