Created
December 3, 2011 04:53
-
-
Save etlovett/1426090 to your computer and use it in GitHub Desktop.
Ways to implement the <blink> tag
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Ways to implement the <blink> tag</title> | |
</head> | |
<body> | |
<!-- | |
Method #0: Use the blink tag | |
--> | |
<blink>blinking #0!</blink> | |
<!-- | |
Method #1: Use text-decoration:blink; | |
Only works in Firefox and Opera, according to | |
https://developer.mozilla.org/en/HTML/Element/blink | |
--> | |
<div style="text-decoration: blink;">blinking #1!</div> | |
<!-- | |
Method #2: Changing the text color on a custom tag | |
--> | |
<myBlink>blinking #2!</myBlink> | |
<script> | |
(function () { | |
var blinkTags = document.getElementsByTagName("myBlink"); | |
var numBlinkTags = blinkTags.length; | |
var setBlinkTagColors = function (color) { | |
for (var i = 0; i < numBlinkTags; i++) { | |
blinkTags[i].style.color = color; | |
} | |
} | |
var revertColor = function () { | |
setBlinkTagColors("black"); | |
}; | |
window.setInterval(function () { | |
setBlinkTagColors("white"); | |
window.setTimeout(revertColor, 200); | |
}, 1000); | |
})(); | |
</script> | |
<!-- | |
Method #2 variant 1: Use a div with a class instead of a custom tag | |
Note that this variant can be used in conjunction with variants 2 or 3. | |
--> | |
<div class="blink">blinking #3!</div> | |
<script> | |
(function () { | |
var blinkTags = document.getElementsByClassName("blink"); | |
var numBlinkTags = blinkTags.length; | |
var setBlinkTagColors = function (color) { | |
for (var i = 0; i < numBlinkTags; i++) { | |
blinkTags[i].style.color = color; | |
} | |
} | |
var revertColor = function () { | |
setBlinkTagColors("black"); | |
}; | |
window.setInterval(function () { | |
setBlinkTagColors("white"); | |
window.setTimeout(revertColor, 200); | |
}, 1000); | |
})(); | |
</script> | |
<!-- | |
Method #2 variant 2: Change the opacity of the tag instead of the color | |
Note that this variant can be used in conjunction with variant 1. | |
--> | |
<myBlink2>blinking #4!</myBlink2> | |
<script> | |
(function () { | |
var blinkTags = document.getElementsByTagName("myBlink2"); | |
var numBlinkTags = blinkTags.length; | |
var setBlinkTagOpacities = function (opacity) { | |
for (var i = 0; i < numBlinkTags; i++) { | |
blinkTags[i].style.opacity = opacity; | |
} | |
} | |
var revertOpacity = function () { | |
setBlinkTagOpacities(1.0); | |
}; | |
window.setInterval(function () { | |
setBlinkTagOpacities(0.0); | |
window.setTimeout(revertOpacity, 200); | |
}, 1000); | |
})(); | |
</script> | |
<br> | |
<!-- | |
Method #2 variant 3: Show/hide the tag instead of changing the color | |
Note that this variant can be used in conjunction with variant 1. | |
--> | |
<myBlink3>blinking #5!</myBlink3> | |
<script> | |
(function () { | |
var blinkTags = document.getElementsByTagName("myBlink3"); | |
var numBlinkTags = blinkTags.length; | |
var setBlinkTagDisplays = function (display) { | |
for (var i = 0; i < numBlinkTags; i++) { | |
blinkTags[i].style.display = display; | |
} | |
} | |
var revertDisplay = function () { | |
setBlinkTagDisplays("block"); | |
}; | |
window.setInterval(function () { | |
setBlinkTagDisplays("none"); | |
window.setTimeout(revertDisplay, 200); | |
}, 1000); | |
})(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment