Код jsfiddle не работает на моем сайте

Question

Код jsfiddle не работает на моем сайте

0

HTML:

<div id="container">
<div id="bar">
</div>
</div>

CSS:

#container {
width: 20px;
height: 150px;
position: relative;

}
#bar {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
bottom: 0px;
}

JS:

function Bar(element) {
this.barEl = element;
this.progress = 100;
}

Bar.prototype.setProgress = function (p) {
if(p >= 0) {
    this.progress = p;
    this.barEl.style.height = this.progress + "%";
}
}

var barObj = new Bar(document.getElementById('bar'));
setInterval(function () {
barObj.setProgress(barObj.progress - 10);
}, 1000);

Этот код из jsfiddle http://jsfiddle.net/Mp7R3/ не работает, когда я копирую вставку кода, но он отлично работает на jsfiddle. Возможно, у меня есть проблема с onLoad, но я не знаю, как ее решить. Я пробовал $ (document).ready(function(), но это не помогло.

Rushi 13 март 2014, в 18:24

Источник

0

Если вы пробовали $(document).ready(function() то это не сработает, поскольку в этой строке отсутствует окончательное закрытие ) . И вы уверены, что включили правильные теги HTML для своего HTML? Например, <html> , <body> и т. Д.
TylerH 13 март 2014, в 16:59
0

Да, я включил все HTML-теги, а также закодировал правильный синтаксис для $ (document) .ready (function () {});
Rushi 13 март 2014, в 17:05
0

@Rushi бар должен уменьшаться / уменьшаться в размере? Если так, то, кажется, работает на меня.
Mathew MacLean 13 март 2014, в 17:36

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Если вы пробовали $(document).ready(function() то это не сработает, поскольку в этой строке отсутствует окончательное закрытие ) . И вы уверены, что включили правильные теги HTML для своего HTML? Например, <html> , <body> и т. Д.
Да, я включил все HTML-теги, а также закодировал правильный синтаксис для $ (document) .ready (function () {});
@Rushi бар должен уменьшаться / уменьшаться в размере? Если так, то, кажется, работает на меня.

Rofez · Answer 1 · 2014-03-13T16-11-00.000Z

Убедитесь, что вы не забыли скрипт для вызова jQuery в <head> вашего кода:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Вы также можете попытаться поместить код в нижней части кода, чтобы он мог запускаться только в том случае, если загружена полная страница.

Я также пишу ниже простейшую страницу, чтобы заставить этот код работать (как правило, вы должны отделять HTML, CSS и JS), поэтому вы можете сравнить его со своим:

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

        <title>- That Work!!! -</title>

        <style>

        #container {
            width: 20px;
            height: 150px;
            position: relative;   
        }

        #bar {
            width: 100%;
            height: 100%;
            background-color: red;
            position: absolute;
            bottom: 0px;
        }

        </style>

    </head>
    <body>
        <div id="container">
            <div id="bar">
            </div>
        </div>
    </body>

    <script type="text/javascript">
        function Bar(element) {
            this.barEl = element;
            this.progress = 100;
        }

        Bar.prototype.setProgress = function (p) {
            if(p >= 0) {
                this.progress = p;
                this.barEl.style.height = this.progress + "%";
            }
        }

        var barObj = new Bar(document.getElementById('bar'));
        setInterval(function () {
                barObj.setProgress(barObj.progress - 10);
        }, 1000);

    </script>
</html>

Надеюсь, это поможет вам!