从JSFiddle复制代码问题

Issue Copying Code From JSFiddle

本文关键字：问题 代码 复制 JSFiddle      更新时间：2023-09-26

我正试图从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);
}

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

这不会有任何作用，因为您没有<style>元素。

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

less.refreshStyles();

这引发了一个引用错误，因为您还没有定义less，所以其余的代码不会运行。

如果是…

setTimeout(window.randomize, 200);

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

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

这毫无作用。当您运行该代码时，文档中没有任何元素是类的成员。你应该把它放在一个现成的处理程序中。

相关文章：