表单字段们

最新推荐文章于 2024-03-11 23:41:00 发布
最新推荐文章于 2024-03-11 23:41:00 发布
阅读量326 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/106682148
版权

文章目录

text输入框

<input type="text" name='name'>
DOM操作
  • 设置文本框的值
    input.value='hello world'
  • 获取文本框的值
    input.value
<body>
<input type="text" name='name'>
<script>
	var elm = document.querySelector('input');
	input.value='hello world';
	console.log(input.value);
</script>
</body>
相关事件
  • input事件
    文本框中输入文本时触发
  • change事件
    文本框中输入的文本改变，且失去焦点(或回车)时触发
<body>
    <input type="text" name='name' id='name' autocomplete="off">
    <script>
    var elm = document.getElementById('name');
    elm.oninput = function(e){
        console.log(e.type,e.target.value);
    }
    elm.onchange = function(e){
        console.log(e.type,e.target.value);
    }
    </script>
</body>

在这里插入图片描述

  • textInput事件
    文本框内输入文本时触发。
    和input事件什么区别？
    textInput事件处理程序只能用 DOM2级方法写（elm.addEventListener）。
    input事件处理程序既可以用 DOM2级方法写，也可以用DOM0级方法写(elm.onInput)
    还有么？
    在这里插入图片描述
    呃，没太懂？那试试 拼音输入法吧。
<body>
    <input type="text" name='name' id='name' autocomplete="off">
    <script>
    var elm = document.getElementById('name');
    elm.oninput = function(e){
        console.log(e.type,e.target.value);
    }
    const handleTextInput = function(e){
        console.log(e.type,e.target.value);
    }
    elm.addEventListener('textInput',handleTextInput,false);
    </script>
</body>

在这里插入图片描述
说到 拼音输入法，忽然想到 复合事件。

  • compositionstart事件
  • compositionupdate事件
  • compositionend事件
<body>
    <!-- <div id="root"></div> -->
    <input type="text" name='name' id='name' autocomplete="off">
    <script>
    var elm = document.getElementById('name');
    const handleCompositionStart = function(e){
        console.log(e.type,e.target.value);
    }
    const handleCompositionUpdate = function(e){
        console.log(e.type,e.target.value);
    }
    const handleCompositionEnd = function(e){
        console.log(e.type,e.target.value);
    }
    elm.addEventListener('compositionstart',handleCompositionStart,false);
    elm.addEventListener('compositionupdate',handleCompositionUpdate,false);
    elm.addEventListener('compositionend',handleCompositionEnd,false);
    </script>
</body>

在这里插入图片描述

  • keypress事件
    按下键盘字符键触发
  • keydown事件
    按下键盘任意键都会触发
<body>
    <div id="root"></div>
    <input type="text" name='name' id='name' autocomplete="off">
    <script>
    var elm = document.getElementById('name');
    elm.onkeypress = function(e){
        console.log(e.type,e.key);
    }
    elm.onkeydown = function(e){
        console.log(e.type,e.key);
    }
    </script>
</body>

在这里插入图片描述

  • focus事件
    获得焦点时触发
  • blur事件
    失去焦点时触发
<body>
    <input type="text" name='name' id='name' autocomplete="off">
    <script>
    var elm = document.getElementById('name');
    elm.onfocus = function(e){
        console.log(e.currentTarget,'get focus');
    }
    elm.onblur = function(e){
        console.log(e.currentTarget,'lost focus');
    }
    </script>
</body>

在这里插入图片描述

  • select事件
    选中输入框中的文本时触发
<body>
    <input type="text" name='name' id='name' autocomplete="off">
    <script>
    var elm = document.getElementById('name');
    elm.onselect = function(e){
        var value = e.currentTarget.value;
        var startIndex = e.currentTarget.selectionStart;
        var endIndex = e.currentTarget.selectionEnd;
        console.log('选中文本：',value.slice(startIndex,endIndex));
    }
    </script>
</body>

在这里插入图片描述

相关方法
  • focus()
    使获得焦点
//页面也加载，就将焦点转移至表单的第一个字段
<body>
    <input type="text" name='name' id='name' autocomplete="off">
    <script>
    window.onload = function(){
        var elm = document.getElementById('name');
        elm.focus();
    }
    </script>
</body>
  • blur()
    使失去焦点
  • select()
    选中全部文本
//页面一加载，就将焦点转移至第一个表单字段
//表单字段一获得焦点，就将框内的文本全部选中，方便用户删除并重新输入
<body>
    <input type="text" name='name' id='name' autocomplete="off" value='Nicholas'>
    <script>
    var elm = document.getElementById('name');
    window.onload = function(){
        elm.focus();
    }
    elm.onfocus = function(){
        elm.select();
    }
    </script>
</body>
相关属性
  • autofocus
    自动聚焦
<input type="text" name='name' id='name' value='Nicholas' autofocus>
  • autocomplete
    自动完成，也就是显示之前输入的值。
    有两个值：on 和 off，默认是on。
    在这里插入图片描述
 <input type="text" name='name' id='name' value='Nicholas' autocomplete="off" >

submit按钮

生成提交按钮，有以下三种方式。

  • 第一种：input[type='submit']
<input type="submit" value='提交'>
  • 第二种：button[type='submit']
<button type='submit'>提交</button>
  • 第三种：input[type='image']
<input type="image" src='./imgs/submit.jpg'>

注意：不论以何种方式生成提交按钮，提交按钮必须嵌在form标签里，否则点击提交按钮无法提交表单数据。

相关事件
  • submit事件
    点击提交按钮时触发
    submit事件发生后，会发送http请求，并刷新页面
    http请求是get还是post，取决于form标签上的method属性值；
    http请求发给谁，form标签上action属性说了算。
    想了解更多，请移步表单Demo。
<body>
        <form method='post' action='/addUser'>
            <label>名字: <input type="text" name='name'></label>
            <label>密码: <input type='password' name='pass' /></label>
            <input type="submit" value='注册'>
        </form>
<script>
    var form = document.forms[0];
    form.onsubmit = function(e){
        console.log(e.type);
    }
</script>
</body>
相关方法
  • submit()
    提交表单，但注意哈，不会触发submit事件。

reset按钮

重置按钮和提交按钮的情况几乎一样，也有三种生成方式，只不过type由submit变成了reset

  • 第一种，input[type='reset']
<input type="reset" value="重置">
  • 第二种，button[type='reset']
 <button type='reset'>重置</button>
  • 第三种，input[type='image']
<input type="image" src='./imgs/reset.jpg'>
相关事件
  • reset事件
    点击重置按钮时触发reset事件，整个表单数据会被清空。
    实际开发中，重置按钮用的不多，主要因为不实用。试想一下，你辛辛苦苦填了十几项，可能不小心重置了一下，一江春水付诸东流，不抓狂才怪。当然，你可以采用二次确认来避免用户的这种不小心。
<body>
    <div id="root"></div>
    <form>
        <label>名字：<input type="text" name='name' id='name' autocomplete="off"></label>
        <input type="reset" value="重置">
    </form>
    <script>
    var form = document.forms[0];
    form.onreset = function(e){
        console.log(e.type);
    }
    </script>
</body>
相关方法
  • reset()
    重置表单，也会触发reset事件

选择框

相关属性
  • select的属性
    • select.type
      有两个值：select-one 和select-multiple。
      select-one 是单选；select-multiple是多选
    • select.multiple
      布尔值。多选是true，单选是false
    • select.size
      选择框可见的行数
    • select.options
      可选项
    • select.selectedIndex
      选中项所在索引，索引从0开始
  • option的属性
    • option.selected
      布尔值。选中是true，没有选中是false
    • option.index
      选项所在索引，索引从0开始
    • option.label
      <option></option>之间的文本值
    • option.text
      <option></option>之间的文本值
    • option.value
      option有value属性，则取value属性值；没有value属性，则取<option></option>之间的文本值。
<body>
    <form action="">
        <select name="fruits" id="fruits">
            <option value="grapefruit">葡萄柚</option>
            <option value="lime">酸橙</option>
            <option value="coconut" selected >椰子</option>
            <option value="mango">芒果</option>
        </select>
        <select name="citys" id="citys" size=4 multiple>
            <option value="shenzhen" selected>深圳</option>
            <option value="nanjing" selected>南京</option>
            <option value="hanzhou">杭州</option>
            <option value="nanchang">南昌</option>
        </select>
    </form>
    <script>
        var select = document.forms[0].elements[0];
        var selectedOption = select.options[select.selectedIndex];

        var multipleSelect = document.forms[0].elements[1];
        var selectedOptions = Array.prototype.slice.call(multipleSelect.options).filter(option => option.selected);
        console.log(selectedOptions);
    </script>
</body>
  • 获取选中项
    单选时，比较简单，select.options[select.selecteIndex]即可；
    多选时，稍微复杂一点点，遍历option，option.selected为true则返回，
    Array.prototype.slice.call(multipleSelect.options).filter(option => option.selected)
相关事件
  • change事件
    选中项发生改变时触发
DOM操作
添加选项

首先，我们要生成一个新的option，有两种方式。

//第一种，使用document.createElement
        var option = document.createElement('option');
        option.appendChild(document.createTextNode('大连'));
        option.value = 'dalian';

//第二种，调用构造函数Option
        var option = new Option('大连','dalian');

然后，将新的option插入到选择框，也有两种方式。

//第一种，appendChild或insertBefore
select.appendChild(option);//插入末尾
//select.appendChild(option,select.options[1]);//插入指定位置

//第二种，调用add方法
select.add(option);//插入末尾
//select.add(option1,1);//插入指定位置
//select.add(option,select.options[1]);//插入指定位置

举例：新增选项 大连

在这里插入图片描述

<body>
    <form action="">
        <select name="citys" id="citys" size=4>
            <option value="shenzhen">深圳</option>
            <option value="nanjing">南京</option>
            <option value="hanzhou">杭州</option>
        </select>
    </form>
    <script>
        var select = document.forms[0].elements[0];
        var option = new Option('大连','dalian');
        select.insertBefore(option,select.options[1]);
        // select.add(option,1);
        // select.add(option,select.options[1]);
    </script>
</body>
删除选项

有三种方式

//第一种
select.removeChild(select.options[select.options.length-1]);

//第二种
select.remove(select.options.length-1);

//第三种
select.options[select.options.length-1] = null;

举例：删除选项 大连

在这里插入图片描述

<body>
    <form action="">
        <select name="citys" id="citys" size=4>
            <option value="shenzhen">深圳</option>
            <option value="nanjing">南京</option>
            <option value="hanzhou">杭州</option>
            <option value='dalian'>大连</option>
        </select>
    </form>
    <script>
        var select = document.forms[0].elements[0];
        // select.removeChild(select.options[select.options.length-1]);
        // select.remove(select.options.length-1);
        select.options[select.options.length-1] = null;
    </script>
</body>
移动选项

将已经存在的元素进行插入操作即可实现移动。

//杭州 这个选项 向前移动一个位置
        var select = document.forms[0].elements[0];
        var optionHZ = select.options[2];
        select.insertBefore(optionHZ,select.options[optionHZ.index-1]);

//杭州 这个选项 向后移动一个位置
        var select = document.forms[0].elements[0];
        var optionHZ = select.options[2];
        select.insertBefore(optionHZ,select.options[optionHZ.index+2]);

举例：将 杭州、大连 这两个选项交换位置

在这里插入图片描述

<body>
    <form action="">
        <select name="citys" id="citys" size=4>
            <option value="shenzhen">深圳</option>
            <option value="nanjing">南京</option>
            <option value="hanzhou">杭州</option>
            <option value='dalian'>大连</option>
        </select>
    </form>
    <script>
        var select = document.forms[0].elements[0];
        var optionHZ = select.options[2];
        var optionDL = select.options[select.options.length-1];
        // select.appendChild(optionHZ);
        // select.add(optionHZ);
        select.insertBefore(optionDL,optionHZ);
    </script>
</body>
自定义选择框的实现
//index.js
import React from "react";
import ReactDOM from "react-dom";
import './index.css';

function ListItem(props){
    const {value,label} = props;
    
    return (
        <li value={value}>{label}</li>   
        )
}

class Selector extends React.Component{
    constructor(props){
        super(props);
        // this.handleMouseDown = this.handleMouseDown.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
    handleMouseDown(e){
        this.props.selectItem(e.target.textContent);
    }
    handleClick(e){
        this.props.selectItem(e.target.textContent);
    }
    render(){
        const items = this.props.items;
        return (
            <ul className='selector'
                // onMouseDown={this.handleMouseDown}
                onClick={this.handleClick}
                >

                {
                    items.map(item => (
                        <ListItem key={item.value}
                                value={item.value}
                                label={item.label}/>
                    ))
                }
            </ul>
        )        
    }
}

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            value:'请选择',
            isOpen:false
        }
        this.container = React.createRef();
        this.handleClick = this.handleClick.bind(this);
        this.handleOutsideClick = this.handleOutsideClick.bind(this);
        // this.handleFocus = this.handleFocus.bind(this);
        // this.handleBlur = this.handleBlur.bind(this);
        this.selectItem = this.selectItem.bind(this);
    }
    // handleFocus(){
    //     clearTimeout(this.timeId);
    // }
    // handleBlur(){
    //     this.timeId = setTimeout(() => {
    //         this.setState({
    //             isOpen:false
    //         })
    //     })
    //     // },100)
    // }
    handleClick(){
        this.setState(currentState => ({
            isOpen:!currentState.isOpen
        }))
    }
    handleOutsideClick(e){
        if(this.state.isOpen && !this.container.current.contains(e.target)){
            this.setState({
                isOpen:false
            })
        }
    }
    selectItem(value){
        this.setState({
            value
        })
    }
    componentDidMount(){
        window.addEventListener('click',this.handleOutsideClick,false);
    }
    componentWillUnmount(){
        window.removeEventListener('click',this.handleOutsideClick,false);
    }
    render(){
        const {items} = this.props;
        const {value,isOpen} = this.state;
        return (
            <div className='container' ref={this.container}
                // onFocus={this.handleFocus}
                // onBlur={this.handleBlur}
            >
            <input type='button'
                    value={value}
                    onClick={this.handleClick}
                    />
            {
                isOpen && <Selector items={items}
                                    selectItem={this.selectItem}/>
            }
        </div>
        )
    }
}

const items = [
    {value:'sz',label:'深圳'},
    {value:'hz',label:'杭州'},
    {value:'nj',label:'南京'}
]
ReactDOM.render(
    <App items={items}/>,
    document.getElementById('root')
)

//index.css
.container{
    display:inline-block;
}
.selector{
    list-style:none;
    margin:0px 15px;
    padding:0px;
    border:1px solid lightgrey;
    width:80px;
    text-align:left;
    background-color:#fff;
    box-shadow:1px 1px 1px grey;
    font-size:14px;
    border-radius: 2px;
    position:absolute;
}

.selector li:hover{
    cursor:pointer;
    background:lightgrey;
}
.selector li{
    padding-left:3px;
}

input{
    display:block;
    margin:5px;
}
无障碍访问的实现

鼠标操作时，整个功能是OK的，但键盘操作时，功能就有问题了。

  • 鼠标操作
    在这里插入图片描述
  • 键盘操作
    在这里插入图片描述
    这是因为，键盘操作tab切换焦点不会触发click事件，所以不会调用handleOutsideClick来关闭选项。
    于是添加blur和focus事件来修复以上问题。
    在修复的过程中，遇到一个问题：blur事件会先于click触发，导致选项一被点击，选项面板就关闭了。
    在这里插入图片描述
    有两个解决方法。
  • setTimeout的延时时间长一些，比如200ms。
    100ms不够无法解决问题；500ms长了点，反应迟钝。总之，延时时间不好确定，治标不治本。
  • ul上的click事件改用mousedown事件
    效果好很多

主要是针对Selector组件、App组件的修改。

class Selector extends React.Component{
    constructor(props){
        super(props);
        this.handleMouseDown = this.handleMouseDown.bind(this);
    }
    handleMouseDown(e){
        this.props.selectItem(e.target.textContent);
    }
    render(){
        const items = this.props.items;
        return (
            <ul className='selector'
                onMouseDown={this.handleMouseDown}
                >

                {
                    items.map(item => (
                        <ListItem key={item.value}
                                value={item.value}
                                label={item.label}/>
                    ))
                }
            </ul>
        )        
    }
}

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            value:'请选择',
            isOpen:false
        }
        this.container = React.createRef();
        this.handleClick = this.handleClick.bind(this);
        this.handleOutsideClick = this.handleOutsideClick.bind(this);
        this.handleFocus = this.handleFocus.bind(this);
        this.handleBlur = this.handleBlur.bind(this);
        this.selectItem = this.selectItem.bind(this);
    }
    handleFocus(){
        clearTimeout(this.timeId);
    }
    handleBlur(){
        this.timeId = setTimeout(() => {
            this.setState({
                isOpen:false
            })
        })
    }
    handleClick(){
        this.setState(currentState => ({
            isOpen:!currentState.isOpen
        }))
    }
    handleOutsideClick(e){
        if(this.state.isOpen && !this.container.current.contains(e.target)){
            this.setState({
                isOpen:false
            })
        }
    }
    selectItem(value){
        this.setState({
            value
        })
    }
    componentDidMount(){
        window.addEventListener('click',this.handleOutsideClick,false);
    }
    componentWillUnmount(){
        window.removeEventListener('click',this.handleOutsideClick,false);
    }
    render(){
        const {items} = this.props;
        const {value,isOpen} = this.state;
        return (
            <div className='container' ref={this.container}
                onFocus={this.handleFocus}
                onBlur={this.handleBlur}
            >
            <input type='button'
                    value={value}
                    onClick={this.handleClick}
                    />
            {
                isOpen && <Selector items={items}
                                    selectItem={this.selectItem}/>
            }
        </div>
        )
    }
}
richest_qi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表单字段类型验证方法
03-07
java 基础表单验证方法，java 基础表单验证方法，java 基础表单验证方法
表单字段
weixin_33810302的博客
09-18 743
element属性 表单中所有表单元素（字段）的集合。 该集合是一个有序列表。 每个表单字段在集合中的顺序，与它们出现在标记中的顺序相同。 可以按照位置和name特性，访问字段。 当多个字段的name名相同时，使用name访问字段，会返回一个NodeList。 <!DOCTYPE html> <html lang="en"> <head> &...
理解表单字段
文摘资讯
10-14 1747
：点上面关注免费学习前端知识！ 可以像访问页面中的其他元素一样，使用原生DOM方法访问表单元素。此外，每个表单都有 elements 属性，该属性是表单中所有元素的集合。这个 elements 集合是一个有序列表，其中包含着表单中的所有字段，例如 、 、 和 。每个表单字段在 elements 集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和 name 特性来
4 表单
Super-Coding的博客
06-28 575
4.1 HTML表单 在HTML中，表单通过标签创建，表单中的字段使用标签定义。下面是一个非常简单的HTML表单： <form method="post"> <label for="username">Username</label><br> <input type="text" name="username" placeholder="Héctor Rivera"><br> <label for="password"&gt
使用标准的表单字段名
realazy的专栏
07-01 1307
是不是很烦每次注册网站或填写相关资料时都要重来一遍？其实会有很多自动填写工具能代劳。比如使用 Mac, 在 Safari 的表单中，它可以足够聪明帮你从帐户资料中查找并填写一些相应的字段。Opera 也有相关功能，不过资料设置是在浏览器内。当然，它们是根据表单的字段名称进行猜测与匹配的。如何给表单字段起个好名字，以方便自动填写工具的匹配，就变得有必要起来。既然说“标准”，那名字肯定不是乱取
html表单字段,HTML的表单元素
weixin_34524284的博客
05-31 221
表单表单控件 ：method - 提交方式action - url地址文本密码空按钮提交重置复选按钮单选隐藏内联可置换元素 - 下拉菜单下拉选项1下拉选项2表单多行文本域语法:说明:多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。阻止浏览器对窗口的拖动设置:{resize:none;}(css属性)表单字段集语法:说明:相当于一个方框，在字段集中可以包含文本和其他...
文本字段和表单设计-UI组件系列
weixin_26732881的博客
08-04 625
重点 (Top highlight)Forms have existed for a significant amount of time, greatly simplifying the task of drafting complaints and various other legal pleadings. With the advance of information and its p...
事件之事件类型-键盘事件（KeyboardEvent）与输入事件（InputEvent）
xiaoyangzhu的博客
12-22 5650
一 定义：用户操作键盘时触发的，是基于原始的 DOM0 实现的 二 事件 事件 定义 keydown 用户按下键盘上某个键时触发，而且持续按住会重复触发 keypress 用户按下键盘上某个键并产生字符时触发，而且持续按住会重复触发。Esc 键也会 触发这个事件。 DOM3 Events 废弃了 keypress 事件，而推荐 textInput 事件 keyup 用户释放键盘上某个键时触发 场景 场景一：输入事件只有一个，即 text.
Textinput，输入框一些基本用法
最新发布
qq_62975986的博客
03-11 1195
qml输入框
java input属性_TextInput--相关属性
weixin_30210749的博客
02-27 178
//仅做一下简单的记录style= {{height:50}}placeholder="搜索。。。。"// 默认选中autoFocus//纠错autoCorrect={false}// 默认字defaultValue= "火星救援"//是否可编辑 false不可编辑editable={false}//键盘类型 numeric数组键盘 email-address英文键盘 url网址 web-sear...
python3中输入input_解决python3输入的坑——input()
weixin_39605521的博客
12-11 4034
如下所示：a,b,c,d = input()很简单的代码，如果输入为1 -1 -2 3结果会报错，原因在于input函数会将你的输入作为python脚本运行，那么输入就变成了1-1 -2 3，即0 -2 3结果当然是错误的了，解决办法就是将输入用引号括起来，将其作为字符串输入。即"1 -1 -2 3"这样结果就是a=1，b=-1，c=-2，d=3补充知识：python环境下的sublime tex...
TextInput与Text使用
weixin_33955681的博客
07-20 236
2019独角兽企业重金招聘Python工程师标准>>> ...
JS的textinput事件
chuanping7294的博客
08-11 835
“DOM3级事件”规范中引入了一个新事件，名叫textInput。根据规范，当用户在可编辑区域中输入字符时，就会触发这个事件。这个用于替代keypress的textInput事件的行为稍有不同。区别之一就是任何可以获得焦点的元素都可以触发kepress事件，但只有可编辑...
JavaScript中textInput事件详解（事件对象及与keypress事件的区别）
TalonZhang的博客
11-24 3709
textInput 事件 textInput 事件是 DOM3 级事件中新加的事件，当用户在可编辑区域中输入字符时，就会触发这个事件。 textInput 和 keypress 区别 textInput 事件与 keypress 事件类似，但还是有一些区别： 任何可以获得焦点的元素都可以触发 keypress 事件，但只有可编辑区域才能触发 textInput 事件。 textInput 事件...
RN入门基础7：文本输入（TextInput）
0729Liang
08-07 4828
一、介绍 TextInput是一个允许用户输入文本的基础组件。 它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。 还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。 二、举例 我们将用户输入的单词全部翻译为‘LL’ 1.首先导入组件Textinput import React, { Co...
TextInput_文本处理
ABang的博客
06-17 3396
React Native 学习随笔，有不同意见尽情发表！ 1简单的例 import React, { Component } from 'react'; import { AppRegistry, Text, TextInput, View } from 'react-native'; class PizzaTranslator extends Component { cons
Flutter文本输入框TextField属性（InputDecoration、textInputAction、inputFormatters等等）详解
热门推荐
喻志强的博客
03-06 11万+
TextField 构造方法：
【input】输入框事件总结
aristo
06-15 2万+
INPUT输入框常用的事件总结语法：
flowable 表单字段
05-19
Flowable表单中的字段有以下几种： 1. 文本框（Text）：用于输入文本信息。 2. 下拉框（Dropdown）：用于选择预定义的选项，可以设置选项列表。 3. 单选框（Radio Button）：用于单选预定义选项。 4. 复选框...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值