看程序学js-3 案例

最新推荐文章于 2022-05-10 19:33:18 发布

涂家豪

最新推荐文章于 2022-05-10 19:33:18 发布

阅读量184

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/tujiahao1/article/details/92665952

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、

<!DOCTYPE html>
<html>
<script>
  function generate(){
    var location = $("location");
    var companyType= $("companyType");
    var companyName= $("companyName");
    var bossName= $("bossName");
    var money= $("money");
    var product= $("product");
    var unit= $("unit");

    var result  = location +"最大"+companyType+companyName+"倒闭了，王八蛋老板"+bossName+"吃喝嫖赌，欠下了"+money+"个亿，"
      + "带着他的小姨子跑了!我们没有办法，拿着"+product+"抵工资!原价都是一"+unit+"多、两"+unit+"多、三"+unit+"多的"+product+"，"
      + "现在全部只卖二十块，统统只要二十块!"+bossName+"王八蛋，你不是人!我们辛辛苦苦给你干了大半年，"
      + "你不发工资，你还我血汗钱，还我血汗钱!";

    document.getElementById("result").value=result;

  }

  function $(id){
    var value = document.getElementById(id).value;
    return value;
  }

</script>

<style>
  body{
    font-family: 宋体;
  }
  span{
    display:inline-block;
    border: 1px solid lightgray;
    width:120px;
    margin-bottom:5px;
  }

  button#generate{
    width:80px;
    height:30px;
  }

  textarea{
    width:100%;
    height:150px;
    margin-top:20px;
  }

</style>

<body>
<span>地名:</span> <input type="text" id ="location"  value="浙江">
<span>公司类型:</span> <input type="text" id ="companyType"  value="互联网公司">
<br>
<span>公司名称:</span> <input type="text" id ="companyName" value="阿里九九">
<span>老板姓名:</span> <input type="text" id ="bossName" value="牛风">
<br>
<span>money:</span> <input type="text" id ="money" value="一万">
<span>产品:</span> <input type="text" id ="product" value="贴膜">
<br>
<span>价格计量单位:</span> <input type="text" id ="unit" value="百">

<br>
<div align="center">
  <button id="generate" onclick="generate()">生成</button>
  <br>
  <textarea id="result">浙江最大互联网公司阿里九九倒闭了，王八蛋老板牛风吃喝嫖赌，欠下了一万个亿，带着他的小姨子跑了!我们没有办法，拿着贴膜抵工资!原价都是一百多、两百多、三百多的贴膜，现在全部只卖二十块，统统只要二十块!牛风王八蛋，你不是人!我们辛辛苦苦给你干了大半年，你不发工资，你还我血汗钱，还我血汗钱!</textarea>
</div>

<br>

</body>
</html>

在这里插入图片描述
2、

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<style>
  table{
    border-collapse:collapse;
  }
  td{
    border:1px silver solid;
    padding: 5px;
    font-size:12px;
  }
  input{
    width:180px;
  }
</style>
<script>
  /*取幂函数*/
  function p(base, power){
    if(1==power)
      return base
    if(0==power)
      return 1;
    var result = base;
    for(var i = 0; i<power-1; i++){
      result = result*base;
    }
    return result;
  }

  /*取复利*/
  function fuli(rate, year){
    var result = 0;
    for(var i=year;i>0;i--){
      result+=p(rate,i);
    }
    return result;
  }

  function calc(){
    var initMoney= getNumberValue("initMoney");
    var rate= getNumberValue("rate") +0.0;
    var year= getNumberValue("year");
    var each= getNumberValue("each");
    var sum1 = (year-1)*each+initMoney;
    var sum3=each* fuli(  (1+rate/100),(year-1)) + initMoney*p( (1+rate/100) ,year);

    var sum2 = sum3-sum1;
    setValue("sum1",sum1);
    setValue("sum2",sum2);
    setValue("sum3",sum3);
  }

  function setValue(id,value){
    document.getElementById(id).value=value;
  }

  function getNumberValue(id){
    return parseFloat(document.getElementById(id).value);
  }
</script>
<table>
  <tr>
    <td>起始资金</td>
    <td><input type="text" id="initMoney" value='10000'> ￥</td>
  <tr>
    <td>每年收益</td>
    <td><input type="text" id="rate" value='5'> %</td>
  </tr>
  <tr>
    <td>复利年数</td>
    <td><input type="text" id="year" value='10'> 年</td>
  </tr>
  <tr>
    <td>每年追加资金</td>
    <td><input type="text" id="each" value='10000'> ￥</td>
  </tr>
  <tr>
    <td colspan="2" align="center"><input type="button" value="计算" onclick="calc()"></td>
  </tr>
  <tr>
    <td>本金和</td>
    <td><input type="text" id="sum1" disabled="disabled"  value='0'> ￥</td>
  </tr>
  <tr>
    <td>利息和</td>
    <td><input type="text" id="sum2"  disabled="disabled" value='0'> ￥</td>
  </tr>
  <tr>
    <td>本息和</td>
    <td><input type="text" id="sum3"  disabled="disabled" value='0'> ￥</td>
  </tr>
</table>
</body>
</html>

在这里插入图片描述
3、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  function getValue(id){
    return document.getElementById(id).value;
  }
  function setValue(id,value){
    document.getElementById(id).value=value;
  }
  function replace(){

    var src = getValue("src")

    var search = getValue("search")
    var replace = getValue("replace")
    var regS = new RegExp(search,"g");
    var result = src.replace(regS, replace);
    setValue("result",result);
  }

</script>
<table>
  <tr>
    <td>源字符串:</td>
    <td><textarea id="src">example</textarea></td>
  </tr>
  <tr>
    <td>查询:</td>
    <td><input type="text"  id="search" value="a" ></td>
  </tr>
  <tr>
    <td>替换为:</td>
    <td><input type="text"  id="replace" value="e" ></td>
  </tr>
  <tr>
    <td>替换结果：</td>
    <td><textarea id="result"></textarea></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><button onclick="replace()">替换</button></td>
    <td></td>
  </tr>
</table>
</body>
</html>

在这里插入图片描述
4、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  function getValue(id){
    return document.getElementById(id).value;
  }
  function setValue(id,value){
    document.getElementById(id).value=value;
  }
  function sortByWord(){
    var src = getValue("src");
    var a = src.split(" ");
    a.sort();
    var result1 = a.join(" ");
    setValue("result1",result1);
    a.reverse();
    var result2 = a.join(" ");
    setValue("result2",result2);
  }
  function sortByAlpha(){
    var src = getValue("src");
    var a = new Array();
    for(var i=0; i<src.length;i++){
      var c = src.charAt(i);
      a.push(c);
    }
    a.sort();
    var result1 = a.join("");
    setValue("result1",result1);
    a.reverse();
    var result2 = a.join("");
    setValue("result2",result2);
  }

</script>
<table>
  <tr>
    <td>随机输入英文字符串:</td>
    <td><textarea id="src">what a great day</textarea></td>
  </tr>
  <tr>
    <td>正排序结果：</td>
    <td><textarea id="result1"></textarea></td>
  </tr>
  <tr>
  <tr>
    <td>倒排序结果：</td>
    <td><textarea id="result2"></textarea></td>
  </tr>
  <tr>
    <td></td>
    <td colspan="" align="left"><button onclick="sortByAlpha()">按照字母排序</button>
      <br>
      <br>
      <button onclick="sortByWord()">按照单词排序</button>
    </td>
  </tr>
</table>
试一下

</body>
</html>

在这里插入图片描述
5、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  function calc(){

    var year = document.getElementById("year").value;
    var month = document.getElementById("month").value;
    var day = document.getElementById("day").value;
    var today=new Date();
    var birthday=new Date();
    birthday.setFullYear(year );
    birthday.setMonth(month -1);
    birthday.setDate(day);
    var nowTime = today.getTime();
    var birthTime = birthday.getTime();
    console.log(nowTime);
    console.log(birthday);
    var age = (nowTime -birthTime) /(1000*60*60*24*365);
    age= Math.round(age);

    document.getElementById("age").innerHTML=age;

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

在这里插入图片描述