Задание: конверт
Вложений: 1
Написать функцию для создания квадратов любого размера с подобным рисунком.
:) |
|
<body></body>
<script>
var height = 20, width = 20, newRow, newCell;
var tbl = document.createElement('table');
for (var line=0;line < height;line++){
newRow = document.createElement('tr');
for(var col=0;col<width;col++){
newCell= document.createElement('td');
if(line==0||line==height-1||col==0||col==width-1|| (line==col) || (width-1-col==line)) {newCell.textContent = '#'; }
newRow.appendChild(newCell);
}
tbl.appendChild(newRow);
}
document.querySelector('body').appendChild(tbl);
</script>
|
destus,
Удивительно, до чего похоже - увидел, уже когда сохранил. Только у меня не совсем квадрат - но зато более напоминает картинку рони |
рони,
конверт, это альбомная, а не портретная ориентация, если только ваш конверт не есть специальный. :D |
destus,
:thanks: Dilettante_Pro, :thanks: задание выполнено |
:write: :)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
font-size: 24px;
line-height: 24px;
text-align: center;
padding: 0;
margin: 0;
}
span{
width: 12px;
display: inline-block;
}
</style>
</head>
<body>
<script>
function fn(a)
{
var b = a - 1, str = "";
for (var i=0; i<a; i++) {
for (var j=0; j<a; j++) {
str += j + i != b && i != b && j !=b && i != j && j && i ? "<span></span>" : "#" ;
}
str += "<br>"
}
document.write(str)
}
fn(18)
</script>
</body>
</html>
|
рони,
Цитата:
|
Dilettante_Pro,
:no: :yes: :) |
рони,
на работу устраиваетесь? |
Сейчас доступна функция repeat для строки, можно и в одном цикле с итерацией равной половине входного параметра (для нечетного можно тоже условие описать) повторить нужно необходимое число раз. Если бы еще была доступна функция для отражения строки, тогда склеить ее с полученной.
|
j0hnik,
это был five o’clock для форумчан :) жаль что вы не успели в этот раз, не сомневаюсь, вы бы легко нашли решение ... :) |
<html>
<head>
<style>
body{
font-size: 24px;
line-height: 24px;
text-align: center;
}
</style>
</head>
<body>
<script>
function fn(a) {
for(var i=0, k = a/2-1, s = ['*'.repeat(a)+'\n']; i < k; i++) {
s.push('*'+' '.repeat(i)+'*'+' '.repeat(a - 4 - 2 * i)+'*'+' '.repeat(i)+'*\n');
}
document.write('<pre>'+s.join('')+s.reverse().join(''))
}
fn(14)
</script>
</body>
</html>
Была бы string.reverse(), упаковали половину в строку, присоединили к ней развернутую и готово. |
laimas,
:thanks: |
laimas,
fn(15) ??? Цитата:
|
рони,
я же писал - для четных, а для нечетных надо добавить проверку на четность и корректировать число итераций и количество повторений пробелов внутри, я так думаю. Мне же не надо устраиваться на работу, я тезис выдвинул, а кому охота руки размять, пусть правят. :D |
А нет, не только число итераций и пробелов, еще у развернутого массива нужно будет удалять первый элемент, вернее выгоднее последний удалить перед реверсом. Вроде бы так.
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
font-size: 24px;
line-height: 24px;
text-align: center;
padding: 0;
margin: 0;
}
b{
width: 12px;
display: inline-block;
}
</style>
</head>
<body>
<script>
function fn(a){
var str = "";
for (var i=0; i<a; i++) {
for (var j=0; j<a; j++)
str += (i==0||i==a-1||j==i||j+i==a-1||j==0||j==a-1)?"<b>#</b>":"<b> </b>";
str += "<br>";
}
document.write(str);
}
fn(18);
</script>
</body>
</html>
|
j0hnik,
:dance: :victory: |
Для любого
<html>
<head>
<meta charset="utf-8">
<style>
body{
font-size: 24px;
line-height: 12px;
text-align: center;
}
</style>
<script>
function fn(a) {
var o = document.querySelector('pre');
if(a > 4) {
for(var i=0, k = a & 1 ? Math.floor(a/2) : a/2-1, s = ['*'.repeat(a)+'\n']; i < k; i++) {
s.push('*'+' '.repeat(i)+(!(a & 1) || i + 1 < k ? '*'+' '.repeat(a - 4 - 2 * i) : '')+'*'+' '.repeat(i)+'*\n');
}
o.textContent = s.join('')+(a & 1 ? s.slice(0, -1) : s).reverse().join('')
} else o.textContent = "Фиг вам!";
}
</script>
</head>
<body>
<input oninput="fn(this.value)" />
<pre></pre>
</body>
</html>
|
laimas,
:thanks: :victory: |
на https://www.codewars.com есть интересные паззлы
|
рони,
а я еще в перерыве и заморочился проверить. ) Как выполняется repeat()? По идее это должен быть цикл, а значит их будет много. Но. От фонаря попробовал запустить ваш код с параметром 12345 и свой. У меня ковыряло в районе 20 сек, ваш закончился крахом. 1234 у меня практически сразу, ваш не стал ждать пока что-то появится, 123 без проблем. |
Цитата:
смотри правильные решения буферизации в примерах . j0hnik, Dilettante_Pro, destus, и твой конечно. P.S. слегка исправил, но 12345 слишком большая величина, для моего кода. |
laimas,
тут дело в не в циклах и репитах, репит как метод затратные простого цикла. Дело тут в отрисовке, а именно в методе textContent, который для таких объемов работает гораздо эффективнее. |
Цитата:
|
Цитата:
посмотрел сейчас репит для таких объемов таки лучше цикла, но разница не критична. а вот document.write как раз таки и жрет память. |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Цитата:
|
Цитата:
|
Откройте системный монитор и запустите свой код с параметром пятизначным, и смотрите как расходуется память - неравномерно, с большими всплесками пиков, и если комп нагружен, и браузеру не так и много перепадает, то конечно кончается все крахом, хотя средний расход памяти невелик.
С повтором строки расход памяти меньше, и намного равномернее, и работает вплоть до значений allocation size overflow. А ведь в обоих случаях готовятся строки, пусть и хранение разное, и в два раза короче, но тоже же не семечки. ) PS. Блин, не память, а загруженность процессора. |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
</html>
<script>
const a=16;
x='X'
for(let i=0;i<a;i++){
let m=[...Array(a)]
if (!(i%(a-1))){m=m.map(()=>x)}
else {m[0]=m[a-1]=m[i]=m[a-1-i]=x}
document.write('<pre>',...m.map(item=>item===x?item:' ').join(' '),'</pre>')
}
</script>
|
| Часовой пояс GMT +3, время: 18:20. |