console 命令行工具 X clear

console

/**
 * 单位换算
 * 
 * 刚刚接触单位换算的孩子们是很难理解单位之间是如何转换的，希望通过这个小课程帮助
 * 孩子们彻底掌握单位之间的换算过程
 * 
 * 主要涉及到以下一些内容
 * 
 * 1. 什么是单位？
 * 
 * 单位的英文单词是：unit，计量一个事物某种属性的标准，如绳子的长度，人的身高等
 * 
 * 2. 为什么有不同的单位？
 * 
 * 长度的常见单位有千米、米、分米、厘米、再微观一些的有：毫米、微米、纳米等。那么
 * 为什么同样是计量物体长度的单位会有这么多种？
 * 
 * 3. 如何在不同单位之间进行换算？
 */

// 定义标准单位
const standard = '米'

// 定义不同的单位以及转为标准单位的系数
const units = [
    ['年', 1000],
    ['月', 1],
    ['日', 1 / 10],
    ['时', 1 / 100],
    ['分', 1 / 1000],
    ['秒',1/10000],
  

];

function initUnits() {
    const options = [];
    for (const unit of units) {
        options.push('<option value=' + unit[1] + '>' + unit[0] + '</option>');
    }
    document.getElementById('units_in').innerHTML = options.join('');
    document.getElementById('units_out').innerHTML = options.join('');
}

/**
 * 获取输入的数字
 */
function getInput() {
    return document.getElementById('input').value * 1;
}
function setOutput(val) {
    document.getElementById('output').innerText = val;
}
/**
 * 获取输入单位的系数
 */
function getInputUnitFactor() {
    return document.getElementById('units_in').value * 1;
}
/**
 * 获取输出单位的系数
 */
function getOutputUnitFactor() {
    return document.getElementById('units_out').value * 1;
}

/**
 * 单位转换
 */
function convert() {
var input = getInput();
f1=getInputUnitFactor();
f2=getOutputUnitFactor();

var output=input*f1/f2
setOutput(output)

}

initUnits();
convert();

<html>

<head>
	<title>单位换算</title>
</head>

<body>
	<div class='container flex flex-c fvc'>
		<div class='title flex fvc'>单位转换神器</div>
		<div class='subtitle'>EASY UNIT CONVERTER</div>
		<div class="intro flex fhc fvc">
			<i>请你来实现一个单位自动转换神器，通过这个神器，可以将一个数据单位自动转换位另外一个单位！</i>
            </div>
            <div class='main flex'>
                <input id='input' placeholder='输入数字' value='100' onChange='convert()'/>
                <select id='units_in' onChange='convert()'></select>
                <span style='margin: 0 10'> = </span>
                <span id='output' onChange='convert()'></span>
                <select id='units_out' onChange='convert()'></select>
            </div>
            <div class="intro flex flex-c fhc">
                <b>1. 请你再来开发一个时间单位转换器，或者你还能开发什么单位转换器?</b>
                <b>2. 如果让你来设计个衡量长度的单位，你觉得可以吗？</b>
            </div>
        </div>
    </body>
</html>

html,
body {
    background: rgb(4, 0, 255);
    font-family: PingFangSC
}

.flex {
    display: flex;
}

.flex-c {
    flex-direction: column;
}

.fhc {
    justify-content: center;
}

.fvc {
    align-items: center;
}

.container {
    width: 100%;
    height: 200px;
    margin: auto;
}

.main {
    margin: 60px 0px;
}

.title {
    font-size: 24px;
    height: 80px;
}

.subtitle {
    height: 40px;
    font-size: 14px;
    color: rgb(0, 255, 21);
}

.intro {
    height: 100px;
    color: rgb(255, 0, 0);
    font-size: 12px;
}

#input,
#output {
    width: 80px;
    border: none;
    border-bottom: 1px solid rgb(202, 188, 60);
}

#output {
    min-width: 40px;
    padding: 0px 10px;
}

select {
    width: 80px;
    border: none;
    border-bottom: 1px solid rgba(231, 57, 57, 0.829);
}

#units_in {
    color: rgba(9, 247, 116, 0.774);
    font-weight: bold;
}

#units_out {
    color: rgb(1, 247, 255);
    font-weight: bold;
}