Refresh rate, measured in Hertz (Hz), indicates how many times a display updates its image per second. A higher refresh rate means a smoother visual experience, particularly noticeable in fast-paced content like gaming or videos. This calculator helps you determine the refresh rate of your display based on its resolution and the maximum frame rate it can support.
function calculateRefreshRate() {
var horizontalResolution = parseFloat(document.getElementById("horizontalResolution").value);
var verticalResolution = parseFloat(document.getElementById("verticalResolution").value);
var maxFrameRate = parseFloat(document.getElementById("maxFrameRate").value);
var resultDiv = document.getElementById("result");
if (isNaN(horizontalResolution) || isNaN(verticalResolution) || isNaN(maxFrameRate) ||
horizontalResolution <= 0 || verticalResolution <= 0 || maxFrameRate <= 0) {
resultDiv.innerHTML = "Please enter valid positive numbers for all fields.";
return;
}
// The theoretical maximum refresh rate can be approximated by considering the total number of pixels
// and the maximum frame rate the system can push through.
// A simplified calculation often focuses on the frame rate itself as the primary driver of perceived smoothness,
// but if we want to infer a theoretical refresh rate based on resolution and FPS, it implies
// that each frame must be rendered and displayed within the given FPS.
// The most direct interpretation of "refresh rate" in the context of display capabilities
// is often tied to the monitor's capabilities, not directly calculated from resolution and FPS alone
// unless we're talking about bandwidth limitations.
// However, for the purpose of a simple calculator and understanding the relationship:
// If a display is showing X frames per second at Y resolution, the refresh rate is essentially Y.
// If we're given a max FPS that a system can produce for a given resolution, and we want to
// know the display's capability, the max FPS *is* the refresh rate being targeted/achieved.
// A more complex calculation would involve pixel clock, blanking intervals etc.
// For this calculator, we will assume the user is providing the *target* or *achievable* frame rate for that resolution,
// and we'll present that as the refresh rate the display would need to support or is operating at.
// A direct calculation from resolution and FPS to a *display's inherent refresh rate* isn't standard.
// Instead, it's usually framed as "Can this display's refresh rate support this frame rate?".
// Given the inputs, the most sensible interpretation is that the user wants to know what refresh rate
// is being *achieved* or *targeted* if they are getting `maxFrameRate` FPS at that resolution.
// Therefore, the `maxFrameRate` is the most direct answer representing the refresh rate in this context.
// Let's refine this to make it a bit more illustrative.
// If a display is capable of 1920×1080 resolution and can show 60 frames per second,
// its refresh rate is effectively 60Hz for that content.
// If a display is capable of 1920×1080 resolution and can show 144 frames per second,
// its refresh rate is effectively 144Hz for that content.
// The horizontal and vertical resolution don't directly *calculate* refresh rate;
// they define the *content* being displayed at a certain refresh rate.
// The refresh rate is an intrinsic property of the display or the target smoothness.
// So, we'll use the maxFrameRate as the primary output, as it's the most relevant metric for perceived smoothness at that resolution.
// For a more physics-based approach, one might consider bandwidth.
// Data per frame = H_res * V_res * bits_per_pixel (e.g., 24 bits for RGB)
// Data rate = Data per frame * Max_FPS
// Pixel Clock = Data rate / (bits_per_pixel_per_clock_cycle, often 1 or 2)
// Refresh Rate is often related to Pixel Clock, but it's not a direct division.
// However, a common simplification is that the max FPS *is* the refresh rate being targeted or achieved.
// Let's make this calculator about determining the *target* refresh rate given a desired FPS at a resolution.
// The output will be the target refresh rate.
var calculatedRefreshRate = maxFrameRate; // In this context, the max FPS is what we consider the target refresh rate.
resultDiv.innerHTML = "For a display with a resolution of " + horizontalResolution + "x" + verticalResolution +
" pixels, achieving a maximum frame rate of " + maxFrameRate + " FPS, " +
"the target refresh rate is approximately " + calculatedRefreshRate + " Hz.";
}
.calculator-wrapper {
font-family: sans-serif;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
max-width: 500px;
margin: 20px auto;
background-color: #f9f9f9;
}
.calculator-wrapper h2 {
text-align: center;
color: #333;
margin-bottom: 15px;
}
.input-section {
margin-bottom: 15px;
}
.input-section label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
.input-section input[type="number"] {
width: calc(100% – 22px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
button {
display: block;
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 1.1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
padding: 15px;
background-color: #e7f3fe;
border-left: 6px solid #2196F3;
text-align: center;
font-size: 1.1rem;
color: #333;
}