мигающий текст
Доброй ночи! подскажите как заставить текст мигать?
<p>Какой-то текст</p> ......... подскажите в каком направлении мне рыть? |
<style>
p {
animation: blink 400ms alternate infinite;
}
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
<p>Какой-то текст</p>
|
danik.js,
Спасибо! Но я бы хотел это сделать на JS. Может подскажешь какую функцию? |
|
<p id="blink">Some text</p>
<script>
setInterval(function(){
var a = document.getElementById('blink').style.opacity || 1;
document.getElementById('blink').style.opacity = ((parseInt(a))?0:1);
},1e3);
</script>
|
Цитата:
(a?0:1) |
Цитата:
Не катит Тут "document.getElementById('blink').style.opacit y" хранится строка, а "0"?0:1 -> 0 |
Цитата:
a = 1 - a; |
<p id="blink">Some text</p>
<script>
setInterval(function(){
blink.style.opacity = 1 - (blink.style.opacity || 1);
},1e3);
</script>
:dance: |
:)
<p id="blink">Some text</p>
<script>
setInterval(function(){
blink.style.opacity ^= 1 ;
},1e3);
</script>
|
z700i,
<p id="blink">Some text</p>
<script>
setInterval(function(){
var a = document.getElementById('blink').style.opacity || 1;
document.getElementById('blink').style.opacity = (+a ? 0:1);
},1e3);
</script>
|
Регулярные выражения =^ и 1e3
Подскажите пожалуйста что это?не могу найти их значения
|
1) Присваивание с побитовым XOR
https://developer.mozilla.org/ru/doc...XOR_assignment 2) 1e3 Это 1000 один с тремя нулями |
Есть простой скрипт времени-даты, как заставить оба span class="U_003A" мигать двумя цветами, #9c9c9c; и #333399; с интервалом в 500 милисекунд?
<style>
span.U_003A { color: #9c9c9c; }
</style>
<span id="clock"></span>
<script type="text/javascript">
function clock() {
var date = new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var sec=date.getSeconds();
var day=date.getDate();
var month=date.getMonth();
var year=date.getFullYear();
var weekday=date.getDay();
var monthes=new Array ("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
var dayNames = new Array("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
document.getElementById("clock").innerHTML = (hour<10?"0":"")+hour+" <span class='U_003A'>:</span> "+(minute<10?"0":"")+minute+" <span class='U_003A'>:</span> "+(sec<10?"0":"")+sec+"<br/>"+dayNames[weekday]+"<br/>"+(day<10?"0":"")+day+" "+monthes[month]+" "+year+" г.";
window.setTimeout("clock()",500);
}
clock();
</script>
|
m~r.Nemo,
<style>
span.U_003A { color: #9c9c9c; }
#clock.x span.U_003A { color: #333399; }
</style>
<span id="clock"></span>
<script type="text/javascript">
function clock() {
var date = new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var sec=date.getSeconds();
var day=date.getDate();
var month=date.getMonth();
var year=date.getFullYear();
var weekday=date.getDay();
var monthes=new Array ("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
var dayNames = new Array("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
document.getElementById("clock").innerHTML = (hour<10?"0":"")+hour+" <span class='U_003A'>:</span> "+(minute<10?"0":"")+minute+" <span class='U_003A'>:</span> "+(sec<10?"0":"")+sec+"<br/>"+dayNames[weekday]+"<br/>"+(day<10?"0":"")+day+" "+monthes[month]+" "+year+" г.";
document.getElementById("clock").classList.toggle("x");
window.setTimeout("clock()",500);
}
clock();
</script>
|
рони, а не подскажешь как правильно записать если два и более элемента меняют свойства?
#clock.x span.U_003A { ... } #clock.x span.moment { ... } или можно в спаны через запятую/пробел? |
m~r.Nemo,
#clock.x span.U_003A, #clock.x span.moment{ color: #333399; } |
рони,
Я хотел спросить если у этих спанов меняются разные свойства, у одного спана меняется цвет, а у второго появляется/пропадает тень... |
:-?
Цитата:
|
Подскажите как сделать независимое и синхронное мигание текста двух div.
Т.е по кнопке один один из div может прекращать мигать а потом по ней же запускаться, и надо что бы после запуска он мигал синхронно со вторым. Сделал так, работает но не синхронно мигают после остановке =(
var TimerBlinkText=new Array(2);
function BlinkText(num,id){
clearTimeout(TimerBlinkText[num]||0);
TimerBlinkText[num]=setInterval(function(){
document.getElementById(id).style.opacity ^= 1;
},500);
}
function ClearBlinkText(num,id){
clearTimeout(TimerBlinkText[num]||0);
}
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.BlinkText{
width: 100px;
height: 100px;
background-color: #0000CD;
color: #FFFFFF;
text-align: center;
line-height: 100px;
transition: .5s;
}
.BlinkText.disable{
background-color: #F0E68C;
color: #FF0000;
}
</style>
</head>
<body>
<div class="BlinkText">1</div>
<div class="BlinkText">2</div>
<button class="BlinkText">click 1</button>
<button class="BlinkText">click 2</button>
<script>
let DivsBlinkText = [...document.querySelectorAll("div.BlinkText")],
ButtonsBlinkText = [...document.querySelectorAll("button.BlinkText")],
opacity = 1;
ButtonsBlinkText.forEach((button, i) => {
DivsBlinkText[i].timer ^= 1;
button.addEventListener("click", () => {
DivsBlinkText[i].timer ^= 1;
button.classList.toggle("disable")
})
});
(function timer()
{ opacity ^= 1;
for (let div of DivsBlinkText) {
div.style.opacity = div.timer ? opacity : 1;
}
window.setTimeout(timer, 500)
})()
</script>
</body>
</html>
|
Цитата:
<style>
span { display: inline-block; border: 1px solid #aaa; padding: 10px 20px; margin..... }
<div>
<span id="hours"><span>1</span><span>6</span></span>.....
16 часов... Как реализовать подобное? и возможно ли добавить анимацию только тогда когда цифры меняются? |
надо двухзначное число показывающее часы/мин/сек, разделить на две отдельные цифры, чтобы каждую цифру можно было заключить в отдельный спан и добавить бордер маргин пудинг фон
|
| Часовой пояс GMT +3, время: 16:15. |