Hi Dear Friends,
In this post We would like to share infinity knowladge My Good experience and Best solution For .
Try this it will help you and for more information click here: Laravel Examples.
We hope it can help you...
In this post We would like to share infinity knowladge My Good experience and Best solution For .
Laravel Examples
I
first made this when I was getting started with jQuery. At the time, I
guess it seemed like a good little exercise to do. Check out a working demo here.
The basic idea is to generate a random hex colour, and update some DOM elements by setting their background/text color/and contents to the value of the new hew code.
Because of the new love it's got, I've fixed one of the most glaring issues of it sometimes generating malformed hex codes. (See the new code above!)
The basic idea is to generate a random hex colour, and update some DOM elements by setting their background/text color/and contents to the value of the new hew code.
The Markup
<h1 id="colour">#e63c44</h1>
<button id="change">New Colour</button>jQuery
$('#change').click(function() {
newColour = '#' + ((Math.random() * 0xffffff) << 0).toString(16);
$('body').css({background: newColour});
$('#change').css({color: newColour});
$('#colour').text(newColour);
});UPDATE - 28-06-2018
Long overdue, have included a vanilla JavaScript version as well:var btn = document.getElementById('change');
var text = document.getElementById('colour');
var generator = function() {
newColour = '#' + ((Math.random() * 0xffffff) << 0).toString(16);
console.log(newColour.length);
if (newColour.length < 7) {
generator();
}
};
btn.addEventListener('click', function() {
generator();
document.body.style.background = newColour;
btn.style.color = newColour;
text.innerText = newColour;
});UPDATE II - 17-04-2019
I was recently moving my code snippets over to codepen, and this one seemed to get picked up by the mods and was featured on the home page.Because of the new love it's got, I've fixed one of the most glaring issues of it sometimes generating malformed hex codes. (See the new code above!)
Read :
I hope you like this Post, Please feel free to comment below, your Any Idea, suggestion and problems if you face - I am here to Resolve your Any problems.We hope it can help you...
No comments :
Post a Comment