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,点击输入框的位置就可以正常使用,为避免无法使用,本文章也有嵌入资源可直接下载