手机适配，点赞效果，程序员表白程序，开放源码，不断更新（第五篇：第三波）

最新推荐文章于 2023-09-15 23:20:38 发布

wuxia2001

最新推荐文章于 2023-09-15 23:20:38 发布

阅读量7.4k

点赞数 21

分类专栏：表白

本文链接：https://blog.csdn.net/wuxia2001/article/details/88651009

版权

表白专栏收录该内容

1 篇文章 2 订阅

订阅专栏

源码地址：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"这一段去掉就行。这个点赞是为了以后，看的人如果喜欢，点击了赞的话，会发短信通知朋友。我这边所有的页面的都会渐渐加上发短信的功能，比如表白的时候，不论对方接受还是拒绝，都会发短信通知，这个功能正在做。
而且我也在做可以直接在网页端设置的功能，这样普通的人，不用建站就也可以使用了。

wuxia2001

关注

21
点赞
踩
48

收藏

觉得还不错? 一键收藏
23
评论
手机适配，点赞效果，程序员表白程序，开放源码，不断更新（第五篇：第三波）

源码地址：http://www.bigeone.cn/love/index1.html今天给第四波的故事一：我们的爱情故事，做了手机适配，后面的故事大多都会做手机适配，毕竟现在的智能机时代。我做了两个页面，一个是PC端，一个是手机端，因为我试过在一个页面里适配PC和手机，是做不到的，很不好看，于是写了两套，然后在进入页面时，分辨当前的手机还是PC，然后跳到不同的页面，所以多了个中转页面。中转...
复制链接

扫一扫