JavaScript 利用Ajax制作一个汇率转换器

照常我们先上效果(先上dj，先上djbushi）：

Document - Google Chrome 2022-05-18 22-21-07

我们先制作一个这样的简单页面

html及css代码如下：

    <style>* {margin: 0;padding: 0;list-style: none;box-sizing: border-box;}:root {--mian-color: #0096d9;}html {font-size: 62.5%;}body {height: 100vh;padding-top: 100px;background-color: #eee;}.container {width: 400px;height: 500px;margin: 0 auto;text-align: center;}h1 {font-size: 2.6rem;color: var(--mian-color);}.ipts {height: 40px;display: flex;justify-content: space-between;}input, select {border: 0;outline: 0;background-color: transparent;height: 40px;line-height: 40px;width: 40%;margin-top: 2rem;}select {border: 1px solid lightgray;}input {text-align: right;font-size: 2rem;font-weight: 900;}.rule {height: 100px;font-size: 2rem;font-weight: 900;justify-content: space-between;align-items: center;margin-top: 60px;}.rule .btn {width: 60px;height: 30px;background-color: var(--mian-color);line-height: 30px;color: white;border-radius: 4px;}.rule #hl {margin-left: 2rem;color: var(--mian-color);font-size: 1.8rem;}</style>
</head>
<body><div class="container"><h1>汇率计算器</h1><p>选择货币单位获取汇率</p><div class="ipts"><select id="first"><option value="CNY">人民币CNY</option><option value="USD">美元USD</option><option value="AUD">澳元AUD</option><option value="HKD">港元HKD</option><option value="JPY">日元JPY</option><option value="KRW">韩元KRW</option></select><input id="in" type="text" value="1" placeholder="请输入数值"></div><p class="rule"><span class="btn"> &nbsp;交换 </span><span id="hl">1 = 1</span></p><div class="ipts"><select id="second"><option value="CNY">人民币CNY</option><option value="USD">美元USD</option><option value="AUD">澳元AUD</option><option value="HKD">港元HKD</option><option value="JPY">日元JPY</option><option value="KRW">韩元KRW</option></select><input type="text" value="1" disabled></div></div>
</body>

对于这些简单的操作我也就不多进行讲解，相信以大家的水平来说完全 so easy
那么我们就直接开始js部分：
我们首先去bootcdn.cn 加一个jq，当然你也可以自己写一个jQuery(一件三连的话作者大大就给你们写一个

JavaScript 利用Ajax制作一个汇率转换器相关推荐

Python利用PyQt5制作一个获取网络实时数据NBA数据播报GUI
现在NBA联赛也进行到半决赛了,我们怎么样才能以更快的方法获取NBA的数据呢?这里我们就自己来做一个数据播报的程序文章目录制作NBA数据爬虫捋顺思路编写代码 NBAReporter.py NB ...
python如何制作一个工程软件_如何利用python制作一个解压缩软件-Go语言中文社区...
如何利用python制作一个解压缩软件 python实现解压缩的重要模块就是--zipfile,其次是os 安装zipfile模块首先得安装zipfile模块,打开cmd输入一下命令即可安装 pip ...
利用android实现汇率计算器,利用python编写一个汇率计算器
利用python编写一个汇率计算器发布时间:2020-11-10 15:03:44 来源:亿速云阅读:137 作者:Leah 这篇文章运用简单易懂的例子给大家介绍利用python编写一个汇率计算器 ...
用计算机怎么做成绩表,利用Excel制作一个简单的学生成绩表.doc
利用Excel制作一个简单的学生成绩表教学设计表学科信息技术授课年级八年级学校教师姓名章节名称初中信息技术八年级上册第7课(第1节)计划学时1学时学习内容分析学习Excel的基础知识, ...
android打地鼠设计报告,android开发中利用handler制作一个打地鼠小游戏
android开发中利用handler制作一个打地鼠小游戏发布时间:2020-11-25 15:21:11 来源:亿速云阅读:136 作者:Leah 这期内容当中小编将会给大家带来有关androi ...
如何利用python制作一个解压缩软件
文章目录如何利用python制作一个解压缩软件安装zipfile模块编写核心代码安装tkinter模块整合代码安装pyinstaller模块打包程序为可执行文件打包程序为可执行文件如 ...
利用EasyDL制作一个简单的图片识别小项目
主要是利用EasyDL制作一个简单的傻瓜式猫狗图片识别,利用EasyDL,只需要几步简单的点击即可 *主要的步骤: 1.准备数据 2.训练模型 3.部署 4.H5 * 1.首先创建两个文件夹cat和d ...
利用字典制作一个登录用户账号密码管理系统，实现对账号密码的增删改查等功能
利用字典制作一个登录用户账号密码管理系统,实现对账号密码的增删改查等功能: 当前默认账号密码为:user = {'Wangwu':123456,'Zhangsan':456789,'Lisi':789 ...
pr如何跳到关键帧_PR教程如何利用pr制作一个简单的动画
Adobe Premiere Pro简称PR,是一款非常不错的视频制作编辑软件,如何如何利用pr制作一个简单的动画,这里小编为大家带来了pr动画制作教程--利用pr制作动画,一起来学习一下吧! Ado ...
利用Excel制作一个评级工具
利用Excel制作一个评级工具基本目标思路输入字符+计算方法一方法二根据计算结果+输出字符总结基本目标做一个简单快速的评级工具. 希望做到评价人在区域(1)中输入单项评价,区域(3) ...

JavaScript 利用Ajax制作一个汇率转换器

JavaScript 利用Ajax制作一个汇率转换器相关推荐

最新文章

热门文章