如何隨機化背景顏色和svg

我試圖製作一個基本的着陸頁，隨着每次頁面加載時隨機顯示背景顏色，並且每次單擊svg圖標時也會發生變化。如何隨機化背景顏色和svg

到目前爲止，這是行得通的，但是是否有可能隨機化圖標的顏色而不是僅僅是白色？我無法將svg的顏色屬性整合到javascript中。這是我目前使用的代碼：

$(function() { 
 

 
    var randomColor = Math.floor(Math.random() * 16777215).toString(16); 
 

 
    $("body").css({ 
 

 
    backgroundColor: '#' + randomColor 
 

 
    }); 
 

 
    $("#colorcode").text("#" + randomColor); 
 

 
}); 
 

 
var safeColors = ['00', '33', '66', '99', 'cc', 'ff']; 
 
var rand = function() { 
 
    return Math.floor(Math.random() * 6); 
 
}; 
 
var randomColor = function() { 
 
    var r = safeColors[rand()]; 
 
    var g = safeColors[rand()]; 
 
    var b = safeColors[rand()]; 
 
    return "#" + r + g + b; 
 
}; 
 

 
$("body").css({ 
 

 
    backgroundColor: '#' + randomColor 
 

 
}); 
 

 
$(document).ready(function() { 
 
    $('#Layer_1').click(function() { 
 
    $('body').each(function() { 
 
     $(this).css('background', randomColor()); 
 
    }); 
 
    }); 
 
});

.cls-1 { 
 
    fill: #fff; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> 
 
</script> 
 

 
<div style="width:400px; position:absolute; left:50%; top:50%; margin:-200px 0 0 -200px; cursor: pointer"> 
 
    <svg data-name="Layer 1" id="Layer_1" viewbox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> 
 
    <title>Artboard 1</title> 
 
    <polygon class="cls-1" points="276 124 276 0 124 0 124 124 0 124 0 276 124 276 124 400 276 400 276 276 400 276 400 124 276 124"></polygon> 
 
    </svg>

非常感謝您的幫助。我對Javascript很陌生，所以這對我來說有點像學習曲線。

來源

2016-09-29 Jacob

當然，你的JQuery也可以簡化。

只需要改變填充of.cls-1

var safeColors = ['00', '33', '66', '99', 'cc', 'ff']; 
 
var rand = function() { 
 
    return Math.floor(Math.random() * 6); 
 
}; 
 
var randomColor = function() { 
 
    var r = safeColors[rand()]; 
 
    var g = safeColors[rand()]; 
 
    var b = safeColors[rand()]; 
 
    return "#" + r + g + b; 
 
}; 
 

 
$(document).ready(function() { 
 
    $('.cls-1').css('fill', randomColor()); 
 
    $('body').css('background', randomColor()); 
 
    $('#Layer_1').click(function() { 
 
    $('.cls-1').css('fill', randomColor()); 
 
    $('body').css('background', randomColor()); 
 
    }); 
 
});

.cross { 
 
    width: 400px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin: -200px 0 0 -200px; 
 
    cursor: pointer; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> 
 
</script> 
 

 
<div class="cross"> 
 
    <svg data-name="Layer 1" id="Layer_1" viewbox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> 
 
    <title>Artboard 1</title> 
 
    <polygon class="cls-1" points="276 124 276 0 124 0 124 124 0 124 0 276 124 276 124 400 276 400 276 276 400 276 400 124 276 124"></polygon> 
 
    </svg>

來源

2016-09-29 09:35:35

謝謝，這正是我之後所做的！所以這隨機刷新和點擊？ – Jacob

是的，每次都不一樣 –

完美，再次感謝。 – Jacob

-1

最小的代碼！享受它！

function changecolor() { 
 
     var colors = ["red", "blue", "yellow"]; 
 
     Shuffle(colors); 
 
     document.body.style.backgroundColor = colors[0]; 
 
    } 
 
    function Shuffle(o) { 
 
    \t for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
 
    \t return o; 
 
    };

<body onload="changecolor()"> 
 
    <h1>Hello World!</h1> 
 
</body>

來源

2016-09-29 09:30:10 SAM

您可以通過應用fill CSS屬性的SVG元素來改變SVG的顏色（在你的情況下，polygon）

$('#Layer_1 polygon').css('fill', randomColor());

$(function() { 
 
    var randomColor = Math.floor(Math.random() * 16777215).toString(16); 
 
    $("body").css({ 
 
    backgroundColor: '#' + randomColor 
 
    }); 
 
    $("#colorcode").text("#" + randomColor); 
 
}); 
 

 
var safeColors = ['00', '33', '66', '99', 'cc', 'ff']; 
 
var rand = function() { 
 
    return Math.floor(Math.random() * 6); 
 
}; 
 

 
var randomColor = function() { 
 
    var r = safeColors[rand()]; 
 
    var g = safeColors[rand()]; 
 
    var b = safeColors[rand()]; 
 
    return "#" + r + g + b; 
 
}; 
 

 
$("body").css({ 
 
    backgroundColor: '#' + randomColor 
 
}); 
 

 
$(document).ready(function() { 
 
    $('#Layer_1').click(function() { 
 
     $('body').css('background', randomColor()); 
 
     $('#Layer_1 polygon').css('fill', randomColor()); 
 
    }); 
 
});

#svgdiv { 
 
    width: 400px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin: -200px 0 0 -200px; 
 
    cursor: pointer 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="svgdiv"> 
 
    <svg data-name="Layer 1" id="Layer_1" viewbox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> 
 
    <polygon class="cls-1" points="276 124 276 0 124 0 124 124 0 124 0 276 124 276 124 400 276 400 276 276 400 276 400 124 276 124"></polygon> 
 
    </svg> 
 
</div>

來源

2016-09-29 09:30:25 Aziz

你可以針對你的SVG圖標的背景一樣，但你需要使用「補」，而不是「background-color」請嘗試用下面的代碼替換：

$(document).ready(function() { 
    $(".cls-1").css("fill",randomColor()) 
    $('#Layer_1').click(function() { 
     $('body').each(function() { 
     $(this).css('background',randomColor()); 
     $(".cls-1").css("fill",randomColor()) 
     }); 
    }); 
    });

來源

2016-09-29 09:41:15 mondersky

如何隨機化背景顏色和svg

回答

相關問題