찾다

美女时钟

Jun 06, 2016 pm 08:11 PM
시계웹사이트아름다움이것

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

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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.