Стилизация счетчика.
Ребят, помогите набросать скриптик. Суть из базы через переменную показывается какое то число (например 0123456) и вот надо чтоб с помощью скрипта этому числу каждой цифре присваивался класс. вот такого вида надо:
<span class="value"> <span class="number">0</span> <span class="number">1</span> <span class="number">2</span> <span class="number">3</span> <span class="number">4</span> <span class="number">5</span> <span class="number">6</span> </span> вот каждому числу присваивается класс NUMBER. Вот такая задача, помогите кто сможет. Заранее спасибо |
for(var len=chislo.length, html=[len-1], i=0; i<len; i++)
html[i]='<span class="number">'+chislo.charAt(i)+'</span>';
span_value.innerHTML=html.join('');
А выдавать нормальный массив твой сервер не умеет? |
Это обычный счетчик статей, он просто записывает в базу количество статей и все
|
И при этом каждой цифре надо один и тот же класс запузырить? Ты расскажи глобальную идею такого дизайна, может я тоже к себе приделаю. Хотя нет, времена показывать счетчики давно канули. )))
|
Да один и тот же класс присвоить надо. Что то не работает этот код
|
Типа там отступы сделать или что? Для текстовых нод дофига стилей, но если уж совсем хочется все запихать в спаны, то хотя бы нарисуйт такой css
span.value {
/* все про родительский элемент */
}
span.value > span {
/*
тут стили для всех спанов первого порядка
*/
}
Чтобы не прописывать каждый раз одно и то же. |
Цитата:
ЗЫ Да не нужен такой скрипт вообще. Это бред. Ты скажи какой тебе дизайен нужен для счетчика, и увидишь, что все можно сделать обычным css |
Да стиль у меня уже нарисован полностью как я хочу..а вот реализация через скрипт не получается
|
в консоле посмотрел, не присваивает класс числам
|
Вложений: 1
Вот на картинки стиль который я хочу.
0173 -это я руками прописал вот код <span class="value"> <span class="number">0</span> <span class="number">1</span> <span class="number">7</span> <span class="number">3</span> </span> а 104 это переменная {%$counter.messages_all%} выводит вот ее я и хочу стилизовать |
Перехоти назначать класс каждому спану и скрипт будет таким
span.value.innerHTML = '<span>'+chislo.split().join('</span><span>')+'</span>';
Или пиши два раза
span.value.innerHTML = '<span class="number">'+chislo.split().join('</span><span class="number">')+'</span>';
Господи, какой-то бред... |
Почему бред то?
|
Я написал цикл поняв так, что тебе надо классы пронумеровать. В этом есть хоть какой-то смысл. Но пихать каждое число в спан - это бредятина.
|
Цитата:
Это если бы <span class'"number-1">1</span> <span class'"number-4">4</span> <span class'"number-6">5</span> <span class'"number-8">8</span> Тогда бредом будет дизайн, а сейчас бредом является сама конструкция. ЗЫ Могу себе представить какой у тебя там css, при таком понимании CASCADING style sheet )) |
ну мне и надо чтоб все цифры одного стиля были.. задача чтоб присвоить этот стиль каждой цифре.. Если есть другое какое то решение подскажи
|
Вот смотри, задача поменять стили в элементах хз где внутри родительского элемента. Если писать каждому свой стиль, то придется в скрипте искать и оперировать двумя или большим количеством элементов одновременно, а если в цсс записать такие вот рулезы
div.a-text-up h1 i:before {content:'\f102';}
div.a-text-up h1+div {max-height:300px;}
div.a-text-down h1 i:before {content:'\f103';}
div.a-text-down h1+div {max-height:0px;}
То получаешь один элемент и оперируешь одним правилом. |
Цитата:
|
могу показать если интересно:
.number {background-color: #5a6275;color: #e7eeff;text-shadow: 0px 4px 0px rgba(0,0,0,0.21);}
.number {-webkit-transition: background .4s;transition: background .4s;display: inline-block;vertical-align: top;padding: 0 5px;border-radius: 4px;font-size: 2.43333em;position: relative;z-index: 0;}
.number:before {content: '';position: absolute;z-index: -1;width: 100%;height: 1px;left: 0;top: 50%;}
.number:before {background-color: #a0a9c0;}
|
<style>
.value {
font-weight:700;
font-size:x-small;
padding:10px;
background:#ddd;
}
.value span {
font-weight:300;
font-size:normal;
background: #eee;
letter-spacing:10px;
padding:5px 5px 5px 10px;
}
</style>
<span class="value">
Тут у нас счетчик
<span>0716262</span>
|
Цитата:
Я так и думал, что тебе нужны отступы между цифрами. Ну рисуй спаны, хотя можешь обойтись любым другим коротким тегом типа b или i |
тоже ведь как вариан ты прав, так проще. Надо подумать над этим
|
Ради чего оформлять каждую циферку, но если так хочется, то вот тебе.
<style>
.value {
padding:20px;
outline:1px solid red;
}
.value span {
border:1px solid #aaa;
border-radius: 3px;
background: #eee;
text-align:center;
line-height:15px;
padding: 0 3px;
margin: 0 3px;
}
</style>
<span class="value"></span>
<script>
var chislo='123653832';
document.querySelector('.value').innerHTML = '<span>'+chislo.split('').join('</span><span>')+'</span>';
</script>
|
Спасибо...то что надо
|
Если ты будешь прописывать рулезы каждому блин элементу, у тебя никакой фантазии не хватит. CSS потому и C, что позволяет элементам наследовать целый ряд свойств от родителей, и по селекторам браузер сам найдет нужный элемент даже если у него нет никаких class="". Конечно тогда верстка получается сшита со стилями, но обычно все сшивают один раз и надолго. Только там, где что-то меняется, имеет смысл втыкать классы непосредственно, чтобы иерархия не колебла.
То есть например figure.c-tmb > a > img {/* стили для картинки */} это значит в хтмле должно быть <figure class="c-tmb"><a><img>... Чтобы поменять оформление img, можно или <figure class="c-tmb mod-tmb"> и пишешь как изменить в mod-tmb, или <div class="mod-tmb"><figure><a><img> и в div.mod-tmb>figure a img пишешь уже чего надо. PS Это ты бустрапов не видел, и ихними LESS и SASS )) |
все я видел и работаю с бутстрапом и материализе.
|
Цитата:
|
| Часовой пояс GMT +3, время: 16:26. |