超级实习生计划项目练习——JavaScript 利用Ajax制作一个汇率转换器

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

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制作一个汇率转换器相关推荐

内推名企实习，就来CSDN超级实习生计划，2022年名企实习内推开始发车
一份拿得出手的大厂实习经验有多重要? 对没有经验的大二.大三学生来说:这是为自身真实能力背书,是拓宽视野,结交人脉的好机会,更是为以后拿到互联网大厂offer奠定基础. 对秋招失利/错过秋招的应届生来 ...
2022年超级实习生计划冲刺IT名企offer，9大高薪技巧助力名企梦
CSDN推出超级实习生训练计划,属于名企内推直通保offer计划,本科毕业年薪可达30W+,除了获得名企实习offer之外,超级实习生们还能提升项目工程化交付能力. 加入超级实习生训练计划你可以获得什 ...
付费内推实习是“割韭菜”吗？超级实习生计划也是吗？
近期知名企业发布的2021年反舞弊通报中,有员工利用职权招收实习生并安排虚假远程实,从中获得了实习费用,虽然相关人员已受到想用处罚,但是去一些平台搜索"付费内推实习",价位从100 ...
付费内推实习是“割韭菜”吗？超级实习生计划也在割韭菜？
近期知名企业发布的2021年反舞弊通报中,有员工利用职权招收实习生并安排虚假远程实,从中获得了实习费用,虽然相关人员已受到想用处罚,但是去一些平台搜索"付费内推实习",价位从100 ...
CSDN超级实习生计划——大厂实习直通车，年薪最高可达30W。2022正式开启~
一.CSDN超级实习生计划是什么? 2022届高校毕业生规模预计1076万人,同比增加167万人.这是高校毕业生规模首次超过千万,也是近几年增长人数最多的一年.1076万大学生就业的压力急剧暴增,也将 ...
有人参加过CSDN超级实习生计划吗？靠谱吗？
CSDN近期推出了超级实习生计划,相比市面上同类型实习类产品,超级实习生计划服务群体范围更小一些,主要服务于有志于从事IT行业的大学生们,专做IT赛道实习就业产品.那么至今为止有人参加过CSDN超级实 ...
CSDN超级实习生计划来啦——大厂实习直通车
一份拿的出手的大厂实习经验有多重要?CSDN超级实习生计划来啦! 校招优先选内推 1.怎么找内推呢? 强关系:首选你认识的学长学姐,或者找班里在某厂实习的同学内推弱关系:在各平台上加同学校友,让他们 ...
java定时任务中使用多线程_java项目中如何利用多线程实现一个定时器任务
java项目中如何利用多线程实现一个定时器任务发布时间:2020-11-10 16:04:03 来源:亿速云阅读:86 作者:Leah 今天就跟大家聊聊有关java项目中如何利用多线程实现一个定时 ...
利用EasyDL制作一个简单的图片识别小项目
主要是利用EasyDL制作一个简单的傻瓜式猫狗图片识别,利用EasyDL,只需要几步简单的点击即可 *主要的步骤: 1.准备数据 2.训练模型 3.部署 4.H5 * 1.首先创建两个文件夹cat和d ...
Python利用PyQt5制作一个获取网络实时数据NBA数据播报GUI
现在NBA联赛也进行到半决赛了,我们怎么样才能以更快的方法获取NBA的数据呢?这里我们就自己来做一个数据播报的程序文章目录制作NBA数据爬虫捋顺思路编写代码 NBAReporter.py NB ...

超级实习生计划项目练习——JavaScript 利用Ajax制作一个汇率转换器

超级实习生计划项目练习——JavaScript 利用Ajax制作一个汇率转换器相关推荐

最新文章

热门文章