html5充值页面（Vue）

最新推荐文章于 2025-05-13 00:47:30 发布
原创 最新推荐文章于 2025-05-13 00:47:30 发布 · 9.4k 阅读 · 40 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本页面展示了中石化油卡充值的HTML和Vue实现方案，包括用户输入姓名、电话、卡号，选择充值金额的功能，并通过微信进行支付。页面采用响应式设计，确保在不同设备上良好显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

可直接复制到html中查看效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>加油卡充值</title>
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .top {
        width: 100%;
        height: 2rem;
        background-color: white;
        text-align: center;
    }

    .top p {
        width: 100%;
        font-size: 1.5rem;
    }

    body {
        background-color: #F4F4F4;
    }

    .back {
        background-color: white;
        width: 96%;
        border-radius: 10px;
        margin-left: 2%;
        margin-top: 2%;
        padding-bottom: 2%;
        padding-top: 2%;
    }

    .bechoice {
        background: green !important;
        color: white !important;
    }

    .information {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .information span {
        width: 95%;
        font-size: 1.1rem;
        margin-left: 2%;
    }

    .information input {
        width: 95%;
        border-radius: 7px;
        height: 2rem;
        text-align: center;
        line-height: 2rem;
        outline: none;
        color: green;
        font-size: 1.1rem;
        border: 2px solid;
        margin-top: 2.5%;
        margin-left: 2%;
        margin-bottom: 2.5%;
    }

    .choice {
        width: 100%;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .choice p {
        font-size: 1.1rem;
        margin-left: 2%;
    }

    .recharge_hurg ul {
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
        display: flex;
        justify-content: center;
    }

    .recharge_hurg ul li {
        list-style-type: none;
        width: 29.5%;
        margin-right: 2%;
        border-radius: 0.5rem;
        height: 2.5rem;
        text-align: center;
        line-height: 2.5rem;
        margin-bottom: 1rem;
        border: 2px green solid;
        color: green;
    }

    .recharge_hurg ul li:nth-child(3n) {
        margin-right: 0 !important;
    }

    .recharge_hurg_price {
        width: 100%;
        text-align: center;
        margin: 1.25rem 0;
    }

    .recharge_hurg_price span {
        color: green;
        font-weight: 600;
        font-size: 23px;
    }

    .recharge_btn {
        width: 96%;
        background: green;
        color: white;
        height: 2.5rem;
        border-radius: 0.5rem;
        text-align: center;
        line-height: 2.5rem;
        font-size: 1.25rem;
    }

    .recharge_hurg ul input {
        list-style-type: none;
        width: 100%;
        margin-right: 2%;
        border-radius: 7px;
        height: 35px;
        text-align: center;
        line-height: 40px;
        border-style: none;
        text-shadow: none;
        -webkit-appearance: none;
        box-shadow: none;
        outline: none;
        color: green;
        font-size: 1.1rem;
    }

    ::-webkit-input-placeholder {
        /* WebKit, Blink, Edge */
        color: #aaa;
    }

    :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #aaa;
        opacity: 1;
    }

    ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #aaa;
        opacity: 1;
    }

    :-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #aaa;
    }
</style>

<body>
    <div id="Vue">
        <div class="top">
            <p>中石化油卡充值</p>
        </div>
        <div class="back">
            <div class="information">
                <span>姓名：</span>
                <input type="text" placeholder="请输入持卡人姓名" v-model="name" onkeyup="value=value.replace(/[\d]/g,'') "
                   
                    oninput="if(value.length>30)value=value.substring(0,30)">
                <span>电话：</span>
                <input type="number" placeholder="请输入您的号码" v-model="phone"
                    onkeyup="this.value=this.value.replace(/\D/g,'')"
                    oninput="if(value.length>11)value=value.substring(0,11)">
                <span>卡号：</span>
                <input type="number" placeholder="请输入卡号" v-model="card"
                    onkeyup="this.value=this.value.replace(/\D/g,'')">
            </div>
            <div class="choice">
                <p>请选择充值的金额</p>
            </div>
            <div class="recharge_hurg">
                <ul>
                    <li :class="[index == status ? 'bechoice':'']" v-for="(item,index) in list" :key="index"
                        @click="choicePrice(index,item.price)">{{item.price}}元</li>
                    <li>
                        <input id="otheramount" type="number" placeholder="其他金额" @click="choiceother" v-model="question"
                            onkeyup="this.value=this.value.replace(/\D/g,'')"
                            oninput="  if(value>999999)value=999999;if(value.length>7)value=value.substring(0,7)">
                    </li>
                    <p class="recharge_hurg_price">
                        充值金额：
                        <span>{{thePrice}}.00</span><span style="color: black;">元</span>
                    </p>
                    <div class="recharge_btn" @click="wxpaly">微信充值</div>
            </div>
        </div>
    </div>

</body>
<script>
    new Vue({
        el: "#Vue",
        data: {
            ko: "",
            question: "",
            status: 0,
            thePrice: 10,
            confirm: "",
            name: "",
            phone: "",
            card: "",
            list: [
                { price: 10 },
                { price: 20 },
                { price: 30 },
                { price: 50 },
                { price: 100 },
                { price: 300 },
                { price: 500 },
                { price: 1000 },
            ],

        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            question: function (newQuestion, oldQuestion) {
                //如果第一位数为0时
                if (this.question[0] == "0") {
                    console.log(this.question[0])
                    this.question = ""
                    this.thePrice = 0
                }
                //如果question为空时
                if (this.question == "") {
                    this.thePrice = 0
                }
                else {
                    this.thePrice = this.question
                    this.question = this.question.replace(/\D/g, '')
                }
            },
            // 如果 `name` 发生改变，这个函数就会运行
            name: function (newName, oldName) {
                if (this.name[0] == "0") {
                    this.name = ""
                    console.log(1)
                }
            },
            // 如果 `phone` 发生改变，这个函数就会运行
            phone: function (newPhone, oldPhone) {
                //如果第一位数为0时
                if (this.phone[0] == "0") {
                    this.phone = ""
                }
                this.phone = this.phone.replace(/\D/g, '')
                console.log(1)
            },
            // 如果 `card` 发生改变，这个函数就会运行
            card: function (newCard, oldCard) {

            }
        },
        methods: {
            choicePrice(index, price) {
                this.status = index
                this.thePrice = price
            },
            choiceother() {
                this.status = null
                //当`question`为空时 
                if (this.question == "") {
                    this.thePrice = 0
                }
            },
            wxpaly() {
                // console.log(this.confirm = parseInt(this.thePrice))
                if (this.name == "" || this.phone == "" || this.card == "") {
                    alert("请填写空余信息")
                } else {
                    console.log(this.name)
                    console.log(this.phone)
                    console.log(this.card)
                    console.log(this.confirm = parseInt(this.thePrice))
                    alert("姓名：" + this.name + "\n" + "手机号码：" + this.phone + "\n" + "卡号：" + this.card + "\n" + "你要充值的金额为：" + this.confirm)
                }


            },
            input() {

            }
        },
        created() {

        }
    })
</script>
<script>
    $(document).ready(function () {

    });
</script>

</html>
Vue.js 在线充值页面完整开发教程｜新手友好，内含详细代码解析 Vue.js + HTML/CSS 实现一个在线充值界面｜快速上手的前端项目 一步步教你用 Vue.js 制作在线充值页面｜从入门到
南北极之间
11-07 532
在本教程中，我们将使用 Vue.js 构建一个简单的在线充值页面。页面主要包含以下几个功能：通过这个项目，新手开发者可以更好地理解 Vue.js 的基本数据绑定和事件处理方式。首先，我们先创建一个基本的 HTML 结构，并引入 Vue.js。 接下来，我们将添加页面的主要部分，包括标题、积分显示、充值金额选项、支付方式、充值按钮以及温馨提示。积分显示：首先，我们要显示当前积分的余额。可以在 Vue 数据中定义 值来表示当前积分。充值金额选项：接下来，我们定义一组充值金额选项，并使用 Vue 的 指令循环
Vue.js 实现金钻充值页面：完整代码与详细入门教程” “Vue.js 初学者教程：从零搭建简洁实用的充值页面” “一份完整的 Vue.js 金钻充值页面教程：适合初学者” “Vue.js 实例教程
南北极之间
11-07 606
效果图 博客正文 目录 前言 项目介绍 准备工作 项目结构 步骤一：HTML 结构设计 步骤二：CSS 样式编写 步骤三：Vue.js 数据和方法 步骤四：实现页面功能 总结 前言 本篇博客将带领您一步步实现一个金钻充值页面。本项目适合 Vue.js 初学者，通过实际开发一个具有选择金额和支付方式功能的充值界面，您将学会如何在 Vue 中使用数据绑定、事件处理和样式控制等基本功能。 项目介绍 本教程使用 Vue.js 来实现一个简洁而实用的金钻充值页面。页面包含以下主要功能： 选择充值金额（包含
HTML用户充值页面充值中心模板.rar
09-02
该资源为会员充值页面，页面实用性很强，支持vip月充值 vip年充值 vip永久充值
HTML用户充值页面充值中心模板.zip
05-23
HTML用户充值页面充值中心模板，DIV CSS布局，有10元、20元、50元、其他金额等充值选项，充值方式可微信或支付宝，显示应付金额。
HTML用户充值页面充值中心模板：项目的核心功能/场景
最新发布
gitblog_06741的博客
05-13 400
HTML用户充值页面充值中心模板：项目的核心功能/场景 去发现同类优质开源项目:https://gitcode.com/ 打造易用、美观的用户充值体验 项目介绍 在当今数字化时代，线上充值已成为电商平台、会员服务、游戏等众多行业的重要功能之一。HTML用户充值页面充值中心模板正是针对这一需求，提供了一套专业、易用的HTML模板，旨在帮助开发者快速实现网站或应用的会员充值功能。 项目技术分析 该模板...
淘宝充值中心 代码 html
03-30
淘宝充值中心代码，可以直接充值使用，该文件提取自某淘宝店铺
html用户充值页面充值中心,好看的amazeui用户充值界面代码
weixin_35275671的博客
06-03 1837
js代码// 将所有.ui-choose实例化$('.ui-choose').ui_choose();// uc_01 ul 单选var uc_01 = $('#uc_01').data('ui-choose'); // 取回已实例化的对象uc_01.click = function(index, item) {console.log('click', index, item.text())}uc...
HTML用户充值页面充值中心模板：快速搭建专业级充值界面
专注于与编程相关的知识内容分享
02-03 1393
HTML用户充值页面充值中心模板提供了一种高效解决方案：通过纯前端代码（HTML+CSS+JS）实现可自定义的充值界面，开发者只需简单修改即可部署，无需依赖后端开发。本文将详细介绍该模板的核心功能、技术实现及使用方法。
精美会员充值页面，自适应移动端
06-03
首先，HTML5在会员充值页面中的应用可能包括以下方面： 1. 新增的表单元素：HTML5引入了新的表单控件，如`<input type="number">`用于输入数字，可以限制用户只输入充值金额，确保数据格式正确。 2. 数据存储：使用`...
Vue展示待支付、已支付、代发货界面
06-01
5. **路由管理**：如果项目中包含多个页面，可以使用Vue Router进行页面间导航。它允许定义路径和组件之间的映射，通过`<router-view>`标签在页面上插入对应组件。 6. **状态管理**：对于更复杂的应用，可能需要...
Vue 2 前端实战：如何构建一个动态充值页面（附完整代码） 从零搭建充值页面：Vue 2 项目开发详解 Vue 2 初学者指南：构建交互式充值页面（简单易懂） 表单与交互功能实战：用 Vue 2 开
南北极之间
11-24 586
Vue 2 前端实战：如何构建一个动态充值页面（附完整代码） 从零搭建充值页面：Vue 2 项目开发详解 Vue 2 初学者指南：构建交互式充值页面（简单易懂） 表单与交互功能实战：用 Vue 2 开发充值系统 打造实用的充值页面：Vue 2 教程与源码分享Vue 2 前端实战：如何构建一个动态充值页面（附完整代码） 从零搭建充值页面：Vue 2 项目开发详解 Vue 2 初学者指南：构建交互式充值页面（简单易懂） 表单与交互功能实战：用 Vue 2 开发充值系统 打造实用的充值页面：Vue 2 教程与源码
HTML用户充值页面充值中心模板
06-01
HTML充值收款源码
08-16
HTML充值收款源码 一款你可以自动嫁接在你自己网站上源码
会员充值支付手机页面HTML模板.zip
06-10
会员充值支付手机页面HTML模板.zip
金额充值页面
09-12
金额充值页面，自己开发。欢迎下载资源，大家多多交流
HTML充值收款源码.rar
07-01
网页充值收款的源代码，可直接使用。使用amazeui框架充值中心布局html源代码模板。
html--好看的手机充值单页
stqer的博客
06-24 1199
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>线上充值-首页</title> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" /> <meta cont
Html流量充值页面效果
极客神殿
09-10 7319
change.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0
手机话费充值页面HTMLcss3+html5模板
ICode联盟
08-24 674
手机话费充值页面HTML模板，蓝色通用的线上手机余额充值页面，选择话费面额弹出式确认，充值中心页面，手机话费充值网页模板html下载。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值