随机渐变背景色
2018-04-13 本文已影响97人
阿昕_
说明
- 随机颜色
- 随机渐变类型
关键代码段
var randnum = function(max) { //随机数
return Math.round(Math.random() * max);
}
var hexify = function(x) { //转换16进制
return ('0' + parseInt(x).toString(16)).slice(-2);
}
var randex = function() { //随机16进制色彩值
return '#' + hexify(randnum(255)) + hexify(randnum(255)) + hexify(randnum(255));
};
var blender = function() { //随机渐变
if (!!Math.round(Math.random())) {
return 'radial-gradient(circle at ' + randnum(100) + '% ' + randnum(100) + '%, ' + randex() + ', ' + randex() + ')';
} else {
return 'linear-gradient(' + randnum(360) + 'deg, ' + randex() + ', ' + randex() + ')';
}
};
效果
效果图
demo源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机背景色</title>
</head>
<style type="text/css">
body{
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
</style>
<script type="text/javascript">
var randum = function(max) {
return Math.round(Math.random() * max);
}
var hexify = function(x) {
return ('0' + parseInt(x).toString(16)).slice(-2);
}
var randex = function() {
return '#' + hexify(randum(255)) + hexify(randum(255)) + hexify(randum(255));
};
var blender = function() {
if (!!Math.round(Math.random())) {
return 'radial-gradient(circle at ' + randum(100) + '% ' + randum(100) + '%, ' + randex() + ', ' + randex() + ')';
} else {
return 'linear-gradient(' + randum(360) + 'deg, ' + randex() + ', ' + randex() + ')';
}
};
window.onload = function(){
document.onclick = function(){
let i = blender();
console.log(i)
document.body.style.backgroundImage = i
}
}
</script>
<body>
</body>
</html>
