Последние записи

made in programmersforum 8

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

28th
Янв

Конвертер валют на Javascript

Написать программу для конвертирования валют. Курсы валют должны находиться в локальной базе данных. Достаточно 10 самых популярных мировых валют.
Пользователь должен из выпадающих списков выбрать две валюты и ввести номинал, например 100 рублей. После нажатии кнопки «конвертировать» показать на выходе, сколько это будет во второй выбранной валюте, например 1,53 долларов.
js,html,php можно

(читать всё…)

Добавлено в JavaScript. Дата Январь 28th, 2018

3rd
Авг

Связать объект с формой

Как связать объект с формой? (читать всё…)

Добавлено в JavaScript. Дата Август 3rd, 2013

2nd
Авг

Цвет и размер шрифта в JavaScript

Как изменить размер и цвет шрифта,если это возможно, в коде JS? Например на жирный 18 и белый.

Naive


<script language="JavaScript"> day = new Date(); hour = day.getHours();
if (hour>=5 && hour<12) greeting = "Доброе утро"; else
{ if (hour>=12 && hour<18)  greeting = "Добрый день"; else
{ if (hour>=18 && hour<24)  greeting = "Добрый вечер"; else
{ if (hour>=0 && hour<5) greeting = "Доброй ночи"; } } }
greeting = ['<div style="color:#fff; font-weight:700; font-size:18px">',greeting,'</div>'].join('');
document.write(greeting);   </script>

Пост написан при поддержке Челябинского компрессорного завода.

тема на форуме

Добавлено в JavaScript. Дата Август 2nd, 2013

23rd
Июл

Как создать скрипт для вывода изображений с превью?

Интересует не сам дизайн рамочки, а то, чтобы нажав на превью, выходило изображение в большем формате, с возможностью навигации.
И еще, поскольку я совсем новичок, также не могу понять: например скрипт уже готов, в нем несколько файлов: php, css, js. Как его правильно ставить его на сайт, связав с файлами изображений? (читать всё…)

Добавлено в Пост-обзор. Дата Июль 23rd, 2011

5th
Июл

Как обрабатывать нажатия на ячейках таблицы?

нужно создать таблицу 10х10 и обрабатывать нажатия на ячейках (причем в зависимости от ячеек)… (читать всё…)

Добавлено в Пост-обзор. Дата Июль 5th, 2011

24th
Фев

Как скрыть какой либо объект на javascript?

как скрыть какой либо объект на javascript?
я знаю как делать это при помощи библиотеки jquery но хочу научится и на простом javascript. (читать всё…)

Добавлено в Пост-обзор. Дата Февраль 24th, 2011

16th
Фев

Как вызывать функции js из php

Здравствуйте. Как вызвать функцию описанную в js из php. (читать всё…)

Добавлено в Пост-обзор. Дата Февраль 16th, 2011

7th
Окт

Javascript который рисует таблицу безопасных цветов

В таблицы могут быть использованы только цвета со значениями 0, 51, 102, 153, 204, 255 в каждой из позиции кода цвета RGB, т.е. R может быть 0, 51, 102, 153, 204, 255; G – 0, 51, 102, 153, 204, 255; B – 0, 51, 102, 153, 204, 255.

Итого 216 вариантов. Делаете цикл, перебираете все возможные цвета и выводите их как ячейки таблицы.

<html>

<head>

<title>Таблица безопасных цветов</title>

<script>
function getTrueTable(contID)
{
var r = 0;
var g = 0;
var b = 0;
var table = “<table width=’100%’>”;
while (r <= 255)

{

g = 0;

while (g <= 255)

{

table += “<tr>”;

b = 0;

while (b <= 255)

{

table += “<td style=’width:88px; height:31px; background-color: rgb(”+r+“,”+g+“,”+b+“);color: rgb(”+(255-r)+“,”+(255-g)+“,”+(255-b)+“)’>RGB(”+r+“,”+g+“,”+b+“)                                     

      </td>”;

b += 51;

}

table += “</tr>”;

g += 51;

}

r += 51;

}

table += “</table>”;

document.getElementById(contID).innerHTML = table;

}

</script>

</head>

<body id=“truetable”>

<input type=“button” onclick=“getTrueTable(’truetable’);” value=“Хочешь таблицу правильных цветов? Тыч суда!”>

</body>

</html>

Тема на форуме

Добавлено в Пост-обзор. Дата Октябрь 7th, 2010

2nd
Июл

Анимация в WEB на JavaScript

Здравствуйте! В этой статье я хотел бы рассказать о создании анимации на веб-страницах с использованием скриптового языка программирования JavaScript, далее JS. Статья ориентирована на новичков.

Анимация на WEB страницах

Алексей Шульга

by Levsha100 http://www.programmersforum.ru/member.php?u=19268

По правде говоря я не являюсь поклоником JS да и вэб-программирования тоже, но родина сказала «Надо!» Я немного отошел от темы нашего сайта, ибо работы над ним еще ведутся и это, видимо, будет еще долго. Поэтому было решено написать цикл статей по JS и различным интересным трюкам.

Шаблон

Для начала нам необходимо создать заготовку- то место, куда мы будем внедрять скрипты, Вот она:

<html>

<head>

<title>Тестовая страничка</title>

</head>

<body>

</body>

</html>

Это обыкновенная HTML-страничка, я сохранил ее под именем Test.html .

Встраивание JS-скрипта

Итак, шаблон у нас есть, и теперь мы можем смело пробовать оживлять страничку с помощью скриптов, добавить JS-скрипт можно двумя основными способами- добавлением его непосредственно в веб-страницу, либо вынести его в отдельный файл, для наглядности я выбрал первый способ. Добавим скрипт в секцию body, после чего она примет вид:

<body>

//Тут находится JS-код

</script>

</body>

Для проверки можно заменить за комментированную строку такой строкой:

alert(”Hello, world” );

Этот код выведет [модальное] окно с текстом “Hello, world”.

Добавление объектов

Прежде чем мы займемся анимацией нужно что бы было то, что будет анимироваться, поэтому займемся созданием анимируемых объектов- для примера возьмем квадратные DIV-вы со стороной 10 пикселей. Прежде чем создавать собственно объекты для них необходимо задать стиль, это делается с помощью CSS. Пример:

<head>

<title>Тестовая страничка</title>

.obj1style{position:absolute; width:10; height:10; background-color: #00FF00}

</style>

</head>

Наиболее важным свойством является свойство position и именно его значение absolute -оно позволяет размещать объект, к которому применен данный стиль, в любой точке веб-страницы. Свойства width и height, как нетрудно догадаться, отвечают за высоты и ширину объекта соответственно. Цвет фона объекта- зеленый.

Теперь займемся собственно добавлением объектов, для этого необходимо заменить строку:

//Тут находится JS-код

на строки:

var obj_count=10; //Сколько у нас будет объектов

for (i=1;i<=obj_count;i++){ //Цикл от 1 до количества создаваемых объектов

document.write(’<div style=”left:’);

document.write(i*20+50);

document.write(’;top:50;”MsoBodyTextIndent” style=”margin-right: -2.75pt; text-indent: 0cm;”>

document.write(i);

document.write(’”>’+'</div>’);

//вот то самое место, именно тут мы вписываем в страницу 10 DIV-ов с классом obj1style идентификаторами с именами от obj1-1 до obj1-10. Все элементы располагаются на одной высоте, отступ от левой стороны страницы высчитывается по формуле i * 20 +50, где i-это номер элемента[1..10].

}

Вместо данного кода мы могли бы написать что-то вроде:

…

Но это неэффективно и некрасиво да и лень мне писать так много.

I like to move it или анимируем!

Самое интересное. Итак, для начала зададимся целью, что необходимо сделать. Я решил начать с простого – объекты будут летать в неком сосуде и при ударении об стенку они будут отскакивать

* Комментарий автора

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

Для начала после строки:

var obj_count=10;

добавим следующий код:

var VX= new Array(obj_count);

var VY= new Array(obj_count);

document.write(’<div style=”position:absolute; left:45; top:40; width:300; height:300; background:#bbbbbb;” id=”Area”></div>’);

Первые две строки создают два массива длиной 10 элементов, которые хранят значение скорости для каждого объекта. Третья же строка размещает на страничке “сосуд”, в котором будут летать наши “молекулы”, тут, в принципе, я думаю все знакомо и просто. Далее после строк начальной инициализации:

document.write(’;top:50;” id=”obj1-’);

document.write(i);

document.write(’”>’+'</div>’);

добавляем код, который будет задавать случайную скорость для каждого объекта

VX=Math.round(Math.random()*6)-3; if(VX==0){VX=1;}

VY=Math.round(Math.random()*6)-3; if(VY==0){VY=1;}

Условия “if” нужны для того что бы не было нулевых скоростей, то есть что бы небыло неподвижных объектов. Теперь перейдем к самому сердцу нашего аниматора- функции Timer она периодически ( с интервалом 50мс вызывает функцию Animate, но о ней позже.

Функция выглядит так:

function Timer()

{

setTimeout( function(){Animate();setTimeout(arguments.callee, 50);}, 0);

}

Эта функция должна вызываться(стартовать) при загрузке страницы для того что бы обеспечить такую возможность мы подправим тег body, итоговый вид после изменений показан ниже:

Вроде разобрались, пора браться за последнюю в данном уроке и самую массивную функцию – функцию Animate, вот полный ее текст:

function Animate()

{

for(i=1;i<=obj_count;i++){

document.getElementById(”obj1-”+i).style.left=parseInt(document.getElementById(”obj1-”+i).style.left)+VX;

document.getElementById(”obj1-”+i).style.top=parseInt(document.getElementById(”obj1-”+i).style.top)+VY;

if( parseInt(document.getElementById(”obj1-”+i).style.left) <= parseInt(document.getElementById(”Area”).style.left) ){

document.getElementById(”obj1-”+i).style.left=document.getElementById(”Area”).style.left;

VX*=-1;

}

if( parseInt(document.getElementById(”obj1-”+i).style.left)+10 >= parseInt(document.getElementById(”Area”).style.left)+parseInt(document.getElementById(”Area”).style.width) ){

document.getElementById(”obj1-”+i).style.left=parseInt(document.getElementById(”Area”).style.left)+parseInt(document.getElementById(”Area”).style.width)-10;

VX*=-1;

}

if( parseInt(document.getElementById(”obj1-”+i).style.top) <= parseInt(document.getElementById(”Area”).style.top) ){

document.getElementById(”obj1-”+i).style.top=document.getElementById(”Area”).style.top;

VY*=-1;

}

if( parseInt(document.getElementById(”obj1-”+i).style.top)+10 >= parseInt(document.getElementById(”Area”).style.top)+parseInt(document.getElementById(”Area”).style.height) ){

document.getElementById(”obj1-”+i).style.top=parseInt(document.getElementById(”Area”).style.top)+parseInt(document.getElementById(”Area”).style.height)-10;

VY*=-1;

}

Как она работает? Очень просто! В цикле мы пробегаем по всем элементам, при этом выполняем следующие действия:

1. Прибавляем к X координате объекта его горизонтальную скорость, которую берем из массива VX.

2. Прибавляем к Y координате объекта его вертикальную скорость, которую берем из массива VY.

3. Проверяем, не вышел ли левый край объекта за левый край сосуда, если вышел, то ставим объект на границу и инвертируем скорость. Т.е. если летел, к примеру, шарик и он вылетел за левую границу, то мы возвращаем шар на край сосуда и пинаем его в обратную сторону, так, что модуль его горизонтальной скорости не меняться- меняется только знак

4. Аналогично, только мы проверяем вылет за правую границу.

5. В принципе тоже самое, только здесь все происходить в вертикальной плоскости- мы определяем вылет за верхнюю границу и если таковой факт был инвертируем вертикальную составляющую скорости.

6. Аналогично действию №5, за исключением того, что проверка происходит на вылет за нижнюю грань.

Смело копируем функцию перед функцией Timer() и пробуем запустить нашу маленькую демонстрацию (см. рисунок).

Рис. Тестовая анимация.

Заключение

В этой статье я попытался объяснить базовые принципы анимации с помощью JavaScript. Если Вам что-то непонятно, то не расстраивайтесь в следующих уроках курса я на более интересных и практичных примерах покажу как делать практичные вещи, которые будет не стыдно поставить на свой сайт а пока экспериментируйте! Также хотелось бы написать статью о оптимизации кода, ибо наш вариант далеко не идеален, поэтому ждите.

Если возникнут какие-либо вопросы то обращайтесь на форум www.programmersforum.ru, либо пишите на почтовый ящик редакции. Я или кто-либо другой попытаемся Вам помочь.

Статья из четвертого выпуска журнала “ПРОграммист”.
Скачать этот номер можно по ссылке.
Ознакомиться со всеми номерами журнала.

Обсудить на форуме – Анимация в WEB на JavaScript

Добавлено в Журнал. Дата Июль 2nd, 2010

24th
Апр

Отправить методами JQuery на сервер массив данных

//************ Перменные *************//
// Период обновления
var doloadtime=”3000″;
// Переменная таймоута отправки запросов
var timeout=null;
// Переменная запроса в виде массива
var request={};
//************************************//

//— Функция формирования запроса на отправку —//
function SendRequest(action,id){
     // Сбрасываем таймаут
     if (timeout) clearTimeout(timeout);
     // Записываем данные для запроса в переменную
     if (id) request={’id’: id};
     if (action) request=request&
     doLoad();
}
//————————————————//

//— Функция отправления запроса —//
function doLoad(){
     // Сбрасываем таймаут
     if (timeout) clearTimeout(timeout);
     $.load(’index.php’,
         request,
         onAjaxSuccess
         );
}
//———————————-//

//— Функция обработки поступившего ответа на запрос —//
function onAjaxSuccess(data) {
     // Выполняем лученный ответ
     eval(data);
     // Сбрасываем тайаут и устанавливаем новый
     if (timeout) clearTimeout(timeout);
     timeout = setTimeout(’doLoad()’, doloadtime);
}
//——————————————————-//

Посмотреть тему на форуме

Добавлено в Топик-обзор. Дата Апрель 24th, 2010