Question

我正在尝试从jsfiddle复制一些代码，它是一个径向加载栏。我想将它放入html / css文件并弄乱代码，但我似乎无法让它工作。它只显示空白，不显示任何内容。 JSFiddle链接是http://jsfiddle.net/andsens/d7vKd/。谢谢你的帮助：）

以下是我放入HTML文档的HTML / Javascript的确切副本：

<html>
<link rel="stylesheet" type="text/css" href="loaderCss.css">
<head>
<script src="jquery.js"></script>
<script type="text/javascript">

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
window.randomize = function() {
    $('.radial-progress').attr('data-progress', Math.floor(Math.random() * 100));
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);


</script>
</head>

<body>

<div class="radial-progress" data-progress="0">
    <div class="circle">
        <div class="mask full">
            <div class="fill"></div>
        </div>
        <div class="mask half">
            <div class="fill"></div>
            <div class="fill fix"></div>
        </div>
        <div class="shadow"></div>
    </div>
    <div class="inset">
        <div class="percentage"></div>
    </div>
</div>

</body>

</html>

和CSS文件：

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);

.radial-progress {
    @circle-size: 120px;
    @circle-background: #d6dadc;
    @circle-color: #97a71d;
    @inset-size: 90px;
    @inset-color: #fbfbfb;
    @transition-length: 1s;
    @shadow: 6px 6px 10px rgba(0,0,0,0.2);
    @percentage-color: #97a71d;
    @percentage-font-size: 22px;
    @percentage-text-width: 57px;

    margin: 50px;
    width:  @circle-size;
    height: @circle-size;

    background-color: @circle-background;
    border-radius: 50%;
    .circle {
        .mask, .fill, .shadow {
            width:    @circle-size;
            height:   @circle-size;
            position: absolute;
            border-radius: 50%;
        }
        .shadow {
            box-shadow: @shadow inset;
        }
        .mask, .fill {
            -webkit-backface-visibility: hidden;
            transition: -webkit-transform @transition-length;
            transition: -ms-transform @transition-length;
            transition: transform @transition-length;
            border-radius: 50%;
        }
        .mask {
            clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
            .fill {
                clip: rect(0px, @circle-size/2, @circle-size, 0px);
                background-color: @circle-color;
            }
        }
    }
    .inset {
        width:       @inset-size;
        height:      @inset-size;
        position:    absolute;
        margin-left: (@circle-size - @inset-size)/2;
        margin-top:  (@circle-size - @inset-size)/2;

        background-color: @inset-color;
        border-radius: 50%;
        box-shadow: @shadow;
        .percentage {
            width:       @percentage-text-width;
            position:    absolute;
            top:         (@inset-size - @percentage-font-size) / 2;
            left:        (@inset-size - @percentage-text-width) / 2;

            line-height: 1;
            text-align:  center;

            font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
            color:       @percentage-color;
            font-weight: 800;
            font-size:   @percentage-font-size;
        }
    }

    @i: 0;
    @increment: 180deg / 100;
    .loop (@i) when (@i <= 100) {
        &[data-progress="@{i}"] {
            .circle {
                .mask.full, .fill {
                    -webkit-transform: rotate(@increment * @i);
                    -ms-transform: rotate(@increment * @i);
                    transform: rotate(@increment * @i);
                }   
                .fill.fix {
                    -webkit-transform: rotate(@increment * @i * 2);
                    -ms-transform: rotate(@increment * @i * 2);
                    transform: rotate(@increment * @i * 2);
                }
            }
            .inset .percentage:before {
                content: "@{i}%"
            }
        }
        .loop(@i + 1);
    }
    .loop(@i);
}

Answer 1

$('head style[type="text/css"]').attr('type', 'text/less');

这没有任何效果，因为您没有<style>元素。

它也没有任何意义。如果样式元素包含LESS而不是CSS，那么它应该首先正确标记。

less.refreshStyles();

这会引发引用错误，因为您尚未定义less，因此其余代码将无法运行。

如果确实......

setTimeout(window.randomize, 200);

这是不安全的。它假设页面的其余部分需要多长时间才能加载。您应该使用就绪处理程序。

$('.radial-progress').click(window.randomize);

这没有任何作用。运行该代码时，文档中没有任何元素成为该类的成员。你应该把它放在一个准备好的处理程序中。

从JSFiddle发出复制代码

1 个答案: