用DOM树实现汇率转换表,注册页面

最新推荐文章于 2022-01-10 16:26:34 发布
最新推荐文章于 2022-01-10 16:26:34 发布
阅读量151 收藏
点赞数
分类专栏： WEB前端 文章标签： css js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gy99csdn/article/details/113914894
版权

1.汇率转化表
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
           width: 200px;
            height: 30px;
            text-align: center;
        }
        [colspan]{
            background: red;
        }
        div{
            margin: 0 0 5px 0;
        }

        select{
            height: 35px;
        }
        button{
            height: 33px;
        }
        input{
            height: 30px;
        }
    </style>
</head>
<body>

<!-- 成套标签:select:option -->

    <div>
        <select id="select1" onchange="getrate()">
            <option value="0">美元</option>
            <option value="1">人民币</option>
            <option value="2">欧元</option>
            <option value="3">日元</option>
            <option value="4">韩币</option>
            <option value="5">港币</option>
        </select>
        <button onclick="changeselected()">互换</button>
        <select  id="select2" onchange="getrate()">
            <option value="0">美元</option>
            <option value="1">人民币</option>
            <option value="2">欧元</option>
            <option value="3">日元</option>
            <option value="4">韩币</option>
            <option value="5">港币</option>
        </select>
        数额:
        <input id="inputstr">
        <button onclick="getrate()">按汇率换算</button>


    </div>
    <table border="1">
        <tr>
            <td colspan="3">按当前汇率换算结果</td>
        </tr>
        <tr>
            <td id="td11">人民币</td>
            <td>汇率</td>
            <td id="td13">美元</td>
        </tr>
        <tr>
            <td id="td21">1</td>
            <td id="td22">0.16</td>
            <td id="td23">6</td>
        </tr>

    </table>


    <script>
        function changeselected() {
            var select1Node = document.getElementById('select1')
            var select2Node = document.getElementById('select2')

            var mid = select1Node.value
            select1Node.value = select2Node.value
            select2Node.value = mid
        }

        var arrRate = [1, 6, 0.9,  100, 1000, 7 ]
        var arrStr = ['美元', '人民币', '欧元', '日元', '韩币', '港币']

        // 不行:   html(表单元素value)  css  js
        //        存储?                     存储

        function getrate() {
            var inputMoney = document.getElementById('inputstr').value
            var select1Value = document.getElementById('select1').value
            var select2Value = document.getElementById('select2').value

            if (inputMoney == ""){
                return
            }


            var rate = arrRate[select2Value] /arrRate[select1Value]
            var money = rate * inputMoney

            console.log(typeof  rate)

            document.getElementById('td11').innerText = arrStr[select1Value]
            document.getElementById('td13').innerText = arrStr[select2Value]
            document.getElementById('td21').innerText = inputMoney
            document.getElementById('td22').innerText = rate
            document.getElementById('td23').innerText = money


        }

    </script>

</body>
</html>

2.注册页面（验证码可循环）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <table cellspacing="10px">
        <tr>
            <td>注册邮箱:</td>
            <td><input></td>
        </tr>
        <tr>
            <td></td>
            <td>你还可以手机注册</td>
        </tr>
        <tr>
            <td>创建密码:</td>
            <td><input></td>
        </tr>
        <tr>
            <td>真实姓名:</td>
            <td><input></td>
        </tr>
        <tr>
            <td align="right">性别:</td>
            <td>
                <input type="radio" name="xxxx">男
                <input type="radio" name="xxxx">女
            </td>
        </tr>
        <tr>
            <td align="right">生日:</td>
            <td>
                <select>
                    <option>2000</option>
                    <option>2001</option>
                </select>年
                <select>
                    <option>01</option>
                    <option>02</option>
                </select>月
                <select>
                    <option>01</option>
                    <option>02</option>
                </select>日
            </td>
        </tr>
        <tr>
            <td align="right">我真在:</td>
            <td>
                <select>
                    <option>学习</option>
                    <option>听课</option>
                    <option>记笔记</option>
                </select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <img id="img1" src="imge/verycode.gif"> &nbsp; &nbsp;<span onclick="changeimg()">看不清,换一张</span>
            </td>
        </tr>
        <tr>
            <td align="right">验证码: </td>
            <td><input id="inputstr"></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <img src="imge/btn_reg.gif" onclick="click1()">
            </td>
        </tr>
    </table>



<script>
    var list = ['./imge/1111.png', "./imge/1234.png", './imge/2222.png', './imge/3333.png']
    var listCode = ['1111', '1234', '2222', '3333']
    // 上一次的下标
    var tag = -1
    function changeimg() {
        var imgNode = document.getElementById('img1')

        var index = Math.floor(Math.random()*list.length)
        while (tag == index){
            index = Math.floor(Math.random()*list.length)
        }
        tag = index
        imgNode.src = list[index]
    }

    function click1() {
        var inputstr = document.getElementById('inputstr').value

        if (tag == -1 ){
            if (inputstr == "bnksu"){
                alert("真")
            }else {
                alert("假")
            }
        }
        
        if (inputstr == listCode[tag]){
            alert("真")
        }else {
            alert("假")
        }
        
    }
</script>

</body>
</html>
greyKing666
关注
专栏目录
Exchange-Calculator：汇率计算器
02-12
"Exchange-Calculator"是一个汇率转换应用，主要用于计算不同货币之间的汇率。这个项目可能是用HTML（超文本标记语言）编写的，HTML是构建网页的基础语言，用于定义页面结构和内容。在"Exchange-Calculator-master...
常用汇率查询&&货币列表&&实时汇率查询换算小demo
qq_37432174的博客
08-04 483
#这个小demo是本人根据官方api自行编写，亲测可用# 1、导入相关jar包 注意： 1.这里导包错误会报 java.lang.ClassNotFoundException: org.apache.commons.lang.exception.NestableRuntimeException的错误， 2.这里不能使用lang3和collections4,要使用lang2和collections...
Day06 把Dom操作的注册页面和汇率换算页面,改成Vue操作实现
m0_48277818的博客
07-17 386
1.注册页面 (具体图片见day01) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>function</title> <script src="vue.js"></script> </head> <body> <div id="root"> <t
JavaScript-158：仿新浪注册页面
臧小川的博客
01-10 541
结构 <div class="register"> <input type="password" id="ipt"> <p class="m">请输入6~16位密码</p> </div> 样式 div { width: 600px; margin: 100px auto; } .m {
Day05 实现如下图所示的汇率换算页面(利用js和dom)
m0_48277818的博客
07-17 539
实现如下图所示的汇率换算页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Change</title> <style> select{ height: 25px; margin: 3px; } input{
用DOM树实现汇率转换表，注册页面，点名
AC_872767407的博客
03-18 399
文章目录1. 汇率转换表2. 注册页面（）3. 点名 1. 汇率转换表 2. 注册页面（） 下面是实现后 1, 实现注册页面: a,点击看不清换一张, 会切换图片 b,点击立即注册找好友, 会判断输入的验证码和当前图片代表的验证码是否一致 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</t
convert_your_currency:使用此Web应用程序转换您的货币
05-09
在convert_your_currency项目中，前端部分可能使用了HTML（超文本标记语言）构建页面结构，CSS（层叠样式表）进行样式设计，以及JavaScript处理用户交互。以下是一些关键的技术点： 1. HTML表单：为了获取用户输入...
currencyconverter:这是一个使用服务工作者的货币转换器应用程序。 它可以离线和在线工作
04-30
在货币转换器应用中，服务工作者被用来缓存货币汇率数据，即使在用户没有网络连接的情况下，也能提供即时的货币转换服务。此外，服务工作者还可以在后台更新汇率信息，确保用户始终使用最新数据进行计算。 **2. ...
PHP抓取网页数据插入数据库
06-26
在这个示例中，我们假设有一个名为`exchange_rates`的表，包含`currency`和`rate`两个字段，用于存储抓取的货币名称和汇率。 总结起来，"PHP抓取网页数据插入数据库"是一个涵盖HTTP请求、HTML解析、数据处理、...
conversorMoedas:查看始终使用fixer.io更新的任何国家的货币值
05-28
1. **AJAX (Asynchronous JavaScript and XML)**: 该项目可能使用了AJAX技术来异步地从fixer.io API获取数据，这样可以在不刷新整个页面的情况下更新货币汇率。AJAX通常使用XMLHttpRequest对象或现代浏览器的fetch ...
html+css+javaScript实现一个简单的注册界面
小小城序员的博客
08-07 9327
html+css+js实现一个简单的注册界面 自学html，css，js也有一小段时间了，尝试着做点东西来巩固一下，就决定实现这个简单的注册界面。实现的注册界面很普通，没有加上华丽的装饰，但能实现基本的注册界面应有的效果。 注册界面的效果： 1.未输入或输入框为空时会有默认值提示输入信息 2.输入框获取焦点时时会清空默认值 3.输入不符合要求时会有警告提示 4.全部信息未输入正确时无法注册提交 5.地址选择时，选择省份后会有该省份相应的市提供选择 注册界面： 附上代码：（代码里有详细的注释） logini
简单注册页面【表单验证，DOM实现select联动】
LOHAS的博客
08-30 452
一个简单的注册页面 用到的语言：HTML5，CSS3，JavaScript 【JS在验证submit的方法上有些不足，待优化！！！】 效果预览： 初始效果 填写正确后效果 JavaScript代码： <script type="text/javascript"> /*分别给每个input设置信号变量来判断表单状态*/ var emailflag = false; var ...
茶文化网页代码（详细解释）
热门推荐
gy99csdn的博客
09-07 1万+
&amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&amp;gt; &amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&am
登鹳雀楼（网页设计代码）
gy99csdn的博客
09-07 8562
&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;UTF-8&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;
Vue前端开发流程
gy99csdn的博客
02-22 4784
Vue前端开发流程1.安装环境1.1 安装node1.2 安装Cnpm（中国 npm 镜像的客户端）2. 初始化项目--2.1准备工作2.1.1 安装Vue-cli2.1.2 安装webpack2.2 创建项目3. 多组件和标准Vue页面4. Vue组件之间的数据传递4.1父组件向子组件传值4.2子组件向父组件传值4.3同级关系的数据传递5. VueBus( Vue事务总线)5.1 概念5.2 Bus.js的操作5.2.1创建bus.js5.2.2在main.js中引入bus.js ,并且设置为全局变量5.
点击左侧导航链接, 会在右侧显示对应页面。(transform: translate(-50%, -50%))
gy99csdn的博客
02-18 1014
1.点击左侧导航链接, 会在右侧显示对应页面, 仅要求实现样子 提示: 浮动 边框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1 { width: 130px; height: 300p
前端和Vue
gy99csdn的博客
02-19 656
前端和Vue1.前端基本情况介绍1.1 vue 是什么？1.2 vue优缺点1.3 一个vue页面(在html中)以及插值表达式2.Vue基础语法2.1 V-bind：单向绑定2.2 V-model：双向数据绑定2.3 V-text：类似更新元素的 innerText2.4 V-html：更新元素的 innerHTML2.5 V-show：标签控制隐藏, (display设置none)2.6 V-if； V-else；V-else-if：根据表达式的值的真假条件渲染元素2.7 V-if和v-show区别2
用vue实现注册页面，汇率转换表
gy99csdn的博客
02-23 456
1.注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="root"> <table cell
虚拟dom直接用JavaScript实现了DOM树
最新发布
07-17
是的，虚拟DOM是一种用JavaScript对象来模拟真实DOM树的概念。通过使用虚拟DOM，在内存中创建一个轻量级的DOM树副本，然后通过比较虚拟DOM树和真实DOM树之间的差异，最小化对真实DOM的操作，从而提高性能。 虚拟DOM...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值