javascript学习笔记

最新推荐文章于 2025-01-31 12:43:53 发布

原创最新推荐文章于 2025-01-31 12:43:53 发布 · 302 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文提供了一系列HTML与JavaScript编程实例，包括加法计算器、字符串处理、复利计算等功能，适合初学者实践与理解基本的网页交互原理。

加法计算器

<html>
<body>
<input id="num1" type="text" size="7">+
<input id="num2" type="text" size="7">=
<input id="result" type="text" size="7">
<input type="button" value="运算" onclick="calcu()">
<script>
var a,b;
function calcu(){
a=parseFloat(document.getElementById("num1").value);//必加parseFloat转换为数字
b=parseFloat(document.getElementById("num2").value);
var result=a+b;
document.getElementById("result").value=result;
}
</script>
</body>
</html>

在这里插入图片描述
二、练习-黄鹤

<html>
<script>
function newtext()
{
var address=document.getElementById("address").value;
var type=document.getElementById("type").value;
var company=document.getElementById("company").value;
var boss=document.getElementById("boss").value;
var debt=document.getElementById("debt").value;
var product=document.getElementById("product").value;
var per=document.getElementById("per").value;
document.getElementById("result").value=address+"最大"+type+company+"倒闭了，王八蛋老板"+boss+"吃喝嫖赌，欠下了"+debt+"个亿，带着他的小姨子跑了!我们没有办法，拿着"+product+"抵工资!原价都是一"+per+"多、两"+per+"多、三"+per+"多的贴膜，现在全部只卖二十块，统统只要二十块!"+boss+"王八蛋，你不是人!我们辛辛苦苦给你干了大半年，你不发工资，你还我血汗钱，还我血汗钱!"
}
</script>
<style>
span{
display:inline-block;
border:solid 1px lightgrey;
font-size:87%;
width:120px;
margin-bottom:10px;
}
</style>
<body>
<span>地名：</span>
<input id="address" type="text" size="15" value="浙江">
<span>公司类型：</span>
<input id="type" type="text" size="15" value="互联网公司">
<br/>
<span>公司名称：</span>
<input id="company" type="text" size="15" value="阿里九九">
<span>老板姓名：</span>
<input id="boss" type="text" size="15" value="牛风">
<br/>
<span>欠钱：</span>
<input id="debt" type="text" size="15" value="一万">
<span>产品：</span>
<input id="product" type="text" size="15" value="贴膜">
<br/>
<span>价格计量单位：</span>
<input id="per" type="text" size="15" value="百">
<br/>
<input style="margin-left:235px;margin-bottom:15px" type="button" value="生成" onclick="newtext()">
<br/>
<textarea id="result"  style="width:540px;height:150px"></textarea>
</body>
</html>

在这里插入图片描述
三、练习-复利计算

<html>
<script>
function calcu()
{//第一年不追加资金，
var fond=parseFloat(document.getElementById("fond").value);
var benefit=parseFloat(document.getElementById("benefit").value)/100;
var year=parseFloat(document.getElementById("year").value);
var perfond=parseFloat(document.getElementById("perfond").value);
var a=fond+(year-1)*perfond;
var b,c=fond,i;
for(i=0;i<year;i++)
{
if(i!=0){
c=(c+perfond)*(1+benefit);
}
else{
c=c*(1+benefit);}
}
b=c-a;
document.getElementById("one").value=a;
document.getElementById("two").value=b;
document.getElementById("three").value=c;
}
</script>
<style>
td{
border:1px silver solid;
padding:5px;
margin:0px;
}
input{
margin-right:5px;
}
</style>
<body>
<table width="300px" style="border-collapse:collapse">
<tr>
<td width="85px" style="font-size:85%">起始资金</td>
<td><input id="fond" type="text" value="10000">￥</td>
</tr>
<tr>
<td style="font-size:85%">每年收益</td>
<td><input id="benefit" type="text" value="5">%</td>
</tr>
<tr>
<td style="font-size:85%">复利年数</td>
<td><input id="year" type="text"  value="10">年</td>
</tr>
<tr>
<td style="font-size:85%">每年追加资金</td>
<td><input id="perfond" type="text"  value="10000">￥</td>
</tr>
<tr>
<td colspan="2" style="font-size:85%" align="center"><button onclick="calcu()" style="width:160px;margin:5px">计算</button></td>
</tr>
<tr>
<td style="font-size:85%">本金和</td>
<td><input id="one" type="text" value="0">￥</td>
</tr>
<tr>
<td style="font-size:85%">利息和</td>
<td><input id="two" type="text" value="0">￥</td>
</tr>
<tr>
<td style="font-size:85%" >本息和</td>
<td><input id="three" type="text" value="0">￥</td>
</tr>
</table>
</body>
</html>

在这里插入图片描述
四、乘法计算器并以科学计数法表示
var a 和 var a=new Number() 使用时很多互通之处

<html>
<script>
function calcu()
{
var a=new Number(parseFloat(document.getElementById("a").value));
var b=parseFloat(document.getElementById("b").value);
var result=new Number();
result=a*b;
document.getElementById("result").value=result.toExponential();
}
</script>
<style>
input{
margin:5px;
background-color:lightgrey;
}
</style>
<body>
<input type="text" id="a" size="5" >*
<input type="text" id="b" size="5" >=
<input type="text" id="result" size="5">
<button onclick="calcu()">运算</button>
</body>
</html>

在这里插入图片描述
五、字符串练习（子串替换）

<html>
<script>
function replace()
{
var text=document.getElementById("text").value;
var search=document.getElementById("search").value;
var replacement=document.getElementById("replacement").value;
var regS=new RegExp(search,"g");
var result=text.replace(regS,replacement);
//一定要加这句，不能将text.replace直接给result的value赋值  TypeError: Cannot set property 'value'  字符串string->对象object
document.getElementById("result").value=result;
}
</script>
<body>
<table border="0" width="300px">
<tr>
<td>源字符串：</td>
<td><textarea id="text">example</textarea></td>
</tr>
<tr>
<td>查询:</td>
<td><input type="search" id="search"></td>
</tr>
<tr>
<td>替换为:</td>
<td><input type="replacement" id="replacement"></td>
</tr>
<tr>
<td>替换结果：</td>
<td><textarea id="result"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center" onclick="replace()"><button>替换</button></td>
</tr>
</table>
</body>
</html>

在这里插入图片描述
六、数组（排序）
去掉重复的

<script>
function p(s)
{
document.write(s);
document.write("<br>");
}
function check(value,a){
for(i in a){
if(value==a[i])
return true;
}
return false;
}
function removeDuplicate(a){
var result=new Array();
while(a.length!=0){
var v=a.pop();
console.log(v);
if(!check(v,a)){
result.push(v);
}
}
return result;
}
var x=new Array(1,3,4,5,7,7,4,5,6,7,7);
p("数组x是："+x);
x=removeDuplicate(x);
x.sort();
p(x);
</script>

在这里插入图片描述
七、字符串替换（字符串+数组）

<html>
<script>
function letter()
{
var text=document.getElementById("text").value;
var shun=new Array();
var i;
//document.write("jin");
for(i=0;i<text.length;i++)
{
  if(text[i]!=" ")
  {
    shun.push(text[i]);
  }
}
/*
var dao=shun.sort(); //dao指向shun的空间，并不是拷贝到另一个空间
dao.reverse();
document.write(shun);*/
document.getElementById("shun").value=shun.join("");
document.getElementById("dao").value=shun.reverse().join("");
}

function word()
{//a由split得到，为object型，可用sort/join等，而text是string型
var text=document.getElementById("text").value;
var a=text.split(" ");//split()分割字符串
//document.write(typeof text);
a.sort();
document.getElementById("shun").value=a.join(" ");
var dao=a.reverse();
document.getElementById("dao").value=dao.join(" ");
}
</script>
<body>
<table width="350px" border="0">
<tr>
<td>随机输入英文字符串：</td>
<td><textarea id="text">what a great day</textarea></td>
</tr>
<tr>
<td>正排序结果：</td>
<td><textarea id="shun"></textarea></td>
</tr>
<tr>
<td>倒排序结果：</td>
<td><textarea id="dao"></textarea></td>
</tr>
<tr align="center">
<td colspan="2"><button  onclick="letter()">按照字母排序</button></td>
</tr>
<tr align="center">
<td colspan="2"><button  onclick="word()">按照单词排序</button></td>
</tr>
</table>
</body>
</html>

在这里插入图片描述

八、计算年龄（日期）

<html>
<script>
function calcu()
{
console.log("jin");
var age;
var year=document.getElementById("year").value;
var month=document.getElementById("month").value-1;
var day=document.getElementById("day").value;
console.log(year);
var now=new Date();
console.log(now);
age=now.getFullYear()-year;
if(month>now.getMonth()){
age+=1;}
else if(month==now.getMonth()&&day>=now.getDay()){
age+=1;}
console.log(age);
document.getElementById("age").innerHTML=age;//.value不能更改span
}
</script>

请输入出生年月日<br/>
年份<select id="year">
<script>
for(i=1900;i<2020;i++)
{
document.write("<option>" +i+ "</option>");
//document.write("<option value='"+i+"'>"+i+"</option>");引号内i取值
}
</script>
</select>
月份<select id="month">
<script>
for(i=1;i<13;i++)
{
document.write("<option>" +i+ "</option>");
}
</script>
</select>
日<select id="day">
<script>
for(i=1;i<32;i++)
{
document.write("<option>" +i+ "</option>");
}
</script>
</select>
<br/><br/>
<button onclick="calcu()">计算年龄</button>
<br/><br/>
今年<span id="age">100</span>岁
</html>

在这里插入图片描述
九、计时器

<span id="time"></span>
<button onclick="once()">只执行一次</button>
<button onclick="unlimit()">无限执行</button>
<button onclick="stop()">停止执行</button>
<script>
print();
var t;
function once(){
t=setTimeout(print,3000);
}
function unlimit(){
t=setInterval(print,1000);
}
function stop(){
clearInterval(t);
}
function print(){
console.log("jin");
var d=new Date();
var h=d.getHours();
var m=d.getMinutes();
var s=d.getSeconds();
document.getElementById("time").innerHTML=h+":"+m+":"+s;
}
</script>

在这里插入图片描述