美女时钟模块,美女时钟API,美女时钟代码

搜道网美女时钟是个很好玩的产品，可惜它没有开放官方API模块来供其他网站调用，但是它提供了两个API地址，可以提供一些数据，利用这些数据我们可以自己来做美女时钟模块。

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

这里我们不能直接用ajax来请求搜道的数据，因为涉及的跨域问题，解决方法是用PHP来请求数据，然后我们再用ajax来请求我们自己站点PHP文件。

PHP文件代码：

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

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

print_r(postIt($url));

同理再做一个请求下一分钟的PHP文件。

为什么我们要请求当前时间和下一分钟的信息？
因为我的服务器是国外服务器，速度比较慢，所以如果等到每一分钟的0秒才开始请求当前分钟的图片的话，可能需要8秒才能请求成功。所以为了做的更完美，我在第一次打开页面的时候做了两个请求，分别请求当前时间的图片和下一分钟的图片，当前时间的图片立刻添加到模块当中，下一分钟的图片地址先存储到模块的data-nextimg中，然后在每一分钟的0秒替换下一分钟的图片然后再一次请求下一分钟的图片地址替换模块的data-nextimg。这样就能保证图片更换的速度了。

附上html代码：

<div class="mmclock_sec">
    <canvas id="canvas_seconds" width="50px" height="50px"></canvas>
    <div class="seconds_block"></div>
</div>

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

    //canvas绘制扇形倒计时
    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
        }
    }

    //设置秒钟倒计时，每分钟的0秒替换图片并请求下一分钟的图片
    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();
        }
    }

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;
}