美文网首页程序员
jQuery 矩形内数字逆时针旋转

jQuery 矩形内数字逆时针旋转

作者: Vic_123 | 来源:发表于2019-03-11 21:37 被阅读0次

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <style type="text/css">

        .mytable

        {

width:300px;

        }

.mytable td{height:100px;border:1px solid #aaccff;text-align:center;}

.mytable td label{font-size:60px;font-weight:bold;color:Red;}

.box{border:1px solid #aaccff;padding:10px;margin:5px 3px;line-height:25px;}

    <script src="jquery-1.12.4.js">

        $(function () {

window.setInterval(fun, 300);

        });

        function fun() {

$("#table1 label")

//监听事件:获取label的值集合

                .map(function (value, index) {

//获取到单个label的文本值

                var $txt =$(index).text();

                //将其转换为int型

                    $txt =parseInt($txt);

                if ($txt ==8) {

//给当前label赋值

                    $(index).text("1");

                }

else {

//给当前label赋值

                    $(index).text($txt +1);

                }

});

        }

<body style="font-size:12px;">

    <div class="box">

        请编写javascript代码,完成如下功能要求:

        1.每隔300毫秒,让所有的数字逆时针旋转

    <div class="box">

        <table id="table1" class="mytable">

                    <label id="Label1">1

                    <label id="Label2">2

                    <label id="Label3">3

                    <label id="Label8">8

                    <label id="Label4">4

                    <label id="Label7">7

                    <label id="Label6">6

                    <label id="Label5">5

相关文章

网友评论

    本文标题:jQuery 矩形内数字逆时针旋转

    本文链接:https://www.haomeiwen.com/subject/momipqtx.html