纯 JS+CSS 实现 Windows 安装界面“请坐和放宽” - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
renzhn
V2EX    分享创造

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

  •  5
     
  •   renzhn 2016-03-31 12:23:24 +08:00 9375 次点击
    这是一个创建于 3507 天前的主题,其中的信息可能已经有所发展或是发生改变。
    第 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
    兹慈
    mogita
        5
    mogita  
       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
    我也有点闪烁
    300
        28
    300  
       2016-03-31 16:00:48 +08:00
    这是你发的?
    300
        29
    300  
       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 ,加了好像也没什么卵用...
    300
        31
    300  
       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
    怎么会闪烁
    300
        34
    300  
       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     Solana     4339 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 26ms UTC 05:34 PVG 13:34 LAX 21:34 JFK 00:34
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86