中原工学院软件学院ljc鸿蒙简易小工具组
1.1项目思路
设计一个主页选择跳转计算器和记事本。分别在跳转页面设计计算器的功能和样式，设计记事本的功能和样式
1.2建立项目
Compile SDK选择7版本，编程语言为JS。
1.2 项目实现目录与代码
（i）项目目录
（ii）项目代码
页面一：
Index.hml
<div class="container">
<text class="title">
请选择进入计算器或者记事本
</text>
<!-- 添加按钮，值为Next，并绑定onclick方法-->
<input class="btn" type="button" value="计算器" onclick="jisuan"></input>
<input class="btn" type="button" value="记事本" onclick="jishi"></input>
</div>
Index.css
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
.title {
font-size: 100px;
font-weight: bold;
text-align: center;
width: 100%;
margin: 10px;
}
.btn {
font-size: 60px;
font-weight: bold;
text-align: center;
width: 40%;
height: 5%;
margin-top: 20px;
}
Index.js
// index.js
// @ohos.router模块功能从API version 8开始支持，请使用对应匹配的SDK
import router from '@ohos.router';
export default {
jisuan: function () {
router.push({
url: "pages/second/second"
})
},
jishi:function () {
router.push({
url: "pages/third/third"
})
}
}
页面二
Second.hml
<div class="container">
<text class="input-content">{{inputcontent}}
</text>
<div class="menu-content">
<div class="caluater" for="{{ caluater }}" >
<button class="content" onclick="calculatorClick({{ $item.id }})">{{ $item.id }}</button>
</div>
</div>
<div class="menu-content">
<div class="caluater" for="{{ caluater1 }}">
<button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button>
</div>
</div>
<div class="menu-content">
<div class="caluater" for="{{ caluater2 }}">
<button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button>
</div>
</div>
<div class="list2-content">
<div class="list3-content">
<div class="list2-content">
<div class="caluater" for="{{ caluater3 }}">
<button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button>
</div>
</div>
<div class="list2-content">
<div class="caluater" for="{{ caluater4 }}">
<button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button>
</div>
</div>
</div>
<button class="equals" onclick="calculatorResult">=</button>
</div>
</div>
Second.css
.container {
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
width: 100%;
}
.input-content{
background-color: #00ffffff;
text-align: right;
font-size: 80px;
padding: 300px;
font-weight: bold;
}
.menu-content{
width: 100%;
background-color: brown;
allow-scale: true;
}
.caluater {
flex-direction: row;
width: 100%;
height: 100px;
background-color: #00ffffff;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
}
.content{
font-size: 80px;
font-weight: bold;
radius: 50px;
width: 100%;
height: 100%;
text-color: #007EFF;
background-color: #A8CCFB;
}
.content2{
font-size: 80px;
font-weight: bold;
radius: 40px;
width: 100%;
height: 100%;
text-color: #000000;
background-color: #dddcdc;
}
.list2-content{
flex-direction: row;
justify-content: center;
align-items: center;
background-color: brown;
}
.list3-content{
flex-direction: column;
margin-bottom: 10px;
}
.equals{
width: 30%;
height: 180px;
font-size: 80px;
font-weight: bold;
radius: 10px;
margin-left: 5px;
margin-right: 5px;
}
Second.js
import prompt from '@system.prompt';
export default {
data: {
title: "",
inputcontent: "",
number1: "",
number2: "",
type: "",
caluater: [
{
'id': "C",
},
{
'id': "÷",
},
{
'id': "×",
},
{
'id': "←",
}
],
caluater1:[
{
'id': "7",
},
{
'id': "8",
},
{
'id': "9",
},
{
'id': "+",
}
],
caluater2:[
{
'id': "4",
},
{
'id': "5",
},
{
'id': "6",
},
{
'id': "-",
}
],
caluater3:[
{
'id': "1",
},
{
'id': "2",
},
{
'id': "3",
}
],
caluater4:[
{
'id': "%",
},
{
'id': "0",
},
{
'id': ".",
}
]
},
onInit() {
},
calculatorClick(result){
this.inputcontent = this.inputcontent+"";
let str = this.inputcontent
.substring(this.inputcontent.length-1, this.inputcontent.length);
switch(result) {
case "←":
if(this.inputcontent.length > 0) {
let str = this.inputcontent
.substring(0, this.inputcontent.length - 1);
this.inputcontent = str;
}
break;
case "C":
this.inputcontent = "";
break;
case "+":
this.calcula(str,result,"+");
break;
case "-":
this.calcula(str,result,"-");
break;
case "×":
this.calcula(str,result,"×");
break;
case "÷":
this.calcula(str,result,"÷");
break;
case ".":
if(this.inputcontent.length > 0 && str != ".") {
this.inputcontent += result;
}
break;
default:
this.inputcontent += result;
break;
}
},
calcula(str,result,cla){
if(this.inputcontent.length > 0 && str != "+" && str != "-" && str != "×" && str != "÷") {
this.type = cla;
this.inputcontent += result;
} else {
this.calculatorResult();
}
},
calculatorResult(){// 计算结果
var temp = this.inputcontent.split(this.type);
console.log("this.inputcontent = "+this.inputcontent)
let str = this.inputcontent
.substring(this.inputcontent.length-1, this.inputcontent.length);
console.log("this.type = "+this.type)
if (this.type == "+") { // 加法计算
if(temp.length > 1) {
console.log("temp = "+temp)
var num1 = parseFloat(temp[0]);
var num2 = parseFloat(temp[1]);
console.log("num1 = "+num1)
console.log("num2 = "+num2)
console.log("str = "+str)
if(str != "+") {
this.inputcontent = num1 + num2;
this.type = "";
}
}
} else if(this.type == "-") { // 减法计算
if(temp.length > 1) {
var num1 = parseFloat(temp[0]);
var num2 = parseFloat(temp[1]);
if(str != "-") {
this.inputcontent = num1 - num2;
this.type = "";
}
}
} else if(this.type == "×") { // 乘法计算
if(temp.length > 1) {
var num1 = parseFloat(temp[0]);
var num2 = parseFloat(temp[1]);
if(str != "×") {
this.inputcontent = num1 * num2;
this.type = "";
}
}
} else if(this.type == "÷") { // 除法计算
if(temp.length > 1) {
var num1 = parseFloat(temp[0]);
var num2 = parseFloat(temp[1]);
if(str != "÷") {
this.inputcontent = num1 / num2;
this.type = "";
}
}
}
}
}
页面三
Third.hml
<div class="container">
<text class="title">待办事项</text>
<div class="item" for="{{todolist}}">
<text class="todo">{{$item.info}}</text>
<switch showtext="true" checked="{{$item.status}}"
texton="完成" textoff="待办"
class="switch"
@change="switchChange($idx)"></switch>
<button class="remove" onclick="remove($idx)">删除</button>
</div>
<div class="info">
<text class="info-text">您还有</text>
<text class="info-num">{{TodoNum}}</text>
<text class="info-text">件事情待办，加油！</text>
</div>
<div class="add-todo">
<input class="plan-input" type="text"></input>
<button class="plan-btn" onclick="addTodo">添加待办</button>
</div>
</div>
Third.css
.container {
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-bottom: 100px;
}
.title {
font-size: 25px;
margin-top: 20px;
margin-bottom: 20px;
color: #000000;
opacity: 0.9;
font-size: 28px;
}
.item{
width: 325px;
padding: 10px 0;
flex-direction: row;
align-items: center;
justify-content: space-around;
border-bottom: 1px solid #eee;
}
.todo{
color: #000;
width: 180px;
font-size: 18px;
}
.switch{
font-size: 12px;
texton-color: green;
textoff-color:red;
text-padding: 5px;
width: 100px;
height: 24px;
allow-scale: false;
}
.remove {
font-size: 12px;
margin-left: 10px;
width: 50px;
height: 22px;
color: #fff;
background-color: red;
}
.info{
width: 100%;
margin-top: 10px;
justify-content: center;
}
.info-text {
font-size: 18px;
color: #AD7A1B;
}
.info-num{
color: orangered;
margin-left: 10px;
margin-right: 10px;
}
.add-todo {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
flex-direction: row;
justify-content: space-around;
align-items: center;
background-color: #ddd;
}
.plan-input {
width: 240px;
height: 40px;
background-color: #fff;
}
.plan-btn {
width: 90px;
height: 35px;
font-size: 15px;
}
Third.js
import hilog from '@ohos.hilog';
export default {
remove(index){
console.log(index)
this.todolist.splice(index,1)
},
switchChange(index){
console.log(index);
this.todolist[index].status = !this.todolist[index].status;
},
computed: {
TodoNum(){
let num = 0;
this.todolist.forEach(item => {
if(!item.status){
num++;
}
});
return num;
}
},
addTodo() {
console.log("在这里设置一个新值");
this.todolist.push({
info:'键盘输入',
status: false
})
}
}
第2章 项目实现结果
2.1 项目实现结果图
