事件

javascript允许html与用户交互的行为

例如:鼠标点击事件

<script>
function sayHello{alert('Hello World ppp!');
}
</script><button onclick="sayHello()">kick me</button>

错误处理

<script>function f1(){//函数f1是存在的
}
try{document.write("试图调用不存在的函数f2()<br>"); f2();  //调用不存在的函数f2();
}
catch(err){alert("捕捉到错误:"+err.message);
}
document.write("<p>错误被捕捉了，后续的代码得以继续执行</p>");</script>

1.隐藏/显示文字

<button onclick="document.getElementById('text').style.display='none'">隐藏文本
</button>
<button onclick="document.getElementById('text').style.display='block'" >显示文本
</button>
<p id="text">这是一段可以隐藏的文字</p>

2.简单的加法计算器

js代码

function add(){var v = parseFloat(document.getElementById('num1').value)+parseFloat(document.getElementById("num2").value);document.getElementById("result").value=v;}

html代码

<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"><title>简易加法计算器</title><style>input{width: 100px;}</style><script src="./practice1.js"></script>
</head>
<body><input type="text" id="num1" ><span>+</span><input type="text" id="num2" ><span>=</span><input type="text" id="result" value=""><input type="button" value="计算" onclick="add()" >
</body>
</html>

效果:

★★★3.简易利息计算器

效果:

css代码

table{border-collapse:collapse;
}
td{border:1px silver solid;padding: 5px;font-size:18px;}
input{width: 150px;font-size:18px;color: rgb(241, 6, 6);
}

js代码

function calculate(){var initMoney = document.getElementById("initMoney").value;var rate = document.getElementById("rate").value;var year = document.getElementById("year").value;var addition = document.getElementById("addition").value;try{initMoney = Number.parseFloat(initMoney);rate = Number.parseFloat(rate);year = Number.parseFloat(year);addition = Number.parseFloat(addition);if(year){var principalSum = initMoney+(year-1)*addition;//本金总和}else{var principalSum = initMoney;}var sum = CalculateSum(initMoney,1+rate/100,year,addition);//利息总和var profitSum=sum-principalSum;//本息和SetValue('principalSum',principalSum);SetValue('profitSum',profitSum);SetValue('sum',sum);}catch(err){alert(err.message);}
}function SetValue(id,value){document.getElementById(id).value = value;
}
function CalculateSum(initMoney,multiplyPower,year,addition){if(0==year) return initMoney;var result=initMoney;for(var i=0;i<year;i++){if(i){//第一年无新增本金,之后每年年初增加本金result+=addition;}result *= multiplyPower;   }return result;
}

html代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><head>利息计算器</head><link rel="stylesheet" type="text/css" href="./利息计算.css"><script src="./利息计算.js"></script>
</head>
<body><table><tr><td>起始资金</td><td><input type="text" id="initMoney" value='10000'> ￥</td></tr><tr><td>每年收益</td><td><input type="text" id="rate" value='5'> %</td></tr><tr><td>复利年数</td><td><input type="text" id="year" value='1'> 年</td></tr><tr><td>每年追加资金</td><td><input type="text" id="addition" value='10000'> ￥</td></tr><tr><td colspan="2" align="center"><input type="button" value="计算"onclick="calculate()" ></td></tr><tr><td>本金和</td><td><input type="text" id="principalSum" value="0"> ￥</td></tr><tr><td>利息和</td><td><input type="text" id="profitSum" value="0"> ￥</td></tr><tr><td>本息和</td><td><input type="text" id="sum" value="0"> ￥</td></tr></table>
</body>
</html>

[JavaScript学习记录] 首次运用于网页,做一个简易利息计算器!!!相关推荐

js计算器代码加减乘除_如何用jQuery做一个简易版计算器
经过几个小时地敲敲打打,终于把这一部分的代码完成了. 这类问题的难点不在于布局,而是如何恰当地使用jQuery达成计算.交互的目的,比如储存.显示数值,数据类型的转换等. 在听老师讲课之前的我,思路是 ...
【JavaScript学习记录】快速下载网页所有图片
写在前面最近有个兼职需要手动下载网页图片,两分/张,这劳动力也太廉价了,为了节省时间,应该开动脑筋,于是写了个js,但是我太菜了只能写个半自动化的-- 开始 1.首先准备一个网页,就用某瓣举例. 开 ...
js 网页做一个简单的计算器
结果截图 <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...
使用Python中内置tkinter模块做一个简易的计算器
当前环境: windows + python3.7 + tkinter 模块一.总体规划 1.需要用到的模块有 tkinter 2.tkinter 模块中需要用到的知识点有: 2.1.创建主窗口 ...
python 做一个简单的计算器
python:做一个简易的计算器(加减乘除,重复使用) 第一种方法 def jisuanqi(): #实现加减乘除运算a, b, c=shuru()if c == "+":z = ...
JavaScript学习记录01快速入门、基本语法、严格检查模式
文章目录 JavaScript学习记录01快速入门.基本语法.严格检查模式 1.1什么是JavaScript 1.2认识JavaScript框架 1.3快速入门 1.4基本语法入门 1.5数据类型简介 ...
做一个简单网页(做一个简单网页多少钱)
怎样做一个简易的网页?做一个简单网页多少钱做一个简易的普通网页比较容易.当然,制作的方法有好几种,有的是直接写代码.有的是用绘图软件绘制页面再导出网页.常用的是使用网页制作软件做网页.下面以普通静态 ...
如何用idea做一个简易的网页登录界面
在上一节课的内容基础上做一个简易的网页登录界面--18级软工1班03 打开idea后打开上一节课的工程文件(一般在打开idea软件的同时,idea会默认打开上一次的文件)并在左边列表的main文件夹下 ...
怎么用线程刷新 tkinter 进度条_tkinter做一个简易提词板（2）
书接上文花果山美男子:tkinter做一个简易提词板zhuanlan.zhihu.com 上回说到,文字的动态效果还可以用after方法和StringVar来实现,今天我们就用它们来重新制作提词板 ...

[JavaScript学习记录] 首次运用于网页,做一个简易利息计算器!!!

事件

错误处理

1.隐藏/显示文字

2.简单的加法计算器

效果:

★★★3.简易利息计算器

效果:

[JavaScript学习记录] 首次运用于网页,做一个简易利息计算器!!!相关推荐

最新文章

热门文章

[JavaScript学习记录] 首次运用于网页,做一个简易利息计算器!!!

事件

错误处理

1.隐藏/显示文字

2.简单的加法计算器

效果:

★★★3.简易利息计算器

效果:​​​​​​​

[JavaScript学习记录] 首次运用于网页,做一个简易利息计算器!!!相关推荐

最新文章

热门文章

效果: