layui第三方组件cron的使用

这篇具有很好参考价值的文章主要介绍了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,点击输入框的位置就可以正常使用,为避免无法使用,本文章也有嵌入资源可直接下载文章来源地址https://www.toymoban.com/news/detail-660106.html

到了这里,关于layui第三方组件cron的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端使用firebase配置第三方登录介绍(谷歌登录,facebook登录等)

    点此处去 firebase 官网 点此处去 web端的谷歌登录文档 点此处去 facebook开发者官网链接 首先注册一个账号登录firebase(可以使用谷歌账号登录) 然后创建项目(走默认配置就行了) 添加应用(走默认配置),如图所示,本文介绍web应用。 应用添加完毕后走项目设置-如下图(

    2024年04月13日
    浏览(36)
  • 从零用VitePress搭建博客教程(6) -– 第三方组件库的使用和VitePress搭建组件库文档

    接上一节:从零用VitePress搭建博客教程(5) - 如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录? 我们经常看见UI组件库的文档,这里我们就用element-plus第三方组件库为例子,搭建组件库文档 examples:作为组件库示例目录,我们以Button组件使用为例 安装

    2024年02月08日
    浏览(43)
  • flutter-第三方组件

    卡片折叠 stacked_card_carousel  扫一扫组件 qr_code_scanner  权限处理组件 permission_handler 生成二维码组件 pretty_qr_code  角标组件 badges 动画组件 animations app更新  app_installer 带缓存的图片组件 cached_network_image 密码输入框 collection 图片保存 image_gallery_saver 自定义滑块 image_gal

    2024年02月13日
    浏览(34)
  • 修改第三方组件默认样式

    修改el-input的样式: 查看DOM结构: 原本使用 /deep/ 但是可能不兼容 使用 :deep 将 input 框背景色改为蓝色

    2024年02月13日
    浏览(37)
  • 微信小程序--引用第三方组件

    引用方式分为两种 1、使用npm安装 【方便更新 推荐】 2、直接引用dist文件 按需加载组件库中的组件可以使用 3、lin-ui 组件库中的配置 1、安装nodejs环境 2、使用命令行初始化package json文件 打开小程序根目录 使用npm init初始化 3、安装第三方组件 init之后打开小程序会发现多了

    2024年02月08日
    浏览(49)
  • React Native第三方组件库汇总

    UI套件 1, NativeBase NativeBase 是一个广受欢迎的 UI 组件库,为 React Native 提供了数十个跨平台组件。在使用 NativeBase 时,你可以使用任意开箱即用的第三方原生库,而这个项目本身也拥有一个丰富的生态系统,从有用的入门套件到可定制的主题模板。 NativeBase 项目地址: https:/

    2024年04月28日
    浏览(24)
  • JavaScript 中生成二维码,你可以使用第三方库,其中最流行和广泛使用的是 QRCode.js。以下是使用 QRCode.js 生成二维码的基本步骤:

    要在 JavaScript 中生成二维码,你可以使用第三方库,其中最流行和广泛使用的是 QRCode.js。以下是使用 QRCode.js 生成二维码的详细的步骤如下: 步骤 1: 引入 QRCode.js 库 首先,将 QRCode.js 库引入到你的 HTML 文件中。你可以从 CDN 上获取它: 步骤 2: 创建容器 在页面中创建一个容器

    2024年01月18日
    浏览(54)
  • Blazor第三方组件库推荐:BootstrapBlazor UI

    Blazor是C#全栈追求极致开发速度的一个前后端不分离的框架,上限是在Winform,WPF,MAUI等宿主环境上面运行的全平台引用。和Electron一样,解决方案都是套壳浏览器。 为了追求极致的开发速度,Blazor急需Blazor版本的Element UI。但是我发现国内竟然有微软技术爱好者开发了这个UI框架

    2024年02月14日
    浏览(47)
  • 第三方组件及计算属性传参的问题解决方式

    唉,好想玩滋嘣。 表格数据某一列需要用的计算属性时,模板中使用计算属性 fullName 就会直接调用 fullName 函数,而在模板中 fullName(item) 相当于 fullName()(item) ,此处为函数柯里化。 封装好的组件的事件回调函数想要传其它参数,事件的回调直接写 :before-upload=\\\"beforeUpload(\\\'a\\\')

    2024年02月05日
    浏览(40)
  • 前端遇到302处理方式以及设置第三方Cookie研究

    背景:由于认证中心网关检测到用户是未登录态情况下的话,会将用户重定向到认证中心的登录页。 ​ 此时,假如是使用Oauth2协议,登录成功后,前端需要带着登录成功的信息(jwt),访问/Oauth2/1/authorize接口,此时该接口将会重定向回redirect_uri的地址,这个时候的 重点在于

    2024年02月11日
    浏览(26)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包