美女时钟

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

偶然在一个网站上面看到了美女时钟这个东西，觉得挺好玩的，非常养眼。发现图片来自搜道，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.php和clock_gt1.php，clock.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代码：

JS代码：

$(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();
    }
}

注：在该代码之前必须先引入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

原文地址：美女时钟, 感谢原作者分享。