纠缠千年的执念,和那碗汤遗忘的决绝。是我们辜负了缘分,还是缘分辜负了我们?

美女时钟

技术文档 8446浏览 0评论
文章目录[隐藏]

偶然在一个网站上面看到了美女时钟这个东西,觉得挺好玩的,非常养眼。发现图片来自搜道,Google了一下,美女时钟已经流行一段时间了,相对来说搜道的较为知名。可惜它没有开放官方API模块来供其他网站调用,但是它提供了两个API地址,可以提供一些数据,利用这些数据我们可以自己来做美女时钟模块。

本站演示:http://loosky.net/clock

文章、代码摘自:arayzou

1、获取图片地址

搜道提供的当前时间的美女时钟API为: http://www.sodao.com/ShowTime/gt

当前时间的下一分钟的API为:http://www.sodao.com/ShowTime/gt1

由于不能直接用ajax来请求搜道的数据,因为涉及到跨域问题,因此需要在本站用PHP来请求搜道的数据并提供给ajax使用。

分别建立clock.phpclock_gt1.phpclock.php代码如下:

<?php
function postIt($url)
{
    $result=file_get_contents($url);
    return $result;
}

$url="http://www.sodao.com/ShowTime/gt";

print_r(postIt($url));

clock_gt1.php代码如下:

<?php
function postIt($url)
{
    $result=file_get_contents($url);
    return $result;
}

$url="http://www.sodao.com/ShowTime/gt1";

解决思路:

在第一次打开页面的时候做两个请求,分别请求当前时间的图片和下一分钟的图片,当前时间的图片立刻添加到模块当中,下一分钟的图片地址先存储到模块的data-nextimg中,然后在每一分钟的0秒替换下一分钟的图片然后再一次请求下一分钟的图片地址替换模块的data-nextimg,这样就能保证图片更换的速度了。

2、代码实现

在适当的地方添加html代码:

<a class="mmclock" title="点击查看大图" target="_blank" href="" rel="nofollow" data-nextimg="">
    <div class="mmclock_sec">
        <canvas id="canvas_seconds" width="50px" height="50px"></canvas>
        <div class="seconds_block"></div>
    </div>
    <img class="mmclock_img" src="" >
</a>

JS代码:

<script type="text/javascript">
$(document).ready(function(){
    if($('.mmclock').length>0){
        $('.mmclock').hide();
        getMMimg();
        getMMimg_gt();
        setInterval("secCanvas()", 100);
        setInterval("setmmimg()", 1000);
    }
});
function getMMimg(){
    $.ajax({
        url: '/demo/clock.php',
        error:function(item){
            console.log('加载图片失败');
        },
        success: function(item){
            var json = eval(item);
            var src = json[0].path;
            if (src) {
                $(".mmclock").show();
                $(".mmclock").attr("href", src);
                $(".mmclock .mmclock_img").attr("src", src);
            }
        }
    });
}
function getMMimg_gt(){

    $.ajax({
        url: '/demo/clock_gt1.php',
        error:function(mminfo){
            console.log('加载图片失败');
        },
        success: function(mminfo){
            var mminfo = eval(mminfo);
            mmsrc = mminfo[0].path;
            $('.mmclock').attr('data-nextimg',mmsrc);
        }
    });
}

function secCanvas(){
    var myDate = new Date();
    var sec = myDate.getSeconds();
    var secDeg = (sec-1)*10 + Math.floor(myDate.getMilliseconds()/100);

    var cSec = $("#canvas_seconds").get(0);
    var ctx = cSec.getContext("2d");

    ctx.clearRect(0, 0, cSec.width, cSec.height);
    ctx.beginPath();
    ctx.strokeStyle = "#06c";

    ctx.arc(25,25,12.5, deg(0), deg(0.6*secDeg));
    ctx.lineWidth = 25;
    ctx.stroke();

    function deg(deg) {
        return (Math.PI/180)*deg - (Math.PI/180)*90
    }
}

function setmmimg(){
    var myDate = new Date();
    var sec = myDate.getSeconds();

    $('.seconds_block').text(sec);
    if(sec===0){
        $(".mmclock").attr("href", $('.mmclock').attr('data-nextimg'));
        $(".mmclock .mmclock_img").attr("src", $('.mmclock').attr('data-nextimg'));
        getMMimg_gt();
    }
}
</script>

注:在该代码之前必须先引入jQuery文件

CSS代码:

    .mmclock{
        width: 100%;
        max-width:281px;
        padding:3px;
        border:1px solid #ddd;
        -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
        box-sizing:border-box;
        position: relative;
        display: block;
    }
    .mmclock .mmclock_sec{
        width: 50px;
        height: 50px;
        position: absolute;
        left: 5px;
        top: 5px;
    }
    .mmclock .mmclock_sec .seconds_block{
        height: 50px;
        width: 50px;
        line-height: 50px;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 20px;
        font-family: Arial;
        color: #fff;
        opacity:0.9;
    }
    .mmclock .mmclock_sec canvas{
        opacity:0.5;
        background: rgba(0,0,0,0.5);
        border-radius: 25px;
    }
    .mmclock .mmclock_img{
        width: 100%;
        display: block;
    }

OK,大功告成!

本站演示:http://loosky.net/clock

转载请注明:自由的风 » 美女时钟

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (6)

  1. 不知道为什么不能自动跳转到下一张图片,

    只能够看见倒计时…..

    是否使用的是亚洲区的服务器问题….

    noname2014-01-05 11:52 回复
    • 跟这个应该没有关系,理论上应该是正常的,可能跟搜道的访问有关系。

      自由的风2014-01-05 18:09 回复
      • 请问可不可以给出下载包的…

        noname2014-01-06 04:29
      • 这个不太好整吧,不同的系统做法有些不同。

        自由的风2014-01-06 09:05
  2. 请问怎么才能正确在网站上显示呢?
    我用的是wordpress

    许杨淼淼2014-05-03 20:36 回复
    • 我介绍的方法就是在WordPress下面的实现方式啊。

      自由的风2014-05-05 14:38 回复