美文网首页程序员
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