jquery制作图片时钟特效

下面我会为你详细讲解“jquery制作图片时钟特效”的完整攻略，包含以下内容：

简述jquery制作图片时钟特效的基本原理；
制作图片时钟特效的详细步骤及注意事项；
两条示例说明，让你更好地理解和掌握这一特效的制作方法。

1. 基本原理

jquery制作图片时钟特效的基本原理是：利用javascript中的Date对象获取当前的时间，并根据时间来计算时钟指针的位置，再用jquery来控制指针的位置，实现时钟指针的不断运动。

2. 制作步骤及注意事项

（1）网页准备

首先需要一个html文件来存放代码，在html文件中引入jquery库和图片时钟的css文件，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>图片时钟特效</title>
    <link rel="stylesheet" href="clock.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="clock">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
    </div>
    <script src="clock.js"></script>
</body>
</html>

（2）CSS样式设置

为图片时钟特效添加CSS样式，例如：

.clock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: url('clock.png') no-repeat;
    background-size: 100% 100%;
}
.hour,
.minute,
.second {
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform-origin: center bottom;
}
.hour {
    width: 50px;
    height: 5px;
    background: #000;
    margin-top: -50px;
}
.minute {
    width: 70px;
    height: 3px;
    background: #000;
    margin-top: -75px;
}
.second {
    width: 80px;
    height: 2px;
    background: #f00;
    margin-top: -90px;
}

（3）Javascript代码编写

在网页代码中加入时钟特效的javascript代码，例如：

function time() {
    var now = new Date();
    var second = now.getSeconds();
    var minute = now.getMinutes();
    var hour = now.getHours() + minute / 60;
    $('.hour').css('transform', 'rotate(' + hour * 30 + 'deg)');
    $('.minute').css('transform', 'rotate(' + minute * 6 + 'deg)');
    $('.second').css('transform', 'rotate(' + second * 6 + 'deg)');
    setTimeout(time, 1000);
}

在以上的代码中，我们先获取当前的时间，然后根据时间计算时针、分针、秒针的角度，最后通过jquery来控制这三个指针的位置，实现时钟指针的不断运动。通过设置settimeout让页面每隔1秒运行一次time函数实现不断更新画面。

（4）总代码

最后，为了让这段代码可以顺利运行，我们将以上三种代码合并到同一个网页中，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>图片时钟特效</title>
    <link rel="stylesheet" href="clock.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="clock">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
    </div>
    <script>
        function time() {
            var now = new Date();
            var second = now.getSeconds();
            var minute = now.getMinutes();
            var hour = now.getHours() + minute / 60;
            $('.hour').css('transform', 'rotate(' + hour * 30 + 'deg)');
            $('.minute').css('transform', 'rotate(' + minute * 6 + 'deg)');
            $('.second').css('transform', 'rotate(' + second * 6 + 'deg)');
            setTimeout(time, 1000);
        }
        $(document).ready(function () {
            time();
        });
    </script>
</body>
</html>

3. 两条示例说明

同时实时获取当前位置、时间

function time() {
    var now = new Date();
    var second = now.getSeconds();
    var minute = now.getMinutes();
    var hour = now.getHours() + minute / 60;
    $('#datetime').text(now.toLocaleString());
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        $('#location').text("位置获取失败");
    }
    function showPosition(position) {
        var latlon = position.coords.latitude + ',' + position.coords.longitude;
        var url = 'http://api.map.baidu.com/geocoder/v2/?ak=你的APIKey&callback=?&location=' + latlon + '&output=json&pois=0';
        $.getJSON(url, function (data) {
            if (data.status == 0) {
                $('#location').text(data.result.formatted_address);
            }
        });
    }
    $('.hour').css('transform', 'rotate(' + hour * 30 + 'deg)');
    $('.minute').css('transform', 'rotate(' + minute * 6 + 'deg)');
    $('.second').css('transform', 'rotate(' + second * 6 + 'deg)');
    setTimeout(time, 1000);
}

在此示例中，我们通过navigator.geolocation来获取用户的地理位置，然后调用百度地图的api获取地理位置信息，并将位置信息和当前时间一并显示在页面上。

范例二
通过点击时钟切换为倒计时

<div class="clock">
    <div class="hour"></div>
    <div class="minute"></div>
    <div class="second"></div>
</div>
<button id="btn">切换倒计时</button>

<script>
    var mode = 'clock'; // 初始为时钟模式
    function time() {
        if (mode == 'clock') { // 时钟模式
            var now = new Date();
            var second = now.getSeconds();
            var minute = now.getMinutes();
            var hour = now.getHours() + minute / 60;
            $('.hour').css('transform', 'rotate(' + hour * 30 + 'deg)');
            $('.minute').css('transform', 'rotate(' + minute * 6 + 'deg)');
            $('.second').css('transform', 'rotate(' + second * 6 + 'deg)');
        } else { // 倒计时模式
            var now = new Date();
            var end = new Date('2022/2/14 00:00:00');
            var left = end - now;
            var days = parseInt(left / 1000 / 60 / 60 / 24);
            var hours = parseInt(left / 1000 / 60 / 60 % 24);
            var minutes = parseInt(left / 1000 / 60 % 60);
            var seconds = parseInt(left / 1000 % 60);
            $('#btn').text(days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒');
            if (left <= 0) {
                $('#btn').off('click').text('倒计时结束');
            }
        }
        setTimeout(time, 1000);
    }
    $(document).ready(function () {
        time();
        $('#btn').click(function () { // 点击按钮切换模式
            if (mode == 'clock') {
                mode = 'countdown';
                $('.hour, .minute, .second').hide();
            } else {
                mode = 'clock';
                $('.hour, .minute, .second').show();
                $('#btn').text('切换倒计时');
            }
        });
    });
</script>

在此示例中，我们增加了一个按钮，点击按钮可切换时钟模式和倒计时模式，初始时为时钟模式。在代码中通过mode变量来判断当前模式，根据当前模式不同，显示不同的内容，实现时钟和倒计时的切换效果。

以上是使用jquery制作图片时钟特效的完整攻略，希望对你有所帮助!

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery制作图片时钟特效 - Python技术站

jquery制作图片时钟特效

1. 基本原理

2. 制作步骤及注意事项

3. 两条示例说明

相关文章