php原生網頁，加音頻，網頁彈幕（沒有交互性，未用到workman）javascript
三部分，php，css，jsphp
php部分（獲取數據）
<?php
/**
*2019-02-18 "育說育得勁" 活動
*/
session_start();
if(!defined('MEMCACHE_HOST'))
{
define('MEMCACHE_HOST','1****45');
define('MEMCACHE_PORT',11212);
}
include_once('/opt/*****/memcache/memcache.php');
include_once('/opt/****inc/global_qq.php');
include_once("/opt/****/yunqi/inc/function.php");
include_once("/opt/****/yunqi/ios2/emoji.php");
include_once('/opt/****/baby/cominc/qq_newclass.php');//帖子操做類
$ms = new qqWapCls();
//$post_id= intval($_GET['id']);
$post_id = 22142285;
$mobile = isset($_GET['mobile'])?$_GET['mobile']:0;
$o_user_id = isset($_GET['o_user_id'])?$_GET['o_user_id']:0;
$dated = date("Y-m-d H:i:s");
$start = 0;
$limit = 10;
$agent = $_SERVER['HTTP_USER_AGENT'];//獲取請求agent，響應式展現
if(strpos($agent,'Windows') || strpos($agent,"MicroMessenger")){
$os=-1;
$o_user_id = checkLogin(); //(微信端)原平臺id user_id
addClickNum(2);
}elseif(strpos($agent,'iPhone') || strpos($agent,'iPad')){
$os=2;
$os_share=1;
$plat=51;
$mobile = 121;
addClickNum(1);
}else{
$os =1; //安卓
$os_share=0;
$plat=61;
$mobile = 122;
addClickNum(1);
}
function addClickNum($type){
if($type == 1){
//記錄打開量（app）
$click_num = M::Get('act_2019_'.$post_id.'_clicknum_app');
if(!$click_num){
M::Set('act_2019_'.$post_id.'_clicknum_app',1);
}else{
M::Set('act_2019_'.$post_id.'_clicknum_app',$click_num+1);
}
}else{
//記錄打開量（微信）
$click_num = M::Get('act_2019_'.$post_id.'_clicknum_weixin');
if(!$click_num){
M::Set('act_2019_'.$post_id.'_clicknum_weixin',1);
}else{
M::Set('act_2019_'.$post_id.'_clicknum_weixin',$click_num+1);
}
}
}
if($o_user_id) //user_id是不是老用戶，不是則微信受權生成新用戶
{
$sql = "select * from user where o_user_id={$o_user_id} and site=2 limit 1";
$user_info = $ms->getRow($sql);
$user_id = $user_info['id'];
$age_str = getBabyCurrentAge($user_info['birthday'],$dated);
$view_date = $age_str['str'];
//print_r($user_info);
}else{
$user_id = 0;
}
//獲取帖子信息內容
$data = $ms->getPost($post_id);
//查找回覆信息
$sql = "select id,user_id as uid,quote_user_id,content,dated from `bbs_reply` where post_id='{$post_id}' and state=1 and dated>'{$data['data']['dated']}' order by dated desc limit {$start},{$limit}";
$replys = $ms->getRows($sql);
$sql = "select count(*) as ct from `bbs_reply` where post_id='{$post_id}' and state=1 limit 1";
$reply_count = $ms->getRow($sql);
$sql = "select count(*) as ct from `bbs_reply` where post_id='{$post_id}' limit 1";
$all_reply_count = $ms->getRow($sql);
foreach($replys as $k=>$d){
$r_user_id=$d['uid'];
//獲取回覆者信息
$sql="select id,avatar,nickname,birthday,city,o_user_id,site,sex from `user` where id='{$r_user_id}' limit 1";
$tmp=$ms->getRow($sql);
$ruser['head'] = 'http******/'.$tmp['avatar'];
$ruser['name'] = $tmp['nickname'];
$ruser['city'] = $tmp['city'];
$ruser['o_user_id'] = $tmp['o_user_id'];
$ruser['sex'] = $tmp['sex'];
$ruser['id'] = $tmp['id'];
$replys[$k]['user'] = $ruser;
$d['content'] = str_replace('height=','sheight=',$d['content']);
$replys[$k]['content'] = str2emoji(strtr($d['content'],$face_array));
$replys[$k]['content'] = str2emoji(str_replace('http','https',$replys[$k]['content']));
$replys[$k]['content'] = preg_replace("/<img.+?\/>/","", $replys[$k]['content']);
}
//彈幕數據
$sql = "select content from `bbs_reply` where post_id='{$post_id}' and state=1 order by dated desc limit 30";
$danmu_replys = $ms->getRows($sql);
foreach($danmu_replys as $k => $v){
if(mb_strlen($v['content'],'UTF8')<5 || mb_strlen($v['content'],'UTF8')>=18){
unset($danmu_replys[$k]);
}
}
$dated_start = date("Y-m-d 08:00:00");
$dated_end = date("Y-m-d 23:59:00");
if($dated >= $dated_start && $dated <= $dated_end){
$c_view_num = rand(989, 1259);
}else{
$c_view_num = rand(86,113);
}
//$c_view_num = rand(989, 1259);
function checkLogin()
{
$o_user_id = $_COOKIE['o_user_id'];
return intval($o_user_id);
}
//微信受權
$backurl = base64_encode("http://****/sub/wechat_oauth_save.php?id=".$post_id);
$oauth_url = "https://***/callback/oauth.php?scope=snsapi_userinfo&backurl=".$backurl;
?>
css，js部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="format-detection" content="telephone=no;viewport-fit=cover;padding-bottom:constant(safe-area-inset-bottom);" />
<meta content="telephone=no" name="format-detection">
<title>育說育得勁</title>
<script src="https://file2.ci123.com/ast/js/jquery_172.js" language="javascript"></script>
<script src="https://app.ci123.com/act/global/js/shares_new3.js" language="javascript"></script>
<script type="text/javascript" src="http://file2.ci123.com/ast/js/zepto.js"></script>
<script src="js/jquery-3.0.0.min.js"></script>
<script language="javascript">
var phoneWidth=parseInt(window.screen.width);var iwidth=750;var phoneScale=phoneWidth/iwidth;var ua=navigator.userAgent;var os=1;if (/Android (\d+\.\d+)/.test(ua)){var version=parseFloat(RegExp.$1);os=2;if(version>2.3){document.write('<meta name="viewport" content="width='+iwidth+', minimum-scale='+phoneScale+', maximum-scale='+phoneScale+', target-densitydpi=device-dpi">')}else{document.write('<meta name="viewport" content="width='+iwidth+', target-densitydpi=device-dpi">')}} else {document.write('<meta name="viewport" content="width='+iwidth+', user-scalable=no, target-densitydpi=device-dpi">')}
</script>
<style type="text/css">
body{margin:0;padding:0;font-family:Arial;font-size:24px; background:#fff;padding-bottom:constant(safe-area-inset-bottom);-webkit-text-size-adjust:none;}
ul,li,ol,dl,dt,dd,p,div{margin:0;padding:0;list-style:none}
a {text-decoration:none;out-line:none; }
@font-face {
font-family: 'iconfont'; /* project id 1031359 */
src: url('//at.alicdn.com/t/font_1031359_uxzl9jjxkpb.eot');
src: url('//at.alicdn.com/t/font_1031359_uxzl9jjxkpb.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1031359_uxzl9jjxkpb.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1031359_uxzl9jjxkpb.woff') format('woff'),
url('//at.alicdn.com/t/font_1031359_uxzl9jjxkpb.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1031359_uxzl9jjxkpb.svg#iconfont') format('svg');
}
.music{width:100%;border-bottom:19px solid #f0f0f0;}
.logo{float:left;width:254px;height:55px;border-right:2px solid #9d9c9b;margin:30px 0 0 22px;}
.order{float:left;height:150px;}
.mun{font-size:20px;color:#fff;background:#7e7e7e;border-radius:30px;padding:5px 18px;margin:28px 0 8px 16px;width:62px;text-align:center;}
.tie{font-size:19px;color:#7e7e7e;margin: 0 0 0 24px;letter-spacing:2px;}
.title{clear:both;width:622px;text-align:center;font-size:34px;color:#4d4d4d;margin:0 auto;}
.book{width:696px;height:607px;background:url(images/bg.jpg) no-repeat;background-size:100%;margin:0 auto;padding-top:53px;position:relative;}
.book img{display:block;margin:0 auto;width:501px;height:501px;border-radius:13px;box-shadow:#dedede 0px 0px 30px 5px;}
.ing{color:#4d4d4d;font-size:19px;margin:25px auto;text-align:center;font-family: "iconfont" !important;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.fix{clear:both;}
.bo{width:641px;margin:0 auto;}
.time{float:left;font-size:20px;color:#a3a2a2;width:63px;text-align:center;}
.line{float:left;width:515px;height:4px;background:#d1d1d1;margin-top:8px;}
.al{width:100px;height:4px;background:#ef5534;position:relative;}
.point{position:absolute;width:15px;height:15px;border-radius:15px;top:-5px;right:0;background:radial-gradient(#e84a28,#fef1ec);}
.control{clear:both;height:142px;width:610px;margin:0 auto;display: flex;flex-direction:row;align-items: center;}
.push{-webkit-animation-play-state:paused;}
.item{width:122px;font-size:45px;text-align:center;color:#b6b5b5;line-height:142px;}
.item1{width:122px; text-align:center;font-family: "iconfont" !important;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.bo{color:#e84a28;font-size:90px;}
.tan{height:87px;font-size:60px;margin-top:26px;font-family: "iconfont" !important;font-style: normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;position:relative;}
.tan .stop{width:16px;height:16px;background:#878787;border:2px solid #6a6a6a;border-radius:16px;position:absolute;top:37px;left:66px;}
.tan .kai{width:20px;height:20px;background:#ef5636;border-radius:20px;position:absolute;top:37px;left:66px;}
.tan .stop .slop{width:17px;height:0;border:1px solid #fff;transform:rotate(45deg);margin-top:8px;}
.next{width:97px;height:41px;border:2px solid #d54121;border-radius:7px;background:#e84a28;line-height:42px;text-align:center;font-size:28px;color:#fff;}
.one{background:#666;border:2px solid #333;display:none;}
.intro{width:153px;background:#e84a28;font-size:26px;color:#fff;text-align:center;padding:10px 0;margin:36px 0 0 22px;border-radius:48px;font-weight:bold;}
.text{width:700px;margin:24px auto 24px;line-height:1.5em;font-size:25px;}
.info{ width:712px; margin:0 auto 30px auto; border:2px solid #e84a28;height:108px; padding-top:28px;}
.from{float:left;width:76px;height:76px;border:2px dotted #e95535;font-size:28px;color:#e84a28;text-align:center;margin:0 0 0 11px;}
.info .tit{font-size:26px;color:#6e6d6d;font-weight:bold;margin-bottom:18px;}
.info .right{float:left;margin-left:15px;}
.begin{float:left;color:#878787;font-size:24px;font-family: "iconfont" !important;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;margin-right:46px;}
.begin img{ width:33px; height:33px;}
.begin span{color:#323232;}
.front{ margin-right:0;}
.front1{ margin-right:0; margin-top:-2px; width:33px; height:33px; border-radius:33px; overflow:hidden;}
.look{float:left;width:68px;height:68px;border-radius:68px;background:#e84a28;font-size:24px;color:#fff;text-align:center;line-height:69px; margin-top:8px;}
.headline{height:32px;width:540px;margin:32px auto;background:url(images/litt.jpg) 0 5px repeat-x;background-size:4px 27px;padding:0 17px;}
.headline .in{text-align:center;background:#fff;font-size:26px;color:#e84a28;font-weight:bold;letter-spacing:2px;}
.desk{width:703px;height:405px;margin:0 auto 40px;}
.img_l{float:left;width:61px;height:61px;margin:137px 19px 0 22px;}
.img_r{float:left;width:61px;height:61px;margin:137px 0 0 12px;transform:rotate(180deg);}
.apply{width:545px;height:362px;float:left;margin:29px auto;position:relative;}
.apply_nav{position:relative;width:545px;float:left;margin:0 auto;height:700px;overflow:hidden}
.apply_array{float:left;position:relative;width:565px;}
.apply_img{width:545px;height:276px;}
.apply_img img{width:545px;height:276px;}
.apply_array .te{text-align:center;font-size:24px;color:#6e6d6d;margin-top:24px;}
.apply_w{position:absolute;}
.wonder{float:left;font-size:28px;color:#e84a28;font-weight:bold;margin:58px 0 0 44px;}
.wonder span{font-size:22px;color:#919191;font-weight:100;}
.tip{background:url(images/tip.jpg) 0 5px no-repeat;background-size:59px 48px;margin-top:55px;padding-left:70px;width:148px;float:right;font-size:24px;color:#e84a28;}
.last ul{clear:both;width:709px;margin:0 auto 100px;}
.last li{border-bottom:1px solid #d5d5d5;margin-top:28px;}
.last li:last-child{border:none;}
.head{float:left;width:74px;height:74px;border-radius:74px;overflow:hidden;margin-left:8px;}
.head img{width:74px;height:74px;}
.mid{float:left;width:604px;}
.mid .name{font-size:22px;color:#6e6d6d;margin:12px 0 0 10px;}
.mid .timer{color:#c6c4c4;font-size:20px;margin:18px 10px;}
.mid .word{font-size:24px;color:#4f4f4f;line-height:1.4em;margin-bottom:30px;}
.last input{float:left;width:440px;font-family: "iconfont" !important;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;background:#eff1f4;border-radius:59px;padding:16px 0 16px 28px;font-size:23px;color:#818181;margin:0 0 22px 25px;border:none;}
.last .submit{float:left;font-family: "iconfont" !important;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-size:52px;color:#e84a28;margin-left:14px;}
.last .share{float:left;font-family: "iconfont" !important;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-size:52px;color:#828283;margin-left:14px;}
.dan{position:absolute;top:0;left:0;}
.barrager{width:696px;margin:0 auto;height:500px;overflow:hidden;position:relative;}
.barrager div{position:absolute;}
.barrager div span{background:rgba(0,0,0,0.5);border-radius:34px;padding:5px 18px;}
.addBarrager{background:rgba(255,255,255,0.8);padding-top:20px;width:100%;position:fixed;bottom:0;left:0; border-top:1px solid rgba(127,127,127,0.3)}
.yu{width:750px;height:955px;margin:0 auto;}
.share{border-top:#cecece 1px solid;padding-bottom:1px;}
.share .t{width:60px;margin:0 auto;background:#fff;text-align:center;margin-top:20px;color:#8e8b85;}
.share .bts{padding-top:24px;text-align:center;}
.share table{margin:0 auto;}
.share .bt{height:48px;width:50px;margin:0 auto;}
.share .s1{background:url(images/v3.png) no-repeat;background-size:197px 48px;}
.share .s2{background:url(images/v3.png) -49px 0 no-repeat;background-size:197px 48px;}
.share .s3{background:url(images/v3.png) -99px 0 no-repeat;background-size:197px 48px;}
.share .s4{background:url(images/v3.png) -149px 0 no-repeat;background-size:197px 48px;}
.share .n{padding-top:8px;text-align:center;color:#6c6c6c;}
#share-tip { background-color: rgba(0,0,0,0.7); position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: none;}
#share-tip img {position: absolute; top: 0; right: 25px;}
.fixed{position:fixed;width:100%;height:100%;left:0;bottom:0;background:rgba(0,0,0,0.3);z-index:10;}
.fixed .cancel{display:block;width:100px;margin:0 auto;text-align:center;color:#666;padding:32px 0 ;}
.loading{clear:both;margin:0 auto;width:200px;text-align:center;color:#555;/*display:none;*/}
.loading i{display:inline-block;width:15px;height:15px;background:url(http://filebaby.qubaobei.com/box/images/phone/loading.png) no-repeat;background-size:15px 15px;animation:loading 0.8s linear infinite;-moz-animation:loading 0.8s linear infinite;-webkit-animation:loading 0.8s linear infinite;}
.loading span{margin-left:8px;}
.sbg{position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%;text-align:center;color:#fff;font-size:48px;line-height:1.7em;display:none;background:rgba(0,0,0,0.9);}
.sbg .arron{position:absolute;top:8px;right:18px;width:100px;height:100px;background:url(http://baby.ci123.com/yunqi/m/weixin/images/arron.png) no-repeat; background-size:100px 100px;}
.sbg p{padding-top:78px;}
.sbg span{color:#f66;}
.dd445 img{width:100%;}
.con img{width:100%;}
@-webkit-keyframes star2
{
0% { width:15px;}
100%{ width:515px;}
}
</style>
</head>
<body>
<div class="music">
<div class="logo"><img src="images/logo.png" width="239" height="53" /></div>
<div class="order">
<div class="mun">第1期</div>
<div class="tie">漫漫冬夜，文胸是穿仍是脫？</div>
</div>
<div class="title">漫漫冬夜，文胸是穿仍是脫？</div>
<div class="book" id="wrapper">
<img src="images/pic1.jpg" />
<div class="ing"> 正在聽：<a class="c_view_num"><?php echo $c_view_num; ?></a>人</div>
<div class="fix"></div>
<div class="dan">
<div class="barrager">
<?php foreach($danmu_replys as $k => $v): ?>
<div><span><?php echo $v['content'];?></span></div>
<?php endforeach; ?>
</div>
</div>
</div>
<div style="display:none">
<audio controls="controls" id="mp3Btn">
<source src="http://filebaby.qubaobei.com/uploads/video/danmu_act/20180220_wenxiong.mp3" type="audio/mpeg" />
</audio>
</div>
<div class="bo">
<div class="time" id="currentTime">00:00</div>
<div class="line">
<div class="al">
<div class="point"></div>
</div>
</div>
<div class="time" id="duration">30.00</div>
</div>
<div class="control">
<div class="tan"><span class="kai"><div class="slop"></div></span></div><!--彈幕關閉時span樣式爲.stop-->
<!--<div class="item"></div>
<div class="item"></div>-->
<div class="item bo"><img src="images/push.png" width="88" height="88" /></div>
<div class="item1 bo" style="display:none"></div>
<!--<div class="item"></div>
<div class="item"></div>-->
<div class="next one">下一期</div>
</div>
</div><!--music-->
<div class="music">
<div class="intro">本期簡介</div>
<div class="text">冬天，到底可不能夠不穿內衣自由放飛？另外，晚上睡覺的時候想要脫內衣怕冷怎麼辦……？看看育姐和衆多姐妹們怎麼說。</div>
<div class="info">
<div class="from">話題來源</div>
<div class="right">
<a href="http://baby.qubaobei.com/yunqi/act/2019/speak/tiaoban.php?id=22142285"><div class="tit">冬天睡覺大家都脫胸罩不？</div></a>
<div class="begin front"><span></span> 發起人：</div>
<div class="begin front1"><img src="images/user.jpg" /></div>
<div class="begin"> 小陳陳</div>
<div class="begin"><span></span> 回覆數：<?php echo $all_reply_count['ct'];?></div>
</div>
<a href="http://baby.qubaobei.com/yunqi/act/2019/speak/tiaoban.php?id=22142285"><div class="look">查看</div></a>
</div>
</div><!--music-->
<div class="music">
<!--<div class="intro">育姐講堂</div>
<div class="headline"><div class="in">不會作甜品不要緊！蔬菜版聖誕樹作起來</div></div>
<div class="desk"><img src="images/desk.jpg" width="703" height="405" /></div>-->
<div class="yu"><img src="images/yu1.jpg" width="750" height="955" /></div>
</div><!--music-->
<div class="music" style="display:none">
<div class="intro">往期節目</div>
<div class="img_l"><img src="images/next.png" width="61" height="61"/></div>
<div class="apply">
<div class="apply_nav">
<div class="apply_w">
<div class="apply_array">
<div class="apply_img"><img src="images/pic.jpg"/></div>
<div class="te">霧霾天還放飛自個人人，我敬你是條漢子！ </div>
</div>
<div class="apply_array">
<div class="apply_img"><img src="images/desk.jpg" /></div>
<div class="te">霧霾天還放飛自個人人，我敬你是條漢子！ </div>
</div>
<div class="apply_array">
<div class="apply_img"><img src="images/pic.jpg"/></div>
<div class="te">霧霾天還放飛自個人人，我敬你是條漢子！ </div>
</div>
<div class="apply_array">
<div class="apply_img" ><img src="images/desk.jpg"/></div>
<div class="te">霧霾天還放飛自個人人，我敬你是條漢子！ </div>
</div>
</div>
</div>
</div>
<div class="img_r"><img src="images/next.png" width="61" height="61"/></div>
<div style=" clear:both;"></div>
</div><!--music-->
<div id="sbg" class="sbg">
<div class="arron"></div>
<p>請點擊右上角<br />點擊【發送給朋友】<br />【分享到朋友圈】<br />分享</p>
</div>
<div class="last">
<div class="wonder">精彩評論 <span>(<?php echo $reply_count['ct'];?>)</span></div>
<div class="tip">評論會出如今彈幕裏哦~</div>
<ul id="replylist">
<li id="laster"></li>
<?php foreach($replys as $k => $v):?>
<li>
<div class="head"><img src="<?php echo $v['user']['head'];?>" /></div>
<div class="mid">
<div class="name"><?php echo $v['user']['name'];?></div>
<div class="timer"><?php echo date('m-d H:i',strtotime($v['dated']));?></div>
<div class="word"><?php echo $v['content'];?></div>
</div>
<div style="clear:both"></div>
</li>
<?php endforeach;?>
</ul>
<div class="addBarrager" >
<div id="replybox">
<input class="barVal" placeholder="評論會出如今彈幕裏哦~" type="text" id="reply_content"/>
</div>
<div class="submit" onClick="pubContent()"></div>
<div class="share" onClick="showShare()"></div>
</div>
</div>
<div class="share" id="shareline" style="display: none">
<div style="width:100%; height:100%; position:relative;">
<div class="bot" style="width:100%; background:#fff; position:absolute; bottom:0;">
<div class="t">分享</div>
<div class="bts">
<table width="96%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" onClick="share.shareToWX(2);"><div class="bt s2"></div><div class="n">朋友圈</div></td>
<td onclick="share.shareToWX(1);"><div class="bt s1"></div><div class="n">微信好友</div></td>
</tr>
</table>
</div>
<div class="cancel" onClick="hideShare();">關閉</div>
</div>
</div>
</div>
<div id="more" class="loading"><i></i><span>正在加載...</span></div>
</body>
<?php include_once('/opt/ci123/www/html/markets/app2/baby/cms/inc/wx_share.php');?>
<script src="https://app.ci123.com/act/global/js/shares.js" language="javascript"></script>
<script type="text/javascript" src="js/jquery.touchSlider.js"></script>
<script>
var post_id = <?php echo $post_id;?>;
var g_user_id = '<?php echo $user_id;?>';
var mobile = '<?php echo $mobile;?>';
var g_avatar = 'http***/<?php echo $user_info['avatar']?>';
var g_nickname = '<?php echo $user_info['nickname'];?>';
var os = '<?php echo $os;?>';
var os_share = '<?php echo $os_share;?>';
var gid = 11;
var isSending = false;
var page = 1;
$(function(){
audioAutoPlay('mp3Btn');
function show(){
var now_date = new Date();
var h = now_date.getHours();
if(h>=8 && h<=23){
var num = GetRandomNum(989, 1259);
}else{
var num = GetRandomNum(86, 113);
}
$('.c_view_num').html(num);
}
setInterval(show, 5000);
})
// 獲取最小值到最大值以前的整數隨機數
function GetRandomNum(Min, Max) {
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}
//音頻自動播放
function audioAutoPlay(id){
var audio = document.getElementById(id);
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
audio.play();
}, false);
}
//audioAutoPlay('mp3Btn');
var audio = document.getElementById('mp3Btn');
var is_g = true;
audio.addEventListener("timeupdate",function(){
var timeDisplay;
//用秒數來顯示當前播放進度
timeDisplay = Math.floor(audio.currentTime);
if(timeDisplay > 0){
var t_timeDisplay = timeToMinute(timeDisplay);
$('#currentTime').html(t_timeDisplay);
}
if(timeDisplay == 1){
$(".al").css("-webkit-animation-play-state","running");
}
//當視頻播放到 1s的時候作處理
if(timeDisplay == 0){
if(is_g){
var m = Math.floor(audio.duration);
var duration = timeToMinute(audio.duration);
$('#duration').html(duration);
$(".al").css("-webkit-animation","star2 "+m+"s 0s linear 1 forwards");
$(".al").css("-webkit-animation-play-state","paused");
is_g = false;
}
}
},false);
$(".item").click(function(){
//$(".al").addClass('push');
$(".al").css("-webkit-animation-play-state","paused");
$(".item1").show();
$(".item").hide();
audio.pause();
});
$(".item1").click(function(){
//$(".al").removeClass('push');
$(".al").css("-webkit-animation-play-state","running");
$(".item").show();
$(".item1").hide();
audio.play();
});
$(".tan").click(function(){
$(".tan span").toggleClass(function(){
if($(".tan span").hasClass('kai')){
$(".dan").hide();
$(".tan span").removeClass('kai');
return 'stop';
}else{
$(".dan").show();
$(".tan span").removeClass('stop');
return 'kai';
}
})
});
$(function(){
$li1 = $(".apply_nav .apply_array");
$window1 = $(".apply .apply_w");
$left1 = $(".img_l");
$right1 = $(".img_r");
$window1.css("width", $li1.length*565);
var lc1 = 0;
var rc1 = $li1.length-1;
$left1.click(function(){
if (lc1 < 1) {
lc1 = 0;
rc1 = 3;
$window1.animate({left:'0px'}, 300);
}
else{
lc1--;
rc1++;
$window1.animate({left:'+=565px'}, 300);}
});
$right1.click(function(){
if (rc1 < 1){
lc1 = 0;
rc1 = 3;
$window1.animate({left:'+=1695px'}, 300);
}
else{
lc1++;
rc1--;
$window1.animate({left:'-=565px'}, 300);}
});
})
$(function () {
$(".barrager").barrager()
});
(function () {
var Barrager = function (ele,options) {
var defaults = {
color:["#fff","#f5cf95","#fbedb8","#d3e9f0","#ffdfde"],
wrap:ele
};
this.settings = $.extend({},defaults,options||{});
this._init();
this.bindEven();
};
Barrager.prototype = {
_init:function () {
var item = $(this.settings.wrap).find("div");
for(var i = 0;i<item.length;i++){
item.eq(i).css({
top:this.getReandomTop()+"px",
color:this.getReandomColor(),
fontSize:this.getReandomSize()+"px"
});
item.eq(i).css({
//right:-item.eq(i).width()
right:-item.eq(i).width()
})
}
this.randomTime(0);
},
bindEven:function () {
var _this = this;
$(".addBarrager .submit").on('click',function () {
_this._click(_this);
});
},
getReandomColor:function () {
var max = this.settings.color.length;
var randomNum = Math.floor(Math.random()*max);
return this.settings.color[randomNum];
},
getReandomTop:function () {
var top = (Math.random()*450).toFixed(1);
return top;
},
getReandomSize:function () {
var size = (20+Math.random()*10);
return size;
},
getReandomTime:function () {
var time = Math.floor((8+Math.random()*10));
return time*1000;
},
randomTime:function (n) {
var obj = $(this.settings.wrap).find("div");
var _this = this;
var len = obj.length;
if(n>=len){
n=0;
}
setTimeout(function () {
n++;
_this.randomTime(n)
},1000);
var item = obj.eq(n),_w = item.outerWidth(!0);
item.animate({
left:-_w
},_this.getReandomTime(),"linear",function () {
item.css({right:-_w,left:""});
_this.randomTime(n)
});
},
_click:function (obj) {
var _this = obj;
var _val = $(".barVal");
if(_val.val() == ""){
alert("請發表評論！");
return false;
}
$(_this.settings.wrap).append("<div><span class='new'>"+_val.val()+"</span></div>");
_this._init();
_val.val("");
}
};
$.fn.barrager = function (opt) {
var bger = new Barrager(this,opt);
}
})(jQuery);
//判斷是否受權
$(function(){
$("#replybox").click(function(){
if(g_user_id==0)
{
//.post("<?php echo $oauth_url;?>");
window.location.href="<?php echo $oauth_url;?>";
return false;
}
});
});
//回覆按鈕
function pubContent()
{
var now_date = new Date().Format("mm-dd HH:ii");
if(g_user_id==0)
{
window.location.href="<?php echo $oauth_url;?>";
return false;
}
var content = $("#reply_content").val();
if(content.length<1)
{
alert('字數不能少於1個哦~');
return false;
}
//$("#reply_content").val('');
//$("#errmsg").html("<b style='color:#4DB64A'>發表成功！</b>").show();
$.post("../../../../qq/sub/club_reply.php",{post_id:post_id,site:mobile,admin_id:g_user_id,content:content}); //保存回覆內容
var html = '<div class="head"><img src="'+g_avatar+'" /></div><div class="mid"><div class="name">'+g_nickname+'</div><div class="timer">'+now_date+'</div><div class="word">'+content+'</div></div><div style="clear:both"></div>';
alert('評論成功');
$("#laster").append(html);
$('#laster')[0].scrollIntoView(true);
}
//獲取當前時間
Date.prototype.Format = function (fmt) {
var o = {
"m+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小時
"i+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
//分享的相關代碼
//微信觸發
var imgUrl = 'http:/***om/yunqi/act/2019/speak/images/share.png';
var title = '【育說育得勁·戴耳機就能聽】漫漫冬夜，文胸是穿仍是脫？';
window.shareData = {
'imgUrl': imgUrl,
//'timeLineLink': 'http://baby.qubaobei.com/yunqi/act/2019/speak/',
'tTitle':title,
'tContent':'媽媽社區：手機母嬰學習平臺，女人祕密交流空間'
};
function shareWxAdd(){
$.get("sub/set_share_num.php",{post_id:post_id}); //更新轉發量
}
function hideShare(){
$("#shareline").removeClass("fixed").hide();
}
function showShare(){
if(os<0){
$("#sbg").show();
setTimeout(function(){$("#sbg").hide();},9000);
//alert('微信請使用右上角轉發');
return false;
}
$("#shareline").addClass("fixed").show();
shareWxAdd(); //更新轉發量
}
//分享功能
var share = MaMaShare.setShare({
'title' : title,
'friend' : '快樂孕育，上媽媽社區',
'timeline' : title,
'other' : title,
'sharelink' : 'http://*****m/yunqi/act/2019/speak/',
'image' : imgUrl
})
//上拉加載
function getWinner(){
if(isSending){
return false;
}
isSending=true;
$.get("sub/get_replys.php",{post_id:post_id,page:page},
function(data){
data = JSON.parse(data)
$("#more").hide();
isSending=false;
if(data['ret']==1){
$("#replylist").append(data['data']);
page++;
isSending=false;
}else {
alert("親，沒有啦~")
page=-1;
}
}
);
}
$(window).scroll(function(){
if(page < 0){
return false;
}
var h=$(document).height();
var h2=$(window).height();
var s=$(window).scrollTop();
var l=h-h2-s;
if(l < 5 ){
$("#more").show();
getWinner();
}
});
// 秒轉換分鐘00:00:00格式
function timeToMinute(times){
var result = '00:00:00';
var hour,minute,second
if (times > 0) {
hour = Math.floor(times / 3600);
if (hour < 10) {
hour = "0"+hour;
}
minute = Math.floor((times - 3600 * hour) / 60);
if (minute < 10) {
minute = "0"+minute;
}
second = Math.floor((times - 3600 * hour - 60 * minute) % 60);
if (second < 10) {
second = "0"+second;
}
if (hour == '00') {
result = minute+':'+second;
} else if (minute == '00'){
result = hour+':'+minute+':'+second;
} else {
result = second;
}
}
return result;
};
function scrollBottom() {
document.body.scrollTop = document.documentElement.clientHeight;
};
document.body.addEventListener('focusin', () => {
//軟鍵盤彈出的事件處理
console.log('軟鍵盤彈出');
window.setTimeout('scrollBottom()', 300);
});
document.body.addEventListener('focusout', () => {
//軟鍵盤收起的事件處理
console.log('軟鍵盤收起的事件處理');
window.setTimeout('scrollBottom()', 300);
});
</script>
</html>
本文分享 CSDN - 阿……莫西林。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。css