Задать количество символов перед номером страницы!
<input type='text' id='zap' maxlength='1'>
<input type='number' id='kol'> <input type='number' id='page'> <div id='output'></div> В первом поле пользователь вводит символ-заполнитель, например: * Во втором количество таких символов, например: 8 В третьем вводит номер страницы, например: 7 В итоге в div будет: ********7 Вот заготовка скрипта, дальше - без понятия... (
var zap = document.getElementById('zap').value;
var kol = document.getElementById('kol').value;
var page = document.getElementById('page').value;
var output = document.getElementById('output');
???
output.innerHTML = ??? + 'page'
Надеюсь на вашу помощь, товарищи! |
<style>
label{
display:block;
width:200px;
text-align:right;
margin:3px;
}
</style>
<form id=inp style="width:400px">
<label>Заполнитель: <input type='text' id='zap' maxlength='1'/ value='*'></label>
<label>Число символов зап-ия: <input type='number' min=0 id='kol' value='0'/></label>
<label>Номер Страницы: <input type='number' min=1 id='page' value='1'/></label><br>
<div id='output'></div>
</form>
<script type="text/javascript">
document.querySelector('#inp').oninput=function(){
var zap = document.getElementById('zap').value;
var kol = +document.getElementById('kol').value;
var page = +document.getElementById('page').value;
var output = document.getElementById('output');
var dop='';
for(var i=0;i<kol;i++)dop+=zap.replace(/\s/,' ');
output.innerHTML = dop + page;
}
</script>
|
А как организовать динамическое изменение результата и без обновления странички?
kol.onchange ? Deff, а насколько быстр ваш способ? Вот тут я нашел скрипт для создание префикса перед числом: http://www.coding4.net/post/prefix-i...avascript.aspx
function PrefInt(number, len) {
return (Array(len).join('0') + number).slice(-length);
}
document.writeln(PrefInt(79, 4));
Можно ли сюда привязать поле kol. Типа .join('i') var i = document.getElementById('kol').value; Если Вас не затруднит, объясните, что лучше по быстродействию. Спасибо |
Просто интересно какие еще могут быть варианты )
|
Цитата:
alert("0".repeat(15));
|
Минимализм и быстродействие, вот что нам нужно, правда Lemme )
Lemme, а как теперь вывести эти нули в div без алертов? |
Цитата:
<style>
label{
display:block;
width:200px;
text-align:right;
margin:3px;
}
</style>
<form id=inp style="width:400px">
<label>Заполнитель: <input type='text' id='zap' maxlength='1'/></label>
<label>Число символов зап-ия: <input type='number' id='kol'/></label>
<label>Номер Страницы: <input type='number' id='page'/></label><br>
<div id='output'></div>
</form>
<script type="text/javascript">
document.querySelector('#inp').oninput=function(){
var zap = document.getElementById('zap').value;
var kol = +document.getElementById('kol').value;
var page = document.getElementById('page').value;
var output = document.getElementById('output');
if(page&&page>0) output.innerHTML = zap.repeat(kol) + page;
}
</script>
На всякий случай, советую обратить внимание на: https://developer.mozilla.org/en-US/.../String/repeat |
Lemme,
Может лучше Array(kol).join(zap) |
Teamur,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
label{
display:block;
width:200px;
text-align:right;
margin:3px;
}
</style>
<form id=inp style="width:400px">
<label>Заполнитель: <input type='text' id='zap' maxlength='1'/></label>
<label>Число символов зап-ия: <input type='number' id='kol'/></label>
<label>Номер Страницы: <input type='number' id='page'/></label><br>
<div id='output'></div>
</form>
<script type="text/javascript">
function PrefInt(number, len, prefix) {
return (Array(len).join(prefix) + number).slice(-len);
}
document.querySelector('#inp').oninput=function(){
var zap = document.getElementById('zap').value;
var kol = +document.getElementById('kol').value;
var page = +document.getElementById('page').value;
var output = document.getElementById('output');
var dop='';
if(page&&page>0)output.innerHTML = PrefInt(page, kol, zap);
}
</script>
</body>
</html>
|
Рони, при изменении числа символов должно быть (дб) динамическое изменение на выходе количества единиц заполнителя. Спасибо.
Если что - акцент на последние версии браузеров, другими словами (дс) полифилы пока не нужны. И как в данном примере по быстродействию? ) |
Deff, хух, отредактировал, а я то думаю, либо меня уже выключает, либо что-то не то=) Сидел мозг себе выносил=)
мб и лучше, хотя чем? p.s я лишь показал очередной вариант =) Цитата:
|
Цитата:
|
Teamur,
1. Думаю однократный скрипт ? 2. Array(n) чуть быстрее repeat (По крайней мере в XP в Опере, мозилле, Хроме, если посмотреть, он на базе Array построен) |
Deff, многократный.
По поводу репита, со временем наверное будут оптимизации, ведь это новая технология...! И вообще вместо ручного ввода количества символов заполнителя можно использовать колесо мыши! Крутанул вверх -> звездочек стало больше и наоборот... Так вот в связи с этим встает вопрос быстродействия. |
Deff, windows 8.1, chrome. Других браузеров под видной нету(
Цитата:
|
Цитата:
|
Deff, разве что так =)
|
Цитата:
У мну он на базе Array |
Lemme, на всякий
либо repeat 4 либо Array 6 :) |
рони, да эт ясно, просто лень было менять цифры, на результат то не повлияет :D
|
Ксать поставил начальные занчения в input - меньше проверок
Получилось с \s ======================================== /Блин бесит, хотел к НГ АPI доделать к своему ресурсу, ДДосят гады второй день!(страдаю тут фигнёй)/ |
Deff, пострадать фигней - иногда тоже полезно =)
|
|
рони,
:D О, не уж то мы такие старые на этом сайте ?? Ужс, я думал хоть на этом менее 4 лет... ужос |
Спасибо всем за ответы! С Новым Годом, товарищи! ))
|
| Часовой пояс GMT +3, время: 14:00. |