javascript如何在窗口调整大小时使里程表更改其宽度

Question

如何制作div id =＆＃34; odometerDiv＆＃34;在窗口调整大小时更改其宽度，以便：

1. 宽度超过600px时，有更大的宽度断点和
2. 600px以下有更小的宽度断点？

我已经尝试过CSS并且应用了css div id =＆＃34; odometerDiv＆＃34;停止。它必须在javascript代码中完成。我是javascirpt初学者，请帮助：）

https://jsfiddle.net/yq9ppp2o/

以下是我的观察：

＆＃13;
＆＃13;
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) {
	var di = digitInfo[digit];
       	var px = Math.floor(this.digitHeight * frac);
	px = px + di.offset;
	if (val != di.last_val) {
		var tmp = di.digitA;
		di.digitA = di.digitB;
		di.digitB = tmp;
        	di.digitA.innerHTML = val;
        	di.digitB.innerHTML = (1+Number(val)) % 10;
		di.last_val = val;
	}
	if (px != di.last_px) {
        	di.digitA.style.top = (0-px)+"px";
        	di.digitB.style.top = (0-px+this.digitHeight)+"px";
		di.last_px = px;
	}
    };


    this.set = function (inVal) {
        if (inVal < 0) throw "ERROR: Odometer value cannot be negative.";
	this.value = inVal;
	if (this.tenths) inVal = inVal * 10;
        var numb = Math.floor(inVal);
        var frac = inVal - numb;
	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);
	var offset = Math.floor(Math.random()*this.bustedness);
	digitInfo.push({digitA:digitDivA, digitB:digitDivB, last_val:-1, last_px: -1, offset:offset});
    };


    if (this.tenths) {
	digitInfo[this.digits - 1].digitA.style.background = "red";
	digitInfo[this.digits - 1].digitB.style.background = "red";
	digitInfo[this.digits - 1].digitA.style.color = "#000000";
	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 :)

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

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



		$('button').click(function() {
			var currentvalue = myOdometer.get();
      $('#value').text(currentvalue);
    });
＆＃13;
#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;
}
＆＃13;
<div id="odometerDiv" style="width:100%;"></div>
＆＃13;
＆＃13;
＆＃13;

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
    }
}