我正在尝试设计一个元素。我已经设置了一个布尔值,并使用它来在两个函数之间进行toogle。但是,它不会运行,因此我不确定我的脚本是否正确。
var dfault = false
function rand() {
return~~ (Math.random() * 255);
}
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
function randFrame(){
vid = document.getElementById("video_container");
if(!dfault){
vid.style.backgroundColor = get_random_color();
}else{
vid.style.border = ('5px solid rgba(54,57, 62, .3)');
}
dfault = !dfault
}
基本上,我想将边框从它的正常颜色改为随机颜色然后来回。
HTML:
<div id="sideMenu">
<ul>
<li onclick="wideScreen()">Wide Screen</li> <!--turn sidebar on/off-->
<li onclick="randVidframe()">Random Border</li> <!--randomize vidcontain border-->
<li>Control Bar</li>
</ul>
</div>
CSS:
#video_container{
-webkit-box-flex: 1;
-moz-box-flex: 1;
border:5px solid rgba(54,57, 62, 1);
margin: 20px;
/*padding: 5px;*/
height: 100%;
position: relative;
/*background-color:red;*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
z-index: 1;
}
答案 0 :(得分:2)
你的脚本看起来应该更像这个
var dfault = false
function rand() {
return~~ (Math.random() * 255);
}
function randVidframe(){
if(!dfault){
elem.style.border = ('5px solid rgb(' + [rand(), rand(), rand()] + ')');
}else{
elem.style.border = ('5px solid rgba(54,57, 62, .3)');
}
dfault = !dfault
}
答案 1 :(得分:1)
每次调用函数时都会重新初始化局部变量 - 您需要使用函数范围之外的变量,但是:
不使用全局变量,它们很糟糕 - 好吗?
确保在DOM准备好之前不会调用您的脚本。如果您过早运行它,那么您的元素将无法用于您的脚本。
即:
// don't do anything until the DOM is ready
window.onload = function() {
// local variables
var dfault;
var elem = document.getElementById('myelem');
// local function, not global
function rand() {
return ~~(Math.random() * 255);
}
// despite above warning, this function has to be global
// because you're using DOM level 0 inline event handlers :(
window.randVidframe = function() {
dfault = !dfault;
if (dfault) { // put "true" test first
elem.style.border = ('5px solid rgba(54,57, 62, .3)');
} else {
elem.style.border = ('5px solid rgb(' + [rand(), rand(), rand()] + ')');
}
};
window.wideScreen = function() {
...
};
};