|
   |
| Форум » uCoz » Помощь по uCoz » Страничка 404 (Изи тема) |
| Страничка 404 |
Дата: Суббота, 2015-05-16, 18:25 | Сообщение # 1
В общем скачал шаблончик странички 404 - Клик и в голову как всегда пришла умственно-отсталая идея. Она заключается в том, что после каждой перезагрузки 404 странички, картинка котика менялась на другую (Не обязательно должно открывать котика, котик взят для примера), без повторений (То есть "картинка1" не идет после "картинка1"). Скрипт как делать - нашел, но я с детства дурачок, не умею воплощать идеи. Кому станет интересно сделать эту штуковину, буду очень благодарен.
Код 404 с котиком: <!DOCTYPE html> <html> <head> <title>Страница не найдена</title> <meta name="robots" content="noindex" /> <style type="text/css"> html {height: 100%;} body {height:100%;margin:0; padding:0;background:#FFF url('404/404.png') right bottom no-repeat ;} div#table{display:table;width:100%;height:100%;} div#row{display:table-row;width:100%;height:100%;} div#cell{display:table-cell;height:100%;width:100%;vertical-align:middle;} h1 {margin:0px;margin-bottom:30px;font-size:23px;font-weight:bold} a {color:#27579E;text-decoration:none} a:hover {color:#0E1D34;text-decoration:none} .tx {width:700px;padding:10px;font-family:Tahoma;font-size:15px;color:#565656; margin: 0 auto;text-align:left;} @media only screen and (max-width: 1000px) {body {background:#FFF !important}} </style> </head> <body> <div id="table"> <div id="row"> <div id="cell"> <div class="tx"> <h1>Ошибка 404</h1> <p>Страница, на которую вы попали, не существует. Вы можете попробовать следующее:</p> <p>- <a href="/">Перейти к главной странице сайта</a></p> <p>- Проверить правильность введенного адреса</p> <p>- Вернуться туда, откуда пришли (<i>нажать кнопку «Назад» в своем браузере</i>)</p> </div> </div> </div> </div> </body> </html> Код скрипта который нашел (Ну малоли): var images=[ //регистр всех картинок, здесь думаю ясно {p:"./images/img1.jpg", w:400, h:500}, {p:"./images/img2.jpg", w:500, h:400}, {p:"./images/img3.jpg", w:200, h:300} ]; //установка куки, за разьяснениями в поиск, код много раз обсуждался function setCookie (name, value, expires, path, domain, secure) { var curCookie = name + "=" + escape(value) + ((expires) ? ";expires=" + expires : "") + ((path) ? ";path=" + path : "") + ((domain) ? ";domain=" + domain : "") + ((secure) ? ";secure" : ""); if ((escape(value)).length <= 4000) document.cookie = curCookie+";"; } //удалить куку function getCookie (name) { var prefix = name + "="; var cookieStartIndex = document.cookie.indexOf(prefix); if (cookieStartIndex == -1) return null; var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length); if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length; return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex)); } //достаём HTML код рандомной картинки function getRandomImage() { var im=images[0]; if(images.length>1) { //если есть из чего выбирать var vim=parseInt(getCookie("rimg")); //если есть чего в куках vim=isNaN(vim)? -1: vim; var nim=vim; //достаём рандомный номер не равный предыдущему while(nim == vim) nim=Math.round(Math.random()*(images.length-1)); im=images[nim]; setCookie("rimg", nim); // alert("next: "+nim+", prev: "+vim); //отлов ошибок } //если база не пуста if(im) return "<img src='"+im.p+"' height='"+im.h+"' width='"+im.w+"' border='0' />"; else return "<span style='color: red; font-family:Verdana; font-size:14px'>No images in DB</span>"; } //ну и собстна пишем картинку в поток документа. document.write(getRandomImage()); Скрипт назовем "random.js" <script type="text/javascript" src="random.js"></script> Сообщение отредактировал 3DJER - Суббота, 2015-05-16, 18:36
|
Дата: Суббота, 2015-05-16, 22:15 | Сообщение # 2
Здравствуйте! я конечно же не силён в скриптах но по мойму ваш код не подойдет так как в данной ситуации вам нужно менять фон страницы
Вот мой вариант Стили <style> .style-0{ background: url("../404/404.png"); } .style-1{ background: url("..Тут ссылка на картинку 1"); } .style-2{ background: url("..Тут ссылка на картинку 2"); } .style-3{ background: url("..Тут ссылка на картинку 3"); } .style-4{ background: url("..Тут ссылка на картинку 4"); } </style> В место "Тут ссылка на картинку" пропишите ссылки на ваши картинки Вот скрипт который будет менять <script> document.body.className = 'style-' + parseInt(Math.random() * 10); </script> Данный скрипт меняет background у body при обновлении страницы Добавлено (16.05.2015, 22:15) --------------------------------------------- 3DJER, Вы можете переписать код страницы и указать картинку в html и после использовать свой код для достижения результата Ка установить мой вариант? Откройте код страницы 404 в блокноте или в любом другом редакторе После чего вставьте данный код после <body> <style> .style-0{background: url("../404/404.png"); } .style-1{background: url("..Тут ссылка на картинку 1"); } .style-2{background: url("..Тут ссылка на картинку 2"); } .style-3{background: url("..Тут ссылка на картинку 3"); } .style-4{background: url("..Тут ссылка на картинку 4"); } </style> А этот перед </head> <script> document.body.className = 'style-' + parseInt(Math.random() * 5); </script> на этом всё сохраняем изменения и загружаеи на сайт так же если вы захотите увеличить список картинок просто добавьте в верхний код вот такую строчку .style-4{background: url("..Тут ссылка на картинку 4"); } изменив .style-4 на .style-5 и т.д. после чего в js коде измените 5 на то количество что у вас получилось Помог? ставь + Разработка дизайна - верстка, помощь по установке шаблона на uCoz. Связь skype - tolik-waak Мой сайт Сообщение отредактировал waak - Суббота, 2015-05-16, 22:17
|
Дата: Суббота, 2015-05-16, 23:07 | Сообщение # 3
Разобрался, большое спасибо. Боди в скобки не взял.)
Так, мало ли кому то пригодится данный код: Код <!DOCTYPE html> <html> <head> <title>Страница не найдена</title> <meta name="robots" content="noindex" /> <body> <style> .style-0 {height:100%; background: url("/404/404.png")right bottom no-repeat ;} .style-1 {height:100%; background: url("/404/403.png")right bottom no-repeat ;} .style-2 {height:100%; background: url("/404/402.png")right bottom no-repeat ;} .style-3 {height:100%; background: url("/404/401.png")right bottom no-repeat ;} .style-4 {height:100%; background: url("/404/400.png")right bottom no-repeat ;} </style> <style type="text/css"> html {height: 100%;} div#table{display:table;width:100%;height:100%;} div#row{display:table-row;width:100%;height:100%;} div#cell{display:table-cell;height:100%;width:100%;vertical-align:middle;} h1 {margin:0px;margin-bottom:30px;font-size:23px;font-weight:bold} a {color:#27579E;text-decoration:none} a:hover {color:#0E1D34;text-decoration:none} .tx {width:700px;padding:10px;font-family:Tahoma;font-size:15px;color:#565656; margin: 0 auto;text-align:left;} @media only screen and (max-width: 1000px) {body {background:#FFF !important}} </style> <script> document.body.className = 'style-' + parseInt(Math.random() * 5); </script> </head> <div id="table"> <div id="row"> <div id="cell"> <div class="tx"> <h1>Ошибка 404</h1> <p>Страница, на которую вы попали, не существует. Вы можете попробывать следующее:</p> <p>- <a href="/">Перейти к главной странице сайта</a></p> <p>- Проверить правильность введенного адреса</p> <p>- Вернуться туда, откуда пришли (<i>нажать кнопку «Назад» в своем браузере</i>)</p> </div> </div> </div> </div> </body> </html> Сообщение отредактировал 3DJER - Суббота, 2015-05-16, 23:13
|
| |||
| |||