手机适配,点赞效果,程序员表白程序,开放源码,不断更新(第五篇:第三波)

源码地址:http://www.bigeone.cn/love/index1.html

今天给第四波的故事一:我们的爱情故事,做了手机适配,后面的故事大多都会做手机适配,毕竟现在的智能机时代。
我做了两个页面,一个是PC端,一个是手机端,因为我试过在一个页面里适配PC和手机,是做不到的,很不好看,于是写了两套,然后在进入页面时,分辨当前的手机还是PC,然后跳到不同的页面,所以多了个中转页面。中转页面只有纯JS,应该很快。

如果需要最新的源码或最新的教程,请扫码关注公众号wuxia2001,里面有最新整理的资源和教程,源码修复了已知BUG并加了些功能,教程全部重新整理。


另外,第二波8个网站原LoveYue系列,如http://loveyue1.sinaapp.com/网址将于2020年元旦弃用,全部转到http://loveyue1.biegeone.com/,请知悉。
代码是如下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var ua = navigator.userAgent.toLocaleLowerCase();
        var pf = navigator.platform.toLocaleLowerCase();
        var isAndroid = (/android/i).test(ua)||((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf))
             || (/ucweb.*linux/i.test(ua));
    var isIOS =(/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
        var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);
        var mobileType = {
                 pc:!isAndroid && !isIOS && !isWinPhone,
                     ios:isIOS,
                     android:isAndroid,
                     winPhone:isWinPhone
        };
    if(mobileType.pc)
        window.location.href="index_pc.html";
    else  window.location.href="index_mo.html";  
</script>
</body>
</html>


最近在把所有的资源转到自己的服务器,在加CDN,访问速度应该会快上一些了,等我有点钱了再配上个好点的宽带。
手机版是有些区别的,比如头部我分成两行了,一些字调小了,最主要的还是中间“我们的爱情历程”那里做了很大的改动,如图:

                                      

                                                

                                          

                         
在这里,我把PC端居中的边框,给弄成左右开边的边框了,所以拿到源码的朋友,改动的时候需要注意,手机端的页面是index_mo.html,如果只要手机端,直接用这个页面就行。
在这个页面里,我们的爱情历程里<ul></ul>中间的<li>,第一个li和最后一个li,要复制下来,因为这两个Li是有些特殊处理的,比如边框往上延伸或往右延伸了,然后中间的li,要两两复制才行。这样才会显得和谐。


我还在加上加了个点赞的效果,如果不要的朋友,可以把class="heart"这一段去掉就行。这个点赞是为了以后,看的人如果喜欢,点击了赞的话,会发短信通知朋友。我这边所有的页面的都会渐渐加上发短信的功能,比如表白的时候,不论对方接受还是拒绝,都会发短信通知,这个功能正在做。
而且我也在做可以直接在网页端设置的功能,这样普通的人,不用建站就也可以使用了。
 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页