TypechoJoeTheme

永恒驿站

统计
登录 / 注册

hmtl按钮美化+按钮post提交+按钮复制内容

2020-10-18
/
0 评论
/
178 阅读
/
正在检测是否收录...
10/18

按钮美化代码

<head>
    <style>
        input{
            width: 300px;/*设置按钮宽度*/
            height: 80px;/*设置按钮高度*/
            position:relative; /*设置相对定位*/
            color:#faf5f5;/*字体颜色*/
            background-color:#f70a0a;/*按钮背景颜色*/
            border-radius: 3px;/*让按钮变得圆滑一点*/
            border-width: 0;/*消去按钮丑的边框*/
            margin: 0;
            outline: none;/*取消轮廓*/
            font-family: KaiTi;/*字体设置为楷体*/
            font-size: 28px;/*设置字体大小*/
            text-align: center;/*字体居中*/
            cursor: pointer;/*设置鼠标箭头手势*/
        }
        input:hover{/*鼠标移动时的颜色变化*/
            background-color: #0ff74d;
        }

    </style>
</head>

post提交代码

<form action = "post地址" method = "post">
        <input style="margin-left:500px;margin-top:150px" type="submit" name="提交参数" value="提交内容" />
    </form>
    

按钮复制内容

//文本编辑框
<textarea cols="101" name="test1" rows="10" id="test1">我是被复制的文本</textarea>
<br />
 <button onClick="jsTest1()" type="button" >复制</button>//这个是按钮+触发事件

<head>
    <script type="text/javascript">
    function jsTest1() {
        var e = document.getElementById("test1");//对象是test1
        e.select(); //选择对象
        document.execCommand("Copy"); //执行浏览器复制命令
        alert("文本已复制!");
    }
</script>
源码美化
朗读
赞 · 0
赞赏
感谢您的支持,我会继续努力哒!

三合一收款

下面三种方式都支持哦

微信
QQ
支付宝
打开支付宝/微信/QQ扫一扫,即可进行扫码打赏哦
版权属于:

永恒驿站

本文链接:

https://52kk.vip/534.html(转载时请注明本文出处及文章链接)

评论 (0)