JavaScript寬高比計算器

Question

我嘗試創建一個JavaScript條件，它使用函數的結果來顯示HTML代碼的一部分或其他部分。

我發現這個代碼，其計算上主旨的縱橫比：

/* euclidean GCD (feel free to use any other) */ 
function gcd(a,b) {if(b>a) {temp = a; a = b; b = temp} while(b!=0) {m=a%b; a=b; b=m;} return a;} 

/* ratio is to get the gcd and divide each component by the gcd, then return a string with the typical colon-separated value */ 
function ratio(x,y) {c=gcd(x,y); return ""+(x/c)+":"+(y/c)} 

/* eg: 
> ratio(320,240) 
"4:3" 
> ratio(360,240) 
"3:2" 
*/ 

我想是計算屏幕寬高比，並且如果屏幕比爲16：9的運行下面的代碼：

<img src="https://via.placeholder.com/1920X1080.jpg"> 

如果縱橫比爲4：3，應該加載此：

<img src="https://via.placeholder.com/1024X768.jpg"> 

這正好FO r多個屏幕分辨率。

這是一個JSBin鏈接：http://jsbin.com/fedipuqasi/edit?html,js,output。

我對StackOverflow做了一些研究，但找不到任何完整的例子，不幸的是，似乎我的JavaScript技能已經生鏽了。

讓我知道是否需要提供更多詳細信息。

Answer 1

這應該工作。

function gcd(a, b) { 
 
    if (b > a) { 
 
    temp = a; 
 
    a = b; 
 
    b = temp 
 
    } 
 
    while (b != 0) { 
 
    m = a % b; 
 
    a = b; 
 
    b = m; 
 
    } 
 
    return a; 
 
} 
 

 
/* ratio is to get the gcd and divide each component by the gcd, then return a string with the typical colon-separated value */ 
 
function ratio(x, y) { 
 
    c = gcd(x, y); 
 
    return "" + (x/c) + ":" + (y/c) 
 
} 
 

 
var ratio = ratio(screen.width, screen.height) 
 
var imgContainer = document.querySelector('#img') 
 

 
switch (ratio) { 
 
    case "16:9": 
 
    imgContainer.innerHTML = '<img src="https://via.placeholder.com/1920X1080.jpg">' 
 
    break 
 
    case "4:3": 
 
    imgContainer.innerHTML = '<img src="https://via.placeholder.com/1024X768.jpg">' 
 
    break 
 
    default: 
 
    imgContainer.innerHTML = '<img src="https://via.placeholder.com/other.jpg">' 
 
    break  
 
}

#img { 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
#img img { 
 
    display: block; 
 
    max-width: 100%; 
 
}

<div id="img"> 
 

 
</div>

Answer 2

您顯示是用於在特定的格式顯示比的代碼，例如， 「4：3」。你不需要使用它進行測試。

比率只是寬度除以身高的，所以只覈對這一結果

var img = new Image(); 
var widescreen = 16/9; 
var standard = 4/3; 

var userRatio = window.screen.width/window.screen.height; 

if(userRatio == widescreen){ 
    img.src = 'https://via.placeholder.com/1920X1080.jpg'; 
} else if(userRatio == standard){ 
    img.src = 'https://via.placeholder.com/1024X768.jpg'; 
} else { 
    //user using different screen resolution 
    img.src = 'https://via.placeholder.com/other.jpg'; 
} 

document.body.appendChild(img); 

如果你不想使用一堆if語句，你可以存儲所有的URL中的對象比例是屬性名稱。然後使用計算出的比率來獲取正確的網址。

//Uses computed property names: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names 
//If you are wanting to support older browsers, change this accordingly. 
var ratioUrls = { 
    [16/9]:"https://via.placeholder.com/1920X1080.jpg", 
    [4/3]:"https://via.placeholder.com/1024X768.jpg" 
} 

var userRatio = window.screen.width/window.screen.height; 

var img = new Image(); 
img.src = ratioUrls[userRatio] || "https://via.placeholder.com/other.jpg"; 
document.body..appendChild(img);