layui第三方组件cron的使用

1. 首先上代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>cron表达式生成</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"  content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"  />
  <link href="layui/css/layui.css" rel="stylesheet">
  </head>
  <body>
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
          <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
              <div class="layui-card">
                <div class="layui-card-header">cron表达式</div>
                <div class="layui-card-body">
					<input type="text" class="layui-input" id="cron" value="0/20 * * * * ?" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="layui/layui.js"></script>
    <script>
		// base中设定的是存放拓展模块的根目录，将 `cron` 文件夹复制到此根目录
		layui.config({  base: './' }).extend({cron: 'cron/cron'}); //设定模块别名
	
		// 然后我们就可以像使用内置模块一样使用扩展模块
		layui.use(['cron'], function(){
			var $ = layui.$;
		  var cron = layui.cron;
		   cron.render({
            elem: "#cron", // 绑定元素
            url: "https://www.fastmock.site/mock/58329c0ee61b03d6ce3ba0c1e2f13691/world/cron", // 获取最近运行时间的接口
            value: $("#cron").val(), // 默认值
            done: function (cronStr) {
              console.log("生成表达式：" + cronStr);
              $("#cron").val(cronStr);
            },
          });
		  
		});
	
     
    </script>
  </body>
</html>

下载资源：

1. cron生成组件（开源）

正常来说你只要下载开源的cron组件，再下载layui，把我上面的html保存到layui文件夹同级目录，浏览器打开这个html，点击输入框的位置就可以正常使用，为避免无法使用，本文章也有嵌入资源可直接下载

layui第三方组件cron的使用

猜你喜欢