• 用javascript来实现计算用户输入用电量，自动计算出电费多少，分三档计费

                  前言：这个计算出来最后的结果，会存在精度丢失的问题，欢迎大佬提出解决方案

      

    目录

                     第一步·：框架

                     第二步：定义一个变量用来接收用户输入的电量

                     第三步：分析题目

                     第四步：继续根据需求写，现在是第二档大于150小于400的

                     第五步：继续写第三档

                     第六步：输出

     

     

     

                    第一步·：框架

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 		
    10. 		script>
    11. 	body>
    12. html>

            第二步：定义一个变量用来接收用户输入的电量

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			var electricity = prompt('请输入用电量')
    10. 			
    11. 		script>
    12. 	body>
    13. html>

    这里的话有一个小知识点，如果我们就这样写下去，prompt输出的是String类型的，所以我们需要对其进行转换成数值型Number

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			var electricity = prompt('请输入用电量')
    10. 			electricity = parseInt(electricity)
    11. 			
    12. 		script>
    13. 	body>
    14. html>

             第三步：分析题目

    题目需求是说如果用户的用电量在150千瓦时以下爱，那么每度电0.4463，接下来我们写上代码

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			var electricity = prompt('请输入用电量')
    10. 			electricity = parseInt(electricity)
    11. 			var money = 0;
    12. 			if (electricity <= 150) {
    13. 				money = electricity * 0.4463
    14.  
    15. 			}
    16. 		script>
    17. 	body>
    18. html>

    这里的话我们定义一个变量用来接收电费总额，这个变量的作用在后面会显示出来

            第四步：继续根据需求写，现在是第二档大于150小于400的

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			var electricity = prompt('请输入用电量')
    10. 			electricity = parseInt(electricity)
    11. 			var money = 0;
    12. 			if (electricity <= 150) {
    13. 				money = electricity * 0.4463
    14.  
    15. 			} else if (electricity >= 150 && electricity <= 400) {
    16. 				money = (150 * 0.4463) + ((electricity - 150) * 0.4663)
    17.  
    18. 		script>
    19. 	body>
    20. html>

     这里因为是第二档，第二档要减去第一档的费用，因而要用ele...减去150，剩下的就是超出150，小于400的电量，每度0.4663

    第五步：继续写第三档

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			var electricity = prompt('请输入用电量')
    10. 			electricity = parseInt(electricity)
    11. 			var money = 0;
    12. 			if (electricity <= 150) {
    13. 				money = electricity * 0.4463
    14.  
    15. 			} else if (electricity >= 150 && electricity <= 400) {
    16. 				money = (150 * 0.4463) + ((electricity - 150) * 0.4663)
    17.  
    18. 			} else  {
    19. 				money = (150 * 0.4463) + ((400 - 150) * 0.4663) + ((electricity - 400) * 0.5663)
    20.  
    21. 			}
    22. 		
    23. 		script>
    24. 	body>
    25. html>

     第三档的条件是大于400千瓦时的，所以我们要在之前的基础上，减去150第一档，减去151到400第二档，剩下的就是第三档，，每度0.5663

    第六步：输出

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			var electricity = prompt('请输入用电量')
    10. 			electricity = parseInt(electricity)
    11. 			var money = 0;
    12. 			if (electricity <= 150) {
    13. 				money = electricity * 0.4463
    14.  
    15. 			} else if (electricity >= 150 && electricity <= 400) {
    16. 				money = (150 * 0.4463) + ((electricity - 150) * 0.4663)
    17.  
    18. 			} else  {
    19. 				money = (150 * 0.4463) + ((400 - 150) * 0.4663) + ((electricity - 400) * 0.5663)
    20.  
    21. 			}
    22. 			alert('所需支付的费用为' + money + '元');
    23. 		script>
    24. 	body>
    25. html>

     以上就是全部代码和逻辑，如果需要请私信

  • 相关阅读:
    华资软件一面
    《深入理解Java虚拟机》读书笔记--第十三章 线程安全与锁优化
    getattr,hasattr,setattr什么作用
    医院PACS系统：三维多平面重建操作使用
    Rust常用特型之From和Into特型
    Multilinear Relationship Networks：多任务学习框架
    常用设计模式——模板方法模式
    html+css实现全局固定位置悬浮的菜单
    【数据集】1980-2020年（5年）土地利用分类数据-中国科学院
    weak的底层原理
  • 原文地址：https://blog.csdn.net/tea_tea_/article/details/126052176