React.html
Babel 也可以用于浏览器环境。但是,从 Babel 6.0 开始,不再直接提供浏览器版本,而是要用构建工具构建出来。如果你没有或不想使用构建工具
使用babel-standalone模块提供的浏览器版本,将其插入网页。引用
引用2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class Comment extends React.Component {
render() {
return <div>这里是Comment组件</div>;
}
}
ReactDOM.render(
<Comment></Comment>,
document.getElementById('example')
);
</script>
</body>
</html>
注意,网页实时将 ES6 代码转为 ES5,对性能会有影响
Vue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/view-design/dist/styles/iview.css" />
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="https://unpkg.com/view-design/dist/iview.min.js"></script>
<title>投资计算器</title>
<style>
#app {
width: 400px;
margin: 40px auto;
padding: 0 20px;
}
.mb-10 {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="app">
<div class="text-center">
<div>
<h2 class="mb-10">投资计算器</h2>
<i-select v-model="computedMode" style="width:200px" placeholder="请选择计算模式" class="mb-10">
<i-option v-for="item in selectList" :value="item.value" :key="item.value">{{ item.label }}
</i-option>
</i-select>
<i-input v-model="currentMoney" placeholder="请输入当前投资总资产" style="width: 200px" class="mb-10" key="currentMoney"></i-input>
<i-input v-model="monthMoney" placeholder="请输入每月可投资金额" style="width: 200px" class="mb-10" key="monthMoney"></i-input>
<i-input v-model="year" placeholder="请输入投资年限(整数)" style="width: 200px" class="mb-10" v-if="computedMode !== '1'" key="year"></i-input>
<i-input v-model="totalMoney" placeholder="请输入预期总资产" style="width: 200px" class="mb-10" v-if="computedMode !== '0'" key="totalMoney"></i-input>
<i-input v-model="rate" placeholder="请输入预期年化收益率%" style="width: 200px" class="mb-10" v-if="computedMode !== '2'" key="rate"></i-input>
<div>
<i-button icon="md-calculator" type="primary" @click="compute()" style="width: 200px">计算一下</i-button>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
computedMode: '2',
selectList: [
{
label: '计算总资产',
value: '0',
},
{
label: '计算所需年限',
value: '1',
},
{
label: '计算所需年化率',
value: '2',
},
],
currentMoney: '',
monthMoney: '',
year: '',
totalMoney: '',
rate: ''
},
methods: {
compute() {
if (this.computedMode === '0') this.computeTotalMoney()
else if (this.computedMode === '1') this.computeYear()
else this.computeRate()
},
computeTotalMoney() {
if (/\D/.test(this.currentMoney) || /\D/.test(this.monthMoney) || /\D/.test(this.year) || /\D/.test(this.rate)) {
this.$Modal.error({
title: '错误',
content: '请输入正确的数字啦!!',
});
return;
}
let total = +this.currentMoney * (((100 + (+this.rate)) / 100) ** (+this.year))
let monthTotal = +this.year * 12, monthInterest = +this.monthMoney * +this.rate / 1200
for (let i = 0; i < monthTotal; i++) {
total += +this.monthMoney + monthInterest * (monthTotal - i)
}
this.$Modal.success({
title: '到期总资产',
content: '预计您到时总资产为' + (total | 0),
});
},
computeYear() {
if (/\D/.test(this.currentMoney) || /\D/.test(this.monthMoney) || /\D/.test(this.totalMoney) || /\D/.test(this.rate)) {
this.$Modal.error({
title: '错误',
content: '请输入正确的数字啦!!',
});
return;
}
let total = 0, year = 0, month = 0
while(total < +this.totalMoney) {
total = +this.currentMoney * (((100 + (+this.rate)) / 100 ) ** (year + 1))
let monthTotal = (year + 1) * 12, monthInterest = +this.monthMoney * +this.rate / 1200
for (let i = 0; i < monthTotal; i++) {
total += +this.monthMoney + monthInterest * (monthTotal - i)
if (total >= +this.totalMoney) {
month = i + 1
break
}
}
year++
}
let content = month % 12 === 0 ? (month / 12 | 0) + '年整' : (month / 12 | 0) + '年又' + (month % 12) + '月'
this.$Modal.success({
title: '预计所需投资年限',
content
});
},
computeRate() {
if (/\D/.test(this.currentMoney) || /\D/.test(this.monthMoney) || /\D/.test(this.totalMoney) || /\D/.test(this.year)) {
this.$Modal.error({
title: '错误',
content: '请输入正确的数字啦!!',
});
return;
}
let total = 0, rate = 1
while(total < +this.totalMoney) {
total = 0
total = +this.currentMoney * (((100 + rate) / 100 ) ** (+this.year))
let monthTotal = +this.year * 12, monthInterest = +this.monthMoney * rate / 1200
for (let i = 0; i < monthTotal; i++) {
total += +this.monthMoney + monthInterest * (monthTotal - i)
}
console.log(total,rate)
rate= rate + 1
}
this.$Modal.success({
title: '预计所需年化率',
content: rate - 1 + "%",
});
}
},
});
</script>
</body>
</html>