Форум

Teamur · #1 (**permalink**) 29.12.2015, 21:58

<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'

Надеюсь на вашу помощь, товарищи!

Deff · #2 (**permalink**) 29.12.2015, 22:06

<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/,'&nbsp;');
output.innerHTML = dop + page;
}
</script>

Teamur · #3 (**permalink**) 29.12.2015, 23:02

А как организовать динамическое изменение результата и без обновления странички?
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;

Если Вас не затруднит, объясните, что лучше по быстродействию. Спасибо

Teamur · #4 (**permalink**) 29.12.2015, 23:18

Просто интересно какие еще могут быть варианты )

Lemme · #5 (**permalink**) 29.12.2015, 23:30

Цитата:

Просто интересно какие еще могут быть варианты )

alert("0".repeat(15));

Teamur · #6 (**permalink**) 29.12.2015, 23:33

Минимализм и быстродействие, вот что нам нужно, правда Lemme )
Lemme, а как теперь вывести эти нули в div без алертов?

Lemme · #7 (**permalink**) 29.12.2015, 23:50

Цитата:

а как теперь вывести эти нули в 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

Deff · #8 (**permalink**) 30.12.2015, 00:05

Lemme,
Может лучше Array(kol).join(zap)

рони · #9 (**permalink**) 30.12.2015, 00:10

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>

Teamur · #10 (**permalink**) 30.12.2015, 00:16

Рони, при изменении числа символов должно быть (дб) динамическое изменение на выходе количества единиц заполнителя. Спасибо.

Если что - акцент на последние версии браузеров, другими словами (дс) полифилы пока не нужны. И как в данном примере по быстродействию? )

Форум

Справочник

Discord чат

Курсы javascript