master

分支 (1)

管理

管理

master

length-unit-conversion-widget
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<style>
			.border {
				padding: 2vh;
				border: 1px solid #ccc;
				box-sizing: border-box;
				border-radius: 10px;
			}

			input {
				margin-top: 1vh;
			}

			h3,h4 {
				text-align: center;
			}
			p{
				margin-top: 1vh;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid border">
			<div id="computed_props">
				<h3>长度单位换算器-输入数字换算等量参数</h3>
				<p><strong>公制-国际长度计量单位</strong></p>
				<p id="gongzhi"></p>
				<input type="text" v-model="kilometers">千米 =
				<input type="text" v-model="meters">米=
				<input type="text" v-model="centimeters">厘米=
				<input type="text" v-model="millimeter">毫米
				<br>
				<p><strong>国际微观长度单位</strong></p>
				<p id="weiguan"></p>
				<input type="text" v-model="micron">微米=
				<input type="text" v-model="nanometer">纳米
				<br>
				<p><strong>距离计量单位</strong></p>
				<p id="juli"></p>
				<input type="text" v-model="kilometre">公里=
				<input type="text" v-model="li">里
				<br>
				<p><strong>市值-中国长度计量单位</strong></p>
				<p id="shizhi"></p>
				<input type="text" v-model="zhang">丈=
				<input type="text" v-model="chi">尺=
				<input type="text" v-model="cun">寸=
				<input type="text" v-model="fen">分=
				<input type="text" v-model="lii">厘=
				<input type="text" v-model="hao">毫
			</div>
			<p id="info"></p>
			<p id="danger"></p>
			<!-- <hr>
			<h4>此程序采用Vue.js@2.2编写</h4> -->
			<script type="text/javascript">
				var vm = new Vue({
					el: '#computed_props',
					data: {
						kilometers: " ", //默认千米
						meters: " ", //默认米
						centimeters: " ",
						millimeter: " ",
						micron: " ",
						nanometer: " ",
						kilometre:" ",
						li:" ",
						zhang:" ",
						chi:" ",
						cun:" ",
						fen:" ",
						lii:" ",
						hao:" ",
					},
					methods: {},
					computed: {},
					//属性空
					watch: {
						//千米
						kilometers: function(val) {
							this.kilometers = val;
							this.meters = this.kilometers * 1000; //米
							this.centimeters = this.kilometers * 100000; //厘米
							this.millimeter = this.kilometers * 1000000; //毫米
							this.micron = this.kilometers * 1000000000;//微米
							this.nanometer = this.kilometers * 1000000000000; //纳米
							this.kilometre = this.kilometers;//公里
							this.li = this.kilometers * 2;//里
							this.zhang = this.kilometers *300;//丈
							this.chi = this.kilometers * 3000;//尺
							this.cun = this.kilometers * 30000;//寸
							this.fen = this.kilometers * 300000;//分
							this.lii = this.kilometers * 3000000;//厘
							this.hao = this.kilometers * 30000000;//毫
						},
						//监听米到千米的进率，米=千米数*1000
						//米
						meters: function(val) {
							this.kilometers = val / 1000;
							this.meters = val;
						},
						//监听千米到米的进率，千米=米/1000
						//厘米
						centimeters: function(val) {
							this.meters = val / 100;
							this.centimeters = val;
						},
						//监听米到厘米的进率，米=厘米/100
						//毫米
						millimeter: function(val) {
							this.centimeters = val / 10;
							this.millimeter = val;
						},
						//微米
						micron: function(val) {
							this.millimeter = val / 1000;
							this.micron = val;
						},
						// //纳米
						// nanometer: function(val) {
						// 	this.micron = val / 1000;
						// 	this.nanometer = val;
						// },
						//公里
						kilometre:function(val){
							this.nanometer = val * 1000000000000;
							this.kilometre =val;
						},
						//里
						li:function(val){
							this.kilometre = val * 0.5;
							this.li = val;
						},
						zhang:function(val){
							this.li =val / 150;
							this.zhang = val;
						},
						chi:function(val){
							this.zhang =val / 10;
							this.chi = val;
						},
						cun:function(val){
							this.chi =val / 10;
							this.cun = val;
						},
						fen:function(val){
							this.cun = val / 10;
							this.fen = val;
						},
						lii:function(val){
							this.fen = val /10;
							this.lii = val;
						},
						hao:function(val){
							this.lii = val /10;
							this.hao = val;
						}
					}
				});
				vm.$watch('kilometers', function() {
					// 这个回调将在 vm.kilometers 改变后调用
					document.getElementById("info").innerHTML = "<code>"+"请在公制单位下填入参数" + "公制数值范围: " + "0~9" +"</code>";
					document.getElementById("gongzhi").innerHTML ="<code>" +"千米转换米进率1000，米转换厘米进率100，厘米转换毫米进率10" + "千米转换毫米=1000x100x10" +"</code>";
					document.getElementById("weiguan").innerHTML ="<code>"+ "毫米转微米进率1000，微米转纳米进率1000" + "毫米转微米=1000*1000" + "</code>";
					document.getElementById("juli").innerHTML ="<code>"+ "1千米=1公里，公里转换里进率500"+"</code>";
					document.getElementById("shizhi").innerHTML = "<code>"+"米转丈进率3，丈转尺进率10，尺转寸进率10，寸转分进率10，分转厘进率10，厘转毫进率10"+ "</code>";
					document.getElementById("danger").innerHTML = "由于微观长度单位数值过于庞大，这里不支持全部显示，如果需要请自行使用科学计数法来换算"+ "例如：1亿=1*10^8,1后面8个零";
				})
			</script>
		</div>
	</body>
</html>