Question

我的代码遇到了问题。基本上我想要的是当音量滑块超过一半时它会变成红色，当它低于一半时它会变成绿色。我创建了样式表我只是不知道如何将它们连接在一起。我接近了吗？感谢您的反馈。（焦点：最后一个功能和Volume1输入）

<!DOCTYPE html>
<html>
<head>
<title>Audio Javascript Demo</title>

<link id="green" rel="stylesheet" type="text/css" title="Red" href="styleSheets/Red.css">
<link id="red" rel="alternate stylesheet" type="text/css" title="Green" href="styleSheets/Green.css">

<script>
var mediaClip; // shortcut for document.getElementById('mediaClip')

function init()
{
// initialise the mediaClip variable  
mediaClip = document.getElementById('mediaClip'); 

// get the length of the audio clip
document.getElementById('clipDuration').innerHTML = 'Length: ' + Math.floor(mediaClip.seekable.end(0) / 60) + ':' + twoDigits(Math.floor(mediaClip.seekable.end(0) % 60));

// updae the displayed data every 300 miliseconds
setInterval(updateDisplayedData,300);
}


function updateDisplayedData()
{
// update the current position
 document.getElementById('currentPosition').innerHTML = 'Current Position: ' + Math.floor(mediaClip.currentTime / 60) + ':' + twoDigits(Math.floor(mediaClip.currentTime % 60)) + "/4:02";

// update the current volume
if(mediaClip.muted)
{
   document.getElementById('currentVolume').innerHTML = 'Volume: MUTED';
}
else
{
  document.getElementById('currentVolume').innerHTML = 'Volume test: ' + Math.floor(mediaClip.currentTime *100  / 243);
}
{

}
}


function playClip()
{
document.getElementById('mediaClip').play();  
}


function pauseMusic()
{
document.getElementById('mediaClip').pause();  
}


function stopClip()
{ 
// There is no stop function.
// Instead, we pause and set the currentTime to 0
document.getElementById('mediaClip').pause();  
document.getElementById('mediaClip').currentTime = 0;
}


function decreaseVolume()
{
// minimum volume is 0  
if(mediaClip.volume > 0)
{
 mediaClip.volume -= 0.01;     
} 
}


function increaseVolume()
{
// maximum volume is 1
if(mediaClip.volume < 1)
{
 mediaClip.volume += 0.01;
}
}


function toggleMute()
{
if(mediaClip.muted)
{
   mediaClip.muted = false;
}
else
{
  mediaClip.muted = true;     
}
}


function toggleControls()
{
if(mediaClip.controls)
{
  mediaClip.controls = false;
}
else
{
  mediaClip.controls = true;     
}
}


function Goto15Secs()
{
mediaClip.currentTime = 15;
}


function twoDigits(number) 
{
if (number < 10) 
{ 
 number = ("0" + number).slice(-2); 
}
return number;
}

function playPause() {
    var mediaClip = document.getElementById("mediaClip");
    if (mediaClip.paused) {
        mediaClip.play();   
    } else {
        mediaClip.pause();
    }
}

function change() {
    var button1 = document.getElementById("button1");
    if (button1.value==="Play") button1.value = "Pause";
    else button1.value = "Play";
}

function setVolume() {
    var mediaClip = document.getElementById("mediaClip");
    mediaClip.volume = document.getElementById("volume1").value;

}

function setTime() {
   var mediaClip = document.getElementById("mediaClip");
   mediaClip.currentTime = document.getElementById("time1").value;
}

function backStart() {
    document.getElementById("mediaClip").currentTime = 0;
}

function upVolume() {
    if (mediaClip.volume < 1)
    {
        mediaClip.volume += 0.1;
    }

}

function downVolume() {
    if (mediaClip.volume > 0)
    {
        mediaClip.volume -= 0.1;
    }
}

function gotoChorus() {
    document.getElementById("mediaClip").currentTime = 55; 
}

function changeColor(sheet) {
    if (document.getElementById("volume1").value > 0.5){
      document.getElementById("Red").setAttribute('href', sheet);
  }
  else{
      document.getElementById("Green").setAttribute('href', sheet);
  }
}

</script>

</head>

<body onload = 'init()'>

<audio id = 'mediaClip' controls src = 'take_me_to_church_hozier.mp3'>  
<p>Your browser does not support the 'audio' tag </p>
</audio>

<br>
<button onclick = 'playClip()'>Play</button>
<button onclick = 'pauseMusic()'>Pause</button>
<button onclick = 'stopClip()'>Stop</button>
<br>
<button onclick = 'decreaseVolume()'>Decrease Volume</button>
<button onclick = 'increaseVolume()'>Increase Volume</button>
<button onclick = 'toggleMute()'>Toggle Mute</button>
<br>
<button onclick = 'toggleControls()'>Toggle Controls</button>
 <br>
<button onclick = 'Goto15Secs()'>Goto 15 Seconds</button>
<br/>
<br/>
<input onclick="change();playPause()" type="button" value="Play" id="button1">
<input type="range" onchange="setVolume();changeColor('styleSheets/Green.css')" id='volume1' min=0 max=1 step=0.01 value='1'/>
<br/>
<button onclick ="backStart()">Reset</button>
<input type="range" onchange="setTime()" id="time1" min="0" max="242" step="2.42" value="0"/>
<br/> 
<button onclick="upVolume()">Volume up 10%</button>
<button onclick="downVolume()">Volume down 10%</button>
<br/>
<button onclick="gotoChorus()">Go to chorus</button>

<div>
<p id='clipDuration'></p>
<p id='currentPosition'></p>
<p id='currentVolume'></p>
</div>

</body>
</html>

Answer 1

鉴于你的代码，我会：

1）删除（或）哪个CSS样式表不是默认值（因此只保留页面加载时将出现的默认值）。删除属于该样式表的<link>元素。

2）将剩余的<link>元素的id重命名为red或green至styles

3）按如下方式更新您的功能：

function changeColor() { 
  if (document.getElementById("volume1").value > 0.5){ 
    document.getElementById("styles").setAttribute('href', "styleSheets/Red.css"); 
  } else { 
    document.getElementById("styles").setAttribute('href', "styleSheets/Green.css"); 
  }
}

<强>然而...

这不是更新页面样式的最佳方式。

更好的方法是仍然使用红色和绿色css样式，但是它们可以放在主样式表中（或者可能是单独的themes样式表），而不是使用两个样式表。您需要做的主要事情是更新样式，以便red样式表中的所有规则都以.red开头...例如：

.red button{...

.red input{...

.red p{...

依此类推，你也会为绿色做同样的事。

在此之后，要更改样式，您要做的就是更新页面上某个父元素的类（即使是<body>元素，但我不建议这样做。）

要使用JavaScript更新类，您可以使用：

document.getElementById("container").classList.add('red');
document.getElementById("container").classList.remove('green');

Answer 2

更改CSS类，而不是样式表。我要做的是有一个“红色”CSS类和一个“绿色”类，然后做这样的事情：

document.getElementById("MyElement").className = "red";

Answer 3

我不会有完整的样式表来改变一件事，但你可以使用以下功能：

function changeStyleSheet(styleSheetName){
    document.getElementById("styles").setAttribute("href", styleSheetName);
}

您提供的CSS包含样式的ID ：

<link type="text/css" rel="stylesheet" id="styles" href="styleSheets/Red.css">

然后你做：

changeStyleSheet("styleSheets/Green.css")

if语句类似于：

// Random number used, assuming 100 is the maximum value.
if (mySlider == 50) {
    changeStyleSheet("newStyleSheet");
} else {
    changeStyleSheet("newStyleSheet");
}

您可能想要将一个事件监听器（onchange？）添加到滑块，然后每次都运行检查。

使用Javascript用if语句更改样式表？

3 个答案: