的JavaScript如何讓里程錶改變對窗口寬度調整

Question

如何讓DIV ID =「odometerDiv」在窗口中更改它的寬度調整，以便：

1. 以上600px的寬度有更大的寬度斷點和
2. 低於600px的寬度斷點較小？

我試過CSS，並在應用css div id =「odometerDiv」後停止。它必須在JavaScript代碼內完成。我javascirpt初學者請幫助:)

https://jsfiddle.net/yq9ppp2o/

下面是我的attepmt：

function Odometer (parentDiv,opts) { 
 
    if (!parentDiv) throw "ERROR: Odometer object must be past a document element."; 
 

 
    this.digits  = 6; 
 
    this.tenths  = 0; 
 
    this.digitHeight = 40; 
 
    this.digitPadding = 0; 
 
    this.digitWidth = 30; 
 
    this.bustedness = 2; 
 
    this.fontStyle = "font-family: Courier New, Courier, monospace; font-weight: 900;"; 
 
    this.value  = -1; 
 

 

 
    for (var key in opts) { this[key] = opts[key]; } 
 

 
    var style = { 
 
     digits:  "position:absolute; height:"+this.digitHeight+"px; width:"+(this.digitWidth-(2*this.digitPadding))+"px; "+ 
 
         "padding:"+this.digitPadding+"px; font-size:"+(this.digitHeight-(2*this.digitPadding))+"px; "+ 
 
         "background:black; color:white; text-align:center; "+this.fontStyle, 
 
     columns:  "position:relative; float:left; overflow:hidden;"+ 
 
         "height:"+this.digitHeight+"px; width:"+this.digitWidth+"px;", 
 
     highlight:  "position:absolute; background:white; opacity:0.25; filter:alpha(opacity=25); width:100%; left:0px;", 
 
     lowlight:  "position:absolute; background:black; opacity:0.25; filter:alpha(opacity=25); width:100%; left:0px;", 
 
     sidehighlight: "position:absolute; background:white; opacity:0.50; filter:alpha(opacity=50); height:100%; top:0px;", 
 
     sidelowlight: "position:absolute; background:black; opacity:0.50; filter:alpha(opacity=50); height:100%; top:0px;" 
 
    }; 
 

 
    var highlights = [ 
 
     "top:20%; height:32%;" + style.highlight, 
 
     "top:27.5%; height:16%;" + style.highlight, 
 
     "top:32.5%; height:6%;" + style.highlight, 
 
     "right:0%; width:6%;" + style.sidelowlight, 
 
     "left:0%; width:4%;" + style.sidehighlight, 
 
     "top:0%; height:14%;" + style.lowlight, 
 
     "bottom:0%; height:25%;" + style.lowlight, 
 
     "bottom:0%; height:8%;" + style.lowlight 
 
    ]; 
 

 
    this.setDigitValue = function (digit, val, frac) { 
 
\t var di = digitInfo[digit]; 
 
     \t var px = Math.floor(this.digitHeight * frac); 
 
\t px = px + di.offset; 
 
\t if (val != di.last_val) { 
 
\t \t var tmp = di.digitA; 
 
\t \t di.digitA = di.digitB; 
 
\t \t di.digitB = tmp; 
 
     \t di.digitA.innerHTML = val; 
 
     \t di.digitB.innerHTML = (1+Number(val)) % 10; 
 
\t \t di.last_val = val; 
 
\t } 
 
\t if (px != di.last_px) { 
 
     \t di.digitA.style.top = (0-px)+"px"; 
 
     \t di.digitB.style.top = (0-px+this.digitHeight)+"px"; 
 
\t \t di.last_px = px; 
 
\t } 
 
    }; 
 

 

 
    this.set = function (inVal) { 
 
     if (inVal < 0) throw "ERROR: Odometer value cannot be negative."; 
 
\t this.value = inVal; 
 
\t if (this.tenths) inVal = inVal * 10; 
 
     var numb = Math.floor(inVal); 
 
     var frac = inVal - numb; 
 
\t numb = String(numb); 
 
     for (var i=0; i < this.digits; i++) { 
 
      var num = numb.substring(numb.length-i-1, numb.length-i) || 0; 
 
      this.setDigitValue(this.digits-i-1, num, frac); 
 
      if (num != 9) frac = 0; 
 
     } 
 
    }; 
 

 
    this.get = function() { 
 
     return(this.value); 
 
    }; 
 

 

 
    var odometerDiv = document.createElement("div") 
 
    odometerDiv.setAttribute("id","odometer"); 
 
    odometerDiv.style.cssText="text-align: left"; 
 
    parentDiv.appendChild(odometerDiv); 
 

 
    var digitInfo = new Array(); 
 
    for (var i=0; i < this.digits; i++) { 
 
     var digitDivA = document.createElement("div"); 
 
     digitDivA.setAttribute("id","odometer_digit_"+i+"a"); 
 
     digitDivA.style.cssText=style.digits; 
 

 
     var digitDivB = document.createElement("div"); 
 
     digitDivB.setAttribute("id","odometer_digit_"+i+"b"); 
 
     digitDivB.style.cssText = style.digits; 
 

 
     var digitColDiv = document.createElement("div"); 
 
     digitColDiv.style.cssText = style.columns; 
 

 
     digitColDiv.appendChild(digitDivB); 
 
     digitColDiv.appendChild(digitDivA); 
 

 
     for (var j in highlights) { 
 
      var hdiv = document.createElement("div"); 
 
      hdiv.innerHTML="<p></p>"; // For Dumb IE 
 
      hdiv.style.cssText = highlights[j]; 
 
      digitColDiv.appendChild(hdiv); 
 
     } 
 
     odometerDiv.appendChild(digitColDiv); 
 
\t var offset = Math.floor(Math.random()*this.bustedness); 
 
\t digitInfo.push({digitA:digitDivA, digitB:digitDivB, last_val:-1, last_px: -1, offset:offset}); 
 
    }; 
 

 

 
    if (this.tenths) { 
 
\t digitInfo[this.digits - 1].digitA.style.background = "red"; 
 
\t digitInfo[this.digits - 1].digitB.style.background = "red"; 
 
\t digitInfo[this.digits - 1].digitA.style.color = "#000000"; 
 
\t digitInfo[this.digits - 1].digitB.style.color = "#000000"; 
 
    } 
 

 
    if (this.value >= 0) this.set(this.value); 
 
} 
 

 

 
//This is the function which is to start the odometer but it does not work, I am javascript beginner please help :) 
 

 
\t \t //<![CDATA[ 
 
\t \t \t var n = 0; 
 
\t \t \t var myOdometer; 
 
\t \t \t function startcounting() { 
 
\t \t \t \t var div = document.getElementById("odometerDiv"); 
 
\t \t \t \t myOdometer = new Odometer(div, {value: n, digits: 6, tenths: true}); 
 
     myOdometer.set(0);   
 
\t \t \t \t update(); 
 
\t \t \t } 
 

 
\t \t \t function update() { 
 
\t \t \t \t n=n+0.01 
 
\t \t \t \t myOdometer.set(n); 
 
\t \t \t \t setTimeout(update, 200); 
 
\t \t \t } 
 
\t \t //]]> 
 
    
 
    startcounting(); 
 

 

 

 
\t \t $('button').click(function() { 
 
\t \t \t var currentvalue = myOdometer.get(); 
 
     $('#value').text(currentvalue); 
 
    });

#odometerDiv { 
 
    height:60px; 
 
} 
 

 
#value { 
 
width:400px; 
 
height:40px; 
 
margin:20px 0; 
 
text-align:center; 
 
line-height:40px; 
 
font-size:20px; 
 
background:orangered; 
 
} 
 

 
button { 
 
    width:100px; 
 
    height:20px; 
 
}

<div id="odometerDiv" style="width:100%;"></div>

Answer 1

只需使用媒體查詢在你的CSS：

#odometerDiv { 
    // Styles for when the screen is wider than or equal to 600px 
} 

@media (max-width: 600px) { 
    #odometerDiv { 
     // Styles for when the screen is less than 600px 
    } 
}