V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
renzhn
V2EX  ›  分享创造

纯 JS+CSS 实现 Windows 安装界面“请坐和放宽”

  •  5
     
  •   renzhn · 2016-03-31 12:23:24 +08:00 · 8780 次点击
    这是一个创建于 3152 天前的主题,其中的信息可能已经有所发展或是发生改变。
    第 1 条附言  ·  2016-03-31 15:09:51 +08:00
    2.0: 加入了一个 CSS 实现的 Metro Loading Icon
    79 条回复    2017-07-14 11:17:20 +08:00
    VmuTargh
        1
    VmuTargh  
       2016-03-31 12:27:29 +08:00
    暴力膜蛤不可取, 无形膜蛤最续命!
    czmecho
        2
    czmecho  
       2016-03-31 12:30:03 +08:00 via Android
    原来是膜法师的教徒。
    Phariel
        3
    Phariel  
       2016-03-31 12:32:40 +08:00
    为了 url +1s
    jkjoke
        4
    jkjoke  
       2016-03-31 12:33:51 +08:00
    兹慈
    ck65
        5
    ck65  
       2016-03-31 12:43:32 +08:00 via iPhone
    这个命续得我给九分!
    fy
        6
    fy  
       2016-03-31 12:55:22 +08:00
    膜的飞起,+1s
    ericls
        7
    ericls  
       2016-03-31 13:04:02 +08:00
    OP 搞的这个东西啊 excited !
    xlvecle
        8
    xlvecle  
       2016-03-31 13:40:07 +08:00
    天若有情天亦老, 你这一弄又一秒
    Twinkle
        9
    Twinkle  
       2016-03-31 13:45:40 +08:00
    +1s
    BOYPT
        10
    BOYPT  
       2016-03-31 13:46:17 +08:00
    蛤蛤蛤 excited
    不过字体不像,可以引入 webfont 改改
    eastpiger
        11
    eastpiger  
       2016-03-31 13:47:45 +08:00
    打开之后先右键源代码、然后默默滚回去认真复习了一遍
    zhujinliang
        12
    zhujinliang  
       2016-03-31 13:56:50 +08:00
    看的我两腿不由自主地跑了起来
    v1024
        13
    v1024  
       2016-03-31 14:21:14 +08:00
    楼主 js 写的不错。
    pec
        14
    pec  
       2016-03-31 14:25:37 +08:00
    有花屏闪屏 bug
    hjc4869
        15
    hjc4869  
       2016-03-31 14:33:24 +08:00
    其实那个第一次登录的颜色渐变 UI 本来就是 HTML+js 写的(
    lution
        16
    lution  
       2016-03-31 14:57:03 +08:00
    @pec 我还以为是故意的
    renzhn
        17
    renzhn  
    OP
       2016-03-31 15:00:23 +08:00
    @BOYPT 中文 Webfont...?
    @pec patch welcome
    @hjc4869 消息来源?
    viator42
        18
    viator42  
       2016-03-31 15:05:25 +08:00
    现在的年轻人,说着说着就膜起来了
    irainsoft
        19
    irainsoft  
       2016-03-31 15:11:01 +08:00
    暴力膜蛤不可取
    iloveayu
        20
    iloveayu  
       2016-03-31 15:21:22 +08:00
    这都可以膜,也是醉了。。。
    hjc4869
        21
    hjc4869  
       2016-03-31 15:22:25 +08:00
    @renzhn C:\Windows\System32\oobe\FirstLoginAnim.html
    当然这个用浏览器是跑不动的……
    renzhn
        22
    renzhn  
    OP
       2016-03-31 15:24:42 +08:00
    @hjc4869 长姿势
    renzhn
        23
    renzhn  
    OP
       2016-03-31 15:25:49 +08:00
    @pec 你不会是硬件带不动导致的闪屏吧...我这边是由于切到别的页面过后脚本仍然会在跑导致的,我还不知道怎么解决
    Exin
        24
    Exin  
       2016-03-31 15:36:09 +08:00
    +1s

    有个 bug : Chrome 切换到别的标签页 1 分钟左右再切回去,页面底色就会闪烁
    sciooga
        25
    sciooga  
       2016-03-31 15:44:55 +08:00
    低级膜法师说闷声发大财,高级膜法师都知道原句是闷声大发财。
    lyragosa
        26
    lyragosa  
       2016-03-31 15:50:32 +08:00
    建议在进入之前弹出一个免责声明。
    不然可能会出人命的。

    “本应用运行中可能出现剧烈的色彩 /光线变化,请调亮屋内灯光,并与显示器保持一定距离,如有不适,请立刻关闭页面并咨询你当地的医疗机构。”
    onionnews
        27
    onionnews  
       2016-03-31 15:57:38 +08:00
    我也有点闪烁
    winterbells
        28
    winterbells  
       2016-03-31 16:00:48 +08:00
    这是你发的?
    winterbells
        29
    winterbells  
       2016-03-31 16:02:21 +08:00
    如果不是的话那就是被盗用了
    renzhn
        30
    renzhn  
    OP
       2016-03-31 16:04:26 +08:00
    @winterbells 这个人在源码里还好留了标记: view-source:http://www.bilifuli.com/451.html 第四行
    我要不要在源码里加个 LICENSE ,加了好像也没什么卵用...
    winterbells
        31
    winterbells  
       2016-03-31 16:09:20 +08:00
    @renzhn 需要删帖吗?我觉得他还有推广的嫌疑
    renzhn
        32
    renzhn  
    OP
       2016-03-31 16:10:08 +08:00
    @winterbells 资辞,他明明可以引用原 URL 呀
    jk2K
        33
    jk2K  
       2016-03-31 16:11:04 +08:00
    怎么会闪烁
    winterbells
        34
    winterbells  
       2016-03-31 16:13:41 +08:00
    @renzhn
    done !
    你这网页好像有 bug ,从别的标签页切过来的时候会一直闪
    renzhn
        35
    renzhn  
    OP
       2016-03-31 16:16:42 +08:00
    @winterbells 这个 bug 是由于切到别的页面过后脚本仍然会在跑导致的,我还不知道怎么解决
    SvenWong
        36
    SvenWong  
       2016-03-31 16:18:43 +08:00
    干嘛要学一个老者说话
    ipeony
        37
    ipeony  
       2016-03-31 16:23:36 +08:00
    那个闪的效果是故意的还是我的问题。。。
    oott123
        38
    oott123  
       2016-03-31 16:24:50 +08:00
    关于脚本运行的问题,我没有看楼主的脚本,不过我猜可能是浏览器在后台的时候会把 setTimeout / setInterval 的间隔降低到 1000ms 一次导致的问题…
    tees
        39
    tees  
       2016-03-31 16:32:04 +08:00
    切换之后的确会狂闪一下。
    renzhn
        40
    renzhn  
    OP
       2016-03-31 16:48:00 +08:00
    @Exin
    @winterbells
    @ipeony
    @tees
    谢谢反馈, bug 已修,并且改善了 iOS Safari 的兼容性
    mailunion
        41
    mailunion  
       2016-03-31 16:48:16 +08:00
    闷声大发财
    RqPS6rhmP3Nyn3Tm
        42
    RqPS6rhmP3Nyn3Tm  
       2016-03-31 17:11:48 +08:00 via Android
    中文 webfont 可以试试百度前端团队出的 fontmin ,静态静态界面很好用。字体我记得是等线吧,就这几个字子集肯定不会超出 40 kb 。
    Fedor
        43
    Fedor  
       2016-03-31 17:16:46 +08:00   ❤️ 1
    吓得我关了 Chrome
    jas0ndyq
        44
    jas0ndyq  
       2016-03-31 17:23:53 +08:00
    猝不及防
    wjself
        45
    wjself  
       2016-03-31 17:26:48 +08:00
    噗…樓主,我可以用的東西麼?
    renzhn
        46
    renzhn  
    OP
       2016-03-31 17:30:01 +08:00
    @wjself 可以直接引用 URL ,你要干嘛呀?
    wjself
        47
    wjself  
       2016-03-31 17:32:01 +08:00
    @renzhn 我可以抄袭么?(直接拿到自己的站点什么的…
    renzhn
        48
    renzhn  
    OP
       2016-03-31 17:33:37 +08:00
    @wjself I'M ANGRY !你这样子是不行的!
    wjself
        49
    wjself  
       2016-03-31 17:40:36 +08:00
    @renzhn 嗯,好吧…对不住咯…
    nayuxuohz
        50
    nayuxuohz  
       2016-03-31 17:56:41 +08:00
    丧心病狂点 背景色动画和文字动画都可以 css 做啦
    jinwyp
        51
    jinwyp  
       2016-03-31 18:17:33 +08:00
    那个 css loading 的动画怎么做的?
    renzhn
        52
    renzhn  
    OP
       2016-03-31 18:28:30 +08:00
    @jinwyp 无可奉告
    Garantion
        53
    Garantion  
       2016-03-31 19:12:56 +08:00
    Abrupt MO is not recommended!
    guoyida
        54
    guoyida  
       2016-03-31 22:17:04 +08:00
    字体太丑了啊
    wjself
        55
    wjself  
       2016-03-31 22:33:05 +08:00
    @jinwyp 那個的話是用貝塞爾曲線做的 css3animate ,技術上並不難
    wm5d8b
        56
    wm5d8b  
       2016-03-31 23:05:43 +08:00
    interesting !
    好想 fork 一下
    wsph123
        57
    wsph123  
       2016-03-31 23:22:15 +08:00
    坐到一半就摸上了!
    wbsdty331
        58
    wbsdty331  
       2016-03-31 23:26:49 +08:00 via Android
    猝不及防
    hggg
        59
    hggg  
       2016-04-01 01:40:40 +08:00
    显示的内容好,你们啊总想搞个大新闻~好评!
    philobscur
        60
    philobscur  
       2016-04-01 02:50:41 +08:00
    右键之后 chrome 挂了...
    ChiangDi
        61
    ChiangDi  
       2016-04-01 08:29:20 +08:00 via Android
    I'm angry
    murmur
        62
    murmur  
       2016-04-01 08:40:07 +08:00
    纯 css 实现是坠吼的
    aitaii
        63
    aitaii  
       2016-04-01 09:18:23 +08:00
    一言不合就+1s
    emlcj
        64
    emlcj  
       2016-04-01 09:30:32 +08:00
    you can use css animation instead of js to change background
    cayley
        65
    cayley  
       2016-04-01 09:43:12 +08:00
    好屌哦
    sakeven
        66
    sakeven  
       2016-04-01 10:04:12 +08:00
    膜蛤
    yhyy135
        67
    yhyy135  
       2016-04-01 10:31:48 +08:00
    成功续 1s
    haogefeifei
        68
    haogefeifei  
       2016-04-01 11:00:39 +08:00
    怒看源码。。结果 +1s
    Shangxin
        69
    Shangxin  
       2016-04-01 11:28:16 +08:00
    当然资瓷啦
    ebony0319
        70
    ebony0319  
       2016-04-01 11:35:58 +08:00
    那些话怎么吊。
    lackar
        71
    lackar  
       2016-05-28 19:32:36 +08:00
    怎样做成屏保呢? Mac 上
    lackar
        72
    lackar  
       2016-05-28 19:51:39 +08:00
    可以不自动跳转微博吗?就可以当屏保了,如果还能自定义文字就更好了
    renzhn
        73
    renzhn  
    OP
       2016-05-29 07:20:43 +08:00
    @lackar 把网页存下来稍作修改即可,把"window.location = http://" 改为 wordIndex == 0 可实现不跳转
    lackar
        74
    lackar  
       2016-05-29 10:10:05 +08:00
    @renzhn 搞定!哈哈,不亦乐乎
    lackar
        75
    lackar  
       2016-05-29 10:39:32 +08:00
    @renzhn 是不跳转了,但怎么能回到第一个循环播放呢?
    renzhn
        76
    renzhn  
    OP
       2016-05-29 12:02:56 +08:00
    165 行:
    switchWord = function () {
    if (wordIndex >= words.length) {
    wordIndex = 0;
    }
    setWord();
    setTimeout(function () {
    wordIndex++;
    switchWord();
    }, wordDuration);
    };
    chshch
        77
    chshch  
       2016-09-24 18:50:41 +08:00
    为了表示支持,我花了 59 秒钟看了这个网页..... 口.口
    qgb
        78
    qgb  
       2017-05-23 02:30:43 +08:00
    @wsph123 吴思澎
    wsph123
        79
    wsph123  
       2017-07-14 11:17:20 +08:00
    @qgb 咦?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2843 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 52ms · UTC 09:36 · PVG 17:36 · LAX 01:36 · JFK 04:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.