js常用小代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="txt">
   document.getElementById("txt").onselect = copyText;
    function copyText() {
        var text = document.getElementById("txt");
        text.select(); // 选中文本
        document.execCommand("copy"); // 执行浏览器复制命令
        alert("复制成功");
        document.querySelector('p').innerText = "复制成功";
    }
</script>
</body>
</html>

validate验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script>var url = "__URL__" </script>
    <script src="__JS__test.js"></script>
</head>
<body>
<form id="form1" action="__URL__/action" method="post">
    <span>用户名：</span>
    <input type="text" name="username" id="username"><br>
    邮编:<input type="text" name="youbian" id="youbian">
    <br>
    验证码 <input type="text" name="verify" id="verify">8888
    <br>
    <input type="submit" id="sub">
</form>
</body>
</html>
<script>
    // 邮政编码验证
    jQuery.validator.addMethod("isZipCode", function (value, element) {
        var tel = /^[0-9]{6}$/;
        return this.optional(element) || (tel.test(value));
    }, "请正确填写您的邮政编码");
    $('#form1').validate({
        rules: {
            username: {
                required: true,
            },
            youbian: {
                required: true,
                isZipCode: true,
            },
            verify: {
                required: true,
            }
        }
        , messages: {
            username: {
                required: '用户名不能为空',
                minlength: '长度必须大于2位',
            },
            youbian: {
                required: '邮编不能为空',
                isZipCode: '邮编必须是6位纯数字',
            },
            verify: {
                required: '验证码不能为空',
            },
        },
        submitHandler: function (form) {
            var username = $('#username').val();
            var verify = $('#verify').val();
            //ajax 用户名是否存在验证
            $.post('__URL__/check', {username: username}, function (data) {
                if (data.status == -1) {
                    var err = '<label id="username-error" class="error" for="username" style="display: inline;">' + data.msg + '</label>';
                    $('#username').after(err);
                    return false;
                }
                if (data.status == -2) {
                    var err = '<label id="username-error" class="error" for="username" style="display: inline;">' + data.msg + '</label>';
                    $('#username').after(err);
                    return false;
                }
                if (data.status == 1) {
                    form.submit();
                }
            }, 'json');
        },
    });

</script>

日期插件

下载

<script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>


<input class="Wdate" type="text" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})"> <font color=red>&lt;- 点我弹出日期控件</font>
<br>注意:默认情况下,不含时分秒时,单击选择日期, 含有有时分秒时,需要点击2次才可以选择日期<br>
autoPickDate参数设置为true时,无论日期中是否有时分秒,强制为点击一次即返回日期
<br><br>
<span id="demospan">2008-01-01</span> <img onclick="WdatePicker({el:'demospan'})" src="../../My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer">

<br><br><br><br>
更多demo请访问官方主页 <a href="http://www.my97.net">http://www.my97.net</a>

<br><br>
<h1>请务必仔细阅读下面的文字</h1><br>
<pre>
注意:此版本为 4.8.5 Release build 20210918

更新内容:
[新增]新款的默认皮肤

[增强]可以根据客户端自动进行比例缩放

[增强]更适合现代浏览器

[修正]进一步适配ipad等平板浏览器

[修正]strict模式下,日期控件无法工作的问题

[修正]跨域错误提示没有权限的问题

[修正]其他兼容性错误




使用方法:

1. 去官方网站看看,你当前下载的是否是最新的版本,很多bug都是因为使用的不是最新版本造成的
官方主页:<a href="http://www.my97.net" target="_blank">http://www.my97.net</a>


2. 将My97DatePicker整个目录包,放入您的项目的相应目录下

My97DatePicker目录下各文件的作用:
  1.1 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名
  1.2 各目录及文件的用途:
    WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名
    calendar.js 日期库主文件,无需引入
    目录lang 存放语言文件,你可以根据需要清理或添加语言文件
    目录skin 存放皮肤的相关文件,你可以根据需要清理或添加皮肤文件包


3. 您可以根据您自己的需要,删除不必要的皮肤和语言文件


4. 您可以根据您自己的需要,添加新的皮肤包
皮肤中心地址:<a href="http://www.my97.net/skin.asp" target="_blank">http://www.my97.net/skin.asp</a>


5. 详细阅读在线演示和使用说明,大部分问题都可以通过这里解决,请细看
在线演示:<a href="http://www.my97.net/demo/" target="_blank">http://www.my97.net/demo/</a>


6. 如果遇到无法解决的问题
请先参考:<a href="http://www.my97.net/support.asp" target="_blank">http://www.my97.net/support.asp</a>


7. 如果遇到问题,而技术支持页面无法解决的
您可以通过技术支持页面中提供的联系方式联系我,注意:问问题时,一定要附上相关的HTML代码和详细的错误信息


8. 您有什么意见或建议,你可以通过技术支持页面中提供的联系方式联系我


9. 如果您对日期控件的许可协议有兴趣,您可以访问:<a href="http://www.my97.net/license.asp">http://www.my97.net/license.asp</a>


10.最后祝大家项目顺利,月月加薪!

---------------------------------------------------------------------
官方主页
<a href="http://www.my97.net" target="_blank">http://www.my97.net</a>

在线演示和使用说明
<a href="http://www.my97.net/demo/" target="_blank">http://www.my97.net/demo/</a>

皮肤中心:
<a href="http://www.my97.net/skin.asp" target="_blank">http://www.my97.net/skin.asp</a>

源代码:
<a href="http://www.my97.net/source.asp" target="_blank">http://www.my97.net/source.asp</a>

技术支持页面
<a href="http://www.my97.net/support.asp" target="_blank">http://www.my97.net/support.asp</a></pre>

posted @ 2022-03-18 19:10 被水遗忘の鱼阅读(16) 评论(0) 编辑收藏举报

刷新页面返回顶部

cxyu

js常用小代码

公告