注册 |登录

飞的天空，自由景行 - T.J. Shi分享 http://blog.sciencenet.cn/u/tjshi Fly in the flying sky, freely climb in the mountain high——T.J. Shi

博文

2016微信公开课PRO版

已有 2311 次阅读 2016-1-10 21:16 |系统分类:生活其它

2016微信公开课PRO版

T.J. Shi

我的好友好少啊，只有229个，96个女性朋友！！！其他的去代码里看吧！



<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<meta name="format-detection" content="telephone=no">

<meta name="format-detection" content="email=no">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="author" content="Tencent-CDC">

<meta name="copyright" content="Tencent">

<title>2016 微信公开课 PRO 版</title>

<link rel="stylesheet" href="https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/css/common.ed44.css">

<script>

    var evt = "onorientationchange" in window ? "orientationchange" : "resize";

    function resize() {

        var html = document.documentElement,

        fontSize = 100,//100为根元素字体大小

        pageW = 375,//设计稿页面宽度

        pageH = 604,//设计稿页面高度

        //根据具体情况修改宽高值，可以用页面主体内容的宽高值

        wk = 375;//页面大小缩放的上限阀值，当页面大小超过此值时将不再放大页面

        hk = 604;//页面大小缩放的上限阀值，当页面大小超过此值时将不再放大页面

        if (html.clientWidth / html.clientHeight > pageW / pageH) {

            if (html.clientHeight <= hk) {

                html.style.fontSize = html.clientHeight / pageH * fontSize + "px";

            } else {

                html.style.fontSize = hk / pageH * fontSize + "px";

            }

        } else {

            if (html.clientWidth <= wk) {

                html.style.fontSize = html.clientWidth / pageW * fontSize + "px";

            } else {

                html.style.fontSize = wk / pageW * fontSize + "px";

            }

        }

    }

    resize();

</script>

</head>

<body>



<div id="wrapper" class="wrapper"></div>



<div id="landscape_hinter">

<div class="hinter_phone"></div>

<div class="hinter_rotate"></div>

<div class="hinter_text">竖屏体验效果更佳</div>

</div>



<div class="point">

<div class="dot">1</div>

<div class="after_wrap"><div class="after">1</div></div>

<div class="touch_tip"></div>

<div class="touch_effect">1</div>

</div>



<div id="preloader" class="preloader">

<h1 class="logo">2016微信公开课 PRO 版</h1>

<h2 class="story">我和微信的故事</h2>

<div class="percent">0%</div>

</div>



<a href="javascript:;" id="bgMusicContr" class="music">

<audio id="bgMusic" src="https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/media/music.1dfb.mp3" looppreload="auto"></audio>



<script id="tmpl" type="text/tmpl">

<!-- page1 START -->

<div class="page page1">

    <div class="circle">

        <div class="line line1"><div class="lr"><i></i></div></div>

        <div class="line line2"><i></i></div>

        <div class="line line3"><div class="lr"><i></i></div></div>

        <div class="line line4"><i></i></div>

        <div class="line line5"><i></i></div>

        <div class="line line6"><i></i></div>

        <div class="line line7"><div class="lr"><i></i></div></div>

        <div class="line line8"><i></i></div>

        <div class="line line9"><i></i></div>

        <div class="line line10"><i></i></div>

        <div class="line line11"><div class="lr"><i></i></div></div>

        <div class="line line12"><div class="lr"><i></i></div></div>

        <div class="line line13"><i></i></div>

        <div class="line line14"><i></i></div>

        <div class="line line15"><div class="lr"><i></i></div></div>

    </div>

    <h2 class="page_title"><span class="year">2015年过去了，我很怀念它。</h2>

</div>

<!-- page1 END -->

<!-- page2 START -->

<div class="page page2">

    <h2 class="page_title">那一天，我与微信相识</h2>



    <div class="ray ray1"><i></i></div>

    <div class="ray ray2"><i></i></div>

    <div class="ray ray3"><i></i></div>



    <div class="ol ol1"><div class="lr"><i></i></div></div>

    <div class="ol ol2"><div class="lr"><i></i></div></div>



    <div class="dot dot1">

        <div class="inner">1</div>

        <div class="line line1"><i></i></div>

        <div class="line line2"><div class="lr"><i></i></div></div>

        <div class="line line3"><i></i></div>

        <div class="line line4"><i></i></div>

    </div>

    <div class="dot dot2">

        <div class="inner">1</div>

        <div class="line line1"><i></i></div>

        <div class="line line2"><div class="lr"><i></i></div></div>

        <div class="line line3"><i></i></div>

        <div class="line line4"><i></i></div>

        <div class="line line5"><div class="lr"><i></i></div></div>

        <div class="line line6"><i></i></div>

    </div>

    <div class="dot dot3">

        <div class="inner">1</div>

        <div class="line line1"><i></i></div>

        <div class="line line2"><div class="lr"><i></i></div></div>

        <div class="line line3"><i></i></div>

        <div class="line line4"><div class="lr"><i></i></div></div>

    </div>



    <div class="section section1">

        <p class="data">{{=it.FstUseWXTime}}

        

我来到了微信星球


        

我是第


        <p class="data">{{=it.WXRankNum}}

        

个微信用户


    </div>



    <div class="section section2 {{?!it.FstSnsTime}}section_empty{{?}}">

        {{? it.FstSnsTime}}

        <p class="data">{{=it.FstSnsTime}}

        

我发送了第一条朋友圈


        

向世界问好


        {{??}}

        

亲爱的


        

微信是一种生活方式


        

发一条朋友圈


        

向世界问好吧


        {{?}}

    </div>



    <div class="section section3">

        {{? it.FstFriendNickName}}

        <div class="avatar"><img src="{{=it.FstFriendImg}}" alt="avatar">

        </div>

        <p class="data">{{=it.FstFriendNickName}}

        

是我的第一个朋友


        

PS: 你们现在还在联系吗


        {{??}}

        

打开微信


        

寻找你的


        

第一个好友吧


        {{?}}

    </div>

</div>

<!-- page2 END -->

<!-- page3 START -->

<div class="page page3">

    <h2 class="page_title">这一年，微信上的我</h2>



    <div class="triangle triangle1"><i>1</i></div>

    <div class="triangle triangle2"><i>1</i></div>

    <div class="triangle triangle3"><i>1</i></div>

    <div class="triangle triangle4"><i>1</i></div>



    <div class="ray ray1"><i></i></div>

    <div class="ray ray2"><i></i></div>

    <div class="ray ray3"><i></i></div>



    <div class="dot dot1">

        <div class="inner">1</div>

        <div class="line line1"><i></i></div>

        <div class="line line2"><div class="lr"><i></i></div></div>

    </div>

    <div class="dot dot2">

        <div class="inner">1</div>

        <div class="line line1"><i></i></div>

        <div class="line line2"><div class="lr"><i></i></div></div>

    </div>

    <div class="dot dot3">

        <div class="inner">1</div>

        <div class="line line1"><i></i></div>

        <div class="line line2"><div class="lr"><i></i></div></div>

        <div class="line line3"><i></i></div>

    </div>



    <div class="section section1 {{?it.SnsNum == 0}}section_empty{{?}}">

        <h3>朋友圈</h3>

        {{? it.SnsNum == 0}}

        

亲爱的


        

微信是一种生活方式


        

发一条朋友圈


        

向世界问好吧


        {{??}}

        

这一年


        

我一共发了


        

<span class="data">{{=it.SnsNum}}条朋友圈


        {{?}}

    </div>



    <div class="section section2">

        <h3>微信红包</h3>

        {{? it.RecRedEnvelope == 0 && it.SendRedEnvelope == 0 }}

        

亲爱的


        

有微信红包


        

才叫过年


        {{??}}

        

这一年


        

我共收到


        

<span class="data">{{=it.RecRedEnvelope}}个红包


        

发出


        

<span class="data">{{=it.SendRedEnvelope}}个红包


        {{?}}

    </div>



    <div class="section section3">

        <h3>地理位置</h3>

        {{? it.isLocateEmpty }}

        

世界那么大


        

该出来看看了


        {{??}}

            

这一年


            {{? it.isLocate }}

            

我的足迹遍布


            

<span class="data">{{=it.LocateNum}}个城市


            

你还记得发生在


            

<span class="data city">{{=it.locateCity}}的故事吗


            {{??}}

            

<span class="data city">{{=it.locateCity}}留下了我的足迹


            {{?}}

        {{?}}

    </div>

</div>

<!-- page3 END -->

<!-- page4 START -->

<div class="page page4">

    <h2 class="page_title">这一年，微信上的我们</h2>



    <div class="rect rect1"><i></i></div>

    <div class="rect rect2"><i></i></div>

    <div class="rect rect3"><i></i></div>



    <div class="circle circle1"><i></i></div>

    <div class="circle circle2"><i></i></div>



    <div class="ray ray1"><i></i></div>

    <div class="ray ray2"><i></i></div>

    <div class="ray ray3"><i></i></div>

    <div class="ray ray4"><i></i></div>

    <div class="ray ray5"><i></i></div>

    <div class="ray ray6"><i></i></div>

    <div class="ray ray7"><i></i></div>

    <div class="ray ray8"><i></i></div>

    <div class="ray ray9"><i></i></div>

    <div class="ray ray10"><i></i></div>



    <div class="dot dot1">

        <div class="inner">1</div>

        <div class="line line1"><div class="lr"><i></i></div></div>

        <div class="line line2"><i></i></div>

    </div>

    <div class="dot dot2">

        <div class="inner">1</div>

        <div class="line line1"><i></i></div>

        <div class="line line2"><div class="lr"><i></i></div></div>

    </div>

    <div class="dot dot3">

        <div class="inner">1</div>

        <div class="line line1"><i></i></div>

        <div class="line line2"><div class="lr"><i></i></div></div>

        <div class="line line3"><i></i></div>

    </div>



    <div class="section section1">

        {{? it.AllFriendNum == 0}}

        

快打开微信


        

添加好友吧


        {{??}}

        

我新认识了


        

<span class="data">{{=it.AddFriendNum}}个好友


        

好友人数已经达到


        

<span class="data">{{=it.AllFriendNum}}个


        {{?}}

    </div>



    <div class="section section2">

        {{? it.RecLike == 0}}

        

亲爱的


        

快和你的朋友“赞”起来


        {{??}}

        

我收获了朋友们的


        

<span class="data">{{=it.RecLike}}个赞


        

有朋友真好!


        {{?}}

    </div>



    <div class="section section3">

        {{? it.NeedAttention == 0}}

            {{? it.Steps == 0}}

            

暂时没有步数数据


            

快来关注微信运动吧


            {{??}}

            

我在微信运动上


            

走出了


            <p class="steps"><span class="data">{{=it.Steps}}步

                {{? it.Marathon != 0 }}

                

相当于跑了


                

<span class="data">{{=it.Marathon}}个马拉松


                {{?}}

            {{?}}

        {{?}}



        {{? it.NeedAttention == 1}}

        

暂时没有步数数据


        

快来关注微信运动吧


        {{?}}



        {{? it.NeedAttention == -1}}

        

获取微信运动数据出错。


        {{?}}

    </div>

</div>

<!-- page4 END -->

<!-- page5 START -->

<div class="page page5">

    <!-- <a href="javascript:;" class="replay">重新回顾 -->

    <div class="end"></div>

    <h2 class="page_title">重新回顾<br>你和微信的故事</h2>

</div>

<!-- page5 END -->

</script>

<script src="https://res.wx.qq.com/open/libs/jquery/1.11.3/jquery.js"></script>

<script src="https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/js/vendor/doT.min.js"></script>

<script src="https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/js/vendor/moment.min.js"></script>

<script src="https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/js/vendor/preloader.js"></script>

<script src="https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/js/vendor/iSlider.js"></script>

<script>

    // 预加载资源

    var preload = [

        'https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/media/music.1dfb.mp3',

        'https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/images/bg@2x.4612.jpg',

        'https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/images/logo@2x.595c.png',

        'https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/images/end@2x.2a0e.png',

        'https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/images/sound@2x.257e.png',

        'https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/images/sound_muted@2x.a2c6.png',

        'https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/images/hand@2x.34a4.png',

        'https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/images/rect@2x.e3f9.png',

        'https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/images/rect_dashed@2x.8e8d.png',

        'https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/images/triangle@2x.77c4.png',

        'https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/images/replay@2x.ec4a.png'

    ];



    // 线上数据

   var wechatPro =

eval("(" + '{

"FstUseWXTime":20120730,

"WXRankNum":165795822,

"FstFriendNickName":"M.J.",

"FstFriendImg":"http://wx.qlogo.cn/mmhead/Q3auHgzwzM6vQIuCTEHeR5mdqFChj9q3oqrdiaO7ZIUYnJoLN3hkZUA/132",

"SnsNum":242,

"SnsRankNum":113620687,

"LocateNum":6,

"AddFriendNum":180,

"AllFriendNum":229,

"BoyFriendNum":133,"

GirlFriendNum":96,

"SendLike":795,

"RecLike":329,

"RecRedEnvelope":155,

"SendRedEnvelope":165,

"LocateCountryList":["上海市","南京市","宣城市","成都市","杭州市","武汉市"],

"FriendCountryList":["上海市","北京市","四川省","委内瑞拉","安徽省","广东省","新加坡","日本","江苏省","江西省","浙江省","湖北省","湖南省","福建省","美国","陕西省","黑龙江省"],

"FstSnsTime":1395557059,

"FstSnsType":1,

"NeedAttention":0,

"Steps":0}' + ")");




    wechatPro.FstSnsTime    = wechatPro.FstSnsTime ? moment.unix(wechatPro.FstSnsTime).format('YYYY.MM.DD') : false;

    wechatPro.FstUseWXTime  = moment(wechatPro.FstUseWXTime, 'YYYYMMDD').format('YYYY.MM.DD');

    wechatPro.Marathon      = Math.floor(wechatPro.Steps / 52500);

    wechatPro.isLocateEmpty = (typeof wechatPro.LocateCountryList == 'undefined' || wechatPro.LocateCountryList.length == 0) && wechatPro.LocateNum == 0; // 判断是否有地理数据

    wechatPro.isLocate      = !wechatPro.isLocateEmpty && wechatPro.LocateNum !== 0 && wechatPro.LocateCountryList.length > 0; // 判断是否国内数据

    wechatPro.locateCity    = !wechatPro.isLocateEmpty ? wechatPro.LocateCountryList[0] : false; // 显示国内第一个城市



    // 国内城市删除最后一个市字

    if (wechatPro.locateCity && wechatPro.locateCity.substr(-1) == '市') {

        wechatPro.locateCity = wechatPro.locateCity.substr(0, wechatPro.locateCity.length - 1);

    }



    var tempFn = doT.template(jQuery('#tmpl').html());

    jQuery('#wrapper').html(tempFn(wechatPro));

</script>

<script src="https://res.wx.qq.com/zh_CN/htmledition/getmyrelationwithwx/js/common.e4ff.js"></script>

<script type="text/javascript" src="//tajs.qq.com/h5?sId=500001816" charset="UTF-8"></script>

</body>

</html>




https://blog.sciencenet.cn/blog-1294056-949481.html

上一篇：无题
下一篇：回家过年了
收藏 IP: 222.205.106.*| 热度|

0

该博文允许注册用户评论 请点击登录 评论 (0 个评论)

数据加载中...

Archiver|手机版|科学网 ( 京ICP备07017567号-12 )

GMT+8, 2024-4-26 11:36

Powered by ScienceNet.cn

Copyright © 2007- 中国科学报社

返回顶部