Один из вариантов следующий.
function rgbToHex (r, g, b) {
r = r.toString(16);
g = g.toString(16);
b = b.toString(16);
if (r.length == 1) r = '0' + r;
if (g.length == 1) g = '0' + g;
if (b.length == 1) b = '0' + b;
return ('#'+r + g + b).toUpperCase();
}
С помощью этой функции вы получите абсолютно случайный цвет.
function randomHexColor() {
// число 16777215 (дес. система) равно 0xffffff (шестн. система),
// поэтому можно записать и как return '#'+Math.floor(Math.random()*0xffffff).toString(16);
return '#'+Math.floor(Math.random()*16777215).toString(16);
}
Об этом уже достаточно много сказано, но может и мой вариант кому-то приглянется. Обычно запрещают список опасных функций для eval’а. Можно пойти чуть по другому пути и наоборот, разрешить, что-то. Я набросал пример, цель которого была - вычисление математических выражений. Чтобы было не так скучно, сделал это в django через аякс :)
Итак, views.py
import re, json
from django.shortcuts import render_to_response
from django.http import HttpResponse
#...
def calc(request):
return render_to_response('calc.html', {})
def calc_json_expression(request):
p = re.compile(r'[-+*\/\(\)0-9(sin)(cos)(tan)]*', re.IGNORECASE)
calcmath = request.POST["calc-math"]
res = ''.join(p.findall(calcmath))
from math import sin, cos, tan
json_data = {}
try:
json_data['exp'] = res
json_data['res'] = eval(res)
except:
json_data['exp'] = ''
json_data['res'] = '0'
return HttpResponse(json.dumps(json_data), mimetype="application/json")
urls.py
urlpatterns = patterns('kernel.views',
# ...
url(r'^calc/$', 'calc'),
url(r'^calc-json-expression/$', 'calc_json_expression'),
)
и файл шаблона calc.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<h1>Calc</h1>
<form method="post" id="calc-form">
<p><label for="calc-math">Print math expression</label><input type="text" name="calc-math" id="calc-math" value="" placeholder="Expression"></p>
<p>Expression: <span id="calc-math-expression"></span></p>
<p>Result: <span id="calc-math-answer">0</span></p>
</form>
<script type="text/javascript">
$('#calc-math').keyup(function() {
$.post('calc-json-expression/', $("#calc-form").serialize(),function(data){
$('#calc-math-answer').text(data["res"]);
$('#calc-math-expression').text(data["exp"]);
}, "json");
});
</script>
</body>
</html>
Самое интересное во всем этом коде - выбор допустимых символов и слов регулярным выражением. Сюда можно добавить и другие выражения, но принцип должен быть понятен.
p = re.compile(r'[-+*\/\(\)0-9(sin)(cos)(tan)]*', re.IGNORECASE)
Собственно, это и есть мой способ, подобных при поиске “безопасный eval” не увидел. Проблема, с которой столкнулся - это ограничение на время исполнения скрипта. Такой штуки нет ни в джанго, ни в питоне. Поэтому 10 в миллиардной степени, например, этот скрипт не обработает, а сайт просто упадет. Есть решения, интернет ими кишит, но они, в основном, только для *nix, либо практически нерабочие. Если кто-то найдет кроссплатформенный рабочий код - отпишитесь, пожалуйста :)
Самое обычное решение - создать инлайновый элемент (у блочных ширина обычно или 100%, или заданная), например, span, задать его текст, шрифт и измерить его ширину функцией width().
Например, это можно сделать так:
function textWidth(text,fsize){
var newelem = $('<span>');
newelem.text(text);
newelem.css('font-size', fsize);
newelem.hide();
$('body').append(newelem);
var w = newelem.width();
newelem.remove();
return w;
};
Использовать следующим образом:
var mytextwidth = textWidth('lalala','16px');
В прошлом примере мы не определяем шрифт, а следовало бы. Конечно, передачу шрифта через параметр сделать проще простого, но раз уж мы используем jquery, сделаем так:
$.fn.textWidth = function(){
var newelem = $('<span>');
newelem.text($(this).text());
newelem.css({
'font-size': $(this).css('font-size'),
'font-weight':$(this).css('font-weight'),
'font-family':$(this).css('font-family'),
'font-style':$(this).css('font-style')
});
newelem.hide();
$('body').append(newelem);
var w = newelem.width();
newelem.remove();
return w;
};
И мы можем использовать эту функцию для любого jquery-объекта:
var mytextwidth = $('#myelement').textWidth();
Эта ошибка возникает, когда вы пытаетесь сделать ajax-запрос к какому-либо сервису с локалхоста. Исправляется очень просто - припишите в конце адреса, на который делаете запрос, &callback=?.
Пример:
$.ajax({
type : "GET",
url : "http://api.twitter.com/1/users/show.json?screen_name="+groupname+'&callback=?',
dataType: "json",
success : function(data) { ... }
});
Подробнее читайте тут.
Можно сделать красивый якорь - т.е. плавное перемещение к любому DOM-элементу. Для этого сделаем такой скрипт:
$('a[href^="#"]').click(function() {
$('html:not(:animated)' +( !$.browser.opera ? ',body:not(:animated)' : '')).animate({ scrollTop: $($(this).attr('href')).offset().top}, 1000 );
return false;
});
Этот код заменяет все якоря на плавные. Время перемещения до якоря - 1000 мс, вы, конечно же, можете легко поменять его.
$('element').offset().top - определить расстояние (высоту) от начала (самого верха) страницы до выбранного элемента.
Проверил работу в браузерах IE8, Chrome 19, Opera 12.00, Firefox 13.01. Везде хорошо работает.
И не забудьте подключить jQuery в блоке head!
<head>
...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
...
</head>
Источники:
http://loco.ru/materials/96-jquery-scroll-to-top
http://api.jquery.com/offset/
<p>Обнаружил такую проблему: <a title=”Cufon” href="https://github.com/sorccu/cufon” target=”_blank” rel=”noopener”>Cufon</a> (заменитель шрифтов, см. <a title=”Cufón – используйте шрифты, какие душа пожелает” href=”http://habrahabr.ru/post/61033/" target=”_blank” rel=”noopener”>здесь</a> и <a title=”Нестандартный шрифт средствами js” href=”http://www.marketer.ru/adv/production/dizajn/tipografika/cufon-nestandartnyj-shrift-sredstvami-js/" target=”_blank” rel=”noopener”>здесь</a>) прекрасно менял все шрифты, цвета и т.п. Но в одном месте ни в какую не хотел изменять цвет шрифта при наведении (:hover).<br />Оказалось, что если ссылка, которая должна hover’иться, находится внутри другого блока текста, который уже обработан Cufon’ом, то она не сможет изменить цвет (!), border и некоторые другие свойства будут меняться без проблем.<br />Итак, ниже показываю, в каких случаях hover’а не происходит, а в каких происходит (в коде все понятно). Либо можно скачать <a href=”/media/uploads/2018/11/09/cufon-test.zip” target=”_blank” rel=”noopener”>архив, вместе со шрифтами</a>, и самому посмотреть.</p>
<!doctype html>
<html>
<head>
<script type="text/javascript" src="test/jquery00.js"></script>
<script type="text/javascript" src="test/cufon-yu.js"></script>
<script type="text/javascript" src="test/Plumb_20.js"></script>
<style>
a, a:link, a:visited { color : #0000cc; }
</style>
</head>
<body>
<div class="example">Lorem <a href="#" class="ahref">Ссылка, вложенная в другой элемент с Cufon'ом, обработка сначала внешнего блока, потом ссылки [hover'а нет]</a> ipsum</div>
<div class="example2"><span class="example">Lorem</span> <a href="#" class="ahref">Ссылка, не вложенная в элемент с Cufon'ом, внутри текста</a> <span class="example">ipsum</span></div>
<div class="example2">Lorem <a href="#" class="ahref">Ссылка, вложенная в другой элемент с Cufon'ом, обработка сначала ссылки, потом внешнего блока</a> ipsum</div>
<div class="example2">Lorem <a href="#">Ссылка без явного указания класса [hover'а нет]</a> ipsum</div>
<a class="ahref" href="#" >Ссылка, не вложенная в другие элементы, которые обрабатываются Cufon'ом</a></p>
<p><script type="text/javascript">
Cufon('.example');
Cufon('.ahref', {
color: '#0000cc',
hover: true,
hover: {
color: '#ccc'
}
});
Cufon('.example a', {
color: '#0000cc',
hover: true,
hover: {
color: '#ccc'
}
});
Cufon('.example2');
</script>
</body>
</html>
function filterforme() {
v = $('#filterbox-input').val().toLowerCase();
nowCount = 0;
$('#listtable tbody tr').hide();
$('#listtable tbody tr').filter(function(index) {
b = ($(this).text().toLowerCase().indexOf(v) != -1) || (v == '') ? true : false;
nowCount += b;
return b;
}).show();
$('#countRecords').text(nowCount+' из '+fullCount);
}
$('#filterbox-input').keyup(function () {
filterforme();
});
<div class="filterbox"><label for="filterbox-input">Фильтр</label><input type="text" value="" id="filterbox-input" name="filterbox-input"></input></div>
<table class="sort-table" id="listtable">
<thead>
<tr>
<th>Код</th>
<th>Наименование</th>
<th>Описание</th>
<th>Редактировать</th>
<th>Удалить</th>
</tr>
</thead>
<tbody>
<tr>
<td>И</td>
<td>Используется</td>
<td>СИ используется по назначению</td>
<td align="center"><a href="/spravochnik/sostoyanie/edit/1/"><img title="редактировать" alt="редактировать" src="/media/static/images/system/pencil_16.png" /></a></td>
<td align="center"><a href="/spravochnik/sostoyanie/delete/1/" onclick="return deleteQuest();"><img title="удалить" alt="удалить" src="/media/static/images/system/delete_16.png" /></a></td>
</tr>
<tr>
<td>К</td>
<td>Консервация</td>
<td>СИ законсервировано, находится на длительном хранении</td>
<td align="center"><a href="/spravochnik/sostoyanie/edit/2/"><img title="редактировать" alt="редактировать" src="/media/static/images/system/pencil_16.png" /></a></td>
<td align="center"><a href="/spravochnik/sostoyanie/delete/2/" onclick="return deleteQuest();"><img title="удалить" alt="удалить" src="/media/static/images/system/delete_16.png" /></a></td>
</tr>
<tr>
<td>Р</td>
<td>Ремонт</td>
<td>СИ находится в ремонте</td>
<td align="center"><a href="/spravochnik/sostoyanie/edit/3/"><img title="редактировать" alt="редактировать" src="/media/static/images/system/pencil_16.png" /></a></td>
<td align="center"><a href="/spravochnik/sostoyanie/delete/3/" onclick="return deleteQuest();"><img title="удалить" alt="удалить" src="/media/static/images/system/delete_16.png" /></a></td>
</tr>
</tbody>
</table>
<div class="countTable">Отображено записей: <span id="countRecords">0</span></div>