|
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> | |
Archiver|手机版|科学网 ( 京ICP备07017567号-12 )
GMT+8, 2024-9-27 07:00
Powered by ScienceNet.cn
Copyright © 2007- 中国科学报社