m.lom599.com_手机版乐白家网址_乐百家手机首页登录

基于jQuery和CSS3制作数字时钟附源码下载,barcod

作者: 手机版乐白家网址  发布:2019-07-15

废话不多说了,先给大家展示下效果图,感兴趣的朋友继续往下看 哦

本文实例讲述了jQuery插件jquery-barcode实现条码打印的方法。分享给大家供大家参考,具体如下:

本文实例讲述了jQuery插件formValidator自定义函数扩展功能的方法。分享给大家供大家参考,具体如下:

图片 1

这是一个纯js的jQuery插件,项目地址:

jQuery formValidator表单验证插件是什么?感兴趣的读者可参考《jQuery formValidator表单验证插件》以及本站其他相关文档

查看演示       源码下载.rar)

使用示例:

此处省略若干文字。

HTML

<!doctype html>
<html>
 <head>
  <title>jQuery Barcode</title>
  <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="jquery-barcode.js"></script>
  <style type="text/css">
  .barcodeImg{margin:10px 0px}
  </style>
 </head>
 <body>
  <div style="margin:10px"> 
   <input id="src" value="11225921991"></input><br/>    
   <input type="button" onclick='code11()' value="code11">  
   <input type="button" onclick='code39()' value="code39"> 
   <input type="button" onclick='code93()' value="code93">
   <input type="button" onclick='code128()' value="code128">
   <input type="button" onclick='ean8()' value="ean8">   
   <input type="button" onclick='ean13()' value="ean13">
   <input type="button" onclick='ean13()' value="std25">
   <input type="button" onclick='int25()' value="int25">
   <input type="button" onclick='msi()' value="msi">
   <input type="button" onclick='datamatrix()' value="datamatrix">
   <div id="bcTarget" class="barcodeImg"></div>   
  </div>
  <script type="text/javascript">
  function code11(){
   $("#bcTarget").empty().barcode($("#src").val(), "code11",{barWidth:2, barHeight:30,showHRI:false});
  }
  function code39(){
   $("#bcTarget").empty().barcode($("#src").val(), "code39",{barWidth:2, barHeight:30,showHRI:false});
  }
  function code93(){
   $("#bcTarget").empty().barcode($("#src").val(), "code93",{barWidth:2, barHeight:30,showHRI:false});
  }
  function code128(){
   $("#bcTarget").empty().barcode($("#src").val(), "code128",{barWidth:1, barHeight:30,showHRI:false});
  }
  function ean8(){
   $("#bcTarget").empty().barcode($("#src").val(), "ean8",{barWidth:2, barHeight:30,showHRI:false});
  }
  function ean13(){
   $("#bcTarget").empty().barcode($("#src").val(), "ean13",{barWidth:2, barHeight:30,showHRI:false});
  }
  function std25(){
   $("#bcTarget").empty().barcode($("#src").val(), "std25",{barWidth:2, barHeight:30,showHRI:false});
  }
  function int25(){
   $("#bcTarget").empty().barcode($("#src").val(), "int25",{barWidth:2, barHeight:30,showHRI:false});
  }
  function msi(){
   $("#bcTarget").empty().barcode($("#src").val(), "msi",{barWidth:2, barHeight:30,showHRI:false});
  }
  function datamatrix(){
   $("#bcTarget").empty().barcode($("#src").val(), "datamatrix",{barWidth:2, barHeight:30,showHRI:false});
  }
  </script>
 </body>
</html>

实际项目中的表单应用是多种多样的,随之而来的验证也是多变的,但Jquery formValidator为我们提供了自定义函数接口,个人认为是其最主要的强大之处。废话不多说,直接实例。

和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的。

运行效果截图如下:

例一:座机和手机,至少选其一,可以不选。

<div id="clock" class="light"> 
 <div class="display"> 
  <div class="date"></div> 
  <div class="digits"></div> 
 </div> 
</div> 

图片 2

分析:这属于组合验证,需要根据用户选择框体的不同进行不同的验证条件。

jQuery

完整实例代码代码点击此处本站下载.rar)。

知识点:Jquery formvalidator提供了自定义函数接口为functionValidator({ fun: funname });

CSS代码请参照上一篇文章,本文不再啰嗦,直接看jQuery代码。

希望本文所述对大家jQuery程序设计有所帮助。

座机手机

首先我们定义参数,定义用来调用数字的class名称数组,定义中文星期名称,定义时分秒的位置。

您可能感兴趣的文章:

  • C#实现的ZPL条码打印类完整实例
  • asp.net(C#)生成Code39条形码实例 条码枪可以扫描出
  • ASP.net(c#)生成条形码 code39条码生成方法
  • 支付宝支付开发——当面付条码支付和扫码支付实例
  • 基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
  • 无焦点获取条码枪返回值示例
  • Google 二维条码 API 整理
  • C#条码生成及打印实例代码
$("#txtMobileTel,#txtContactTel").formValidator({ tipid: "txtMobileTelTip", onshow: "请填写任一种联系号码", onfocus: "请输入移动电话或座机电话", oncorrect: "输入正确!" }).functionValidator({ fun: allEmpty });
function allEmpty(val, elem) {
 if ($("#txtMobileTel").val() == "" && $("#txtContactTel").val() == "") {
  return '请输入移动电话或座机电话';
 }
 else {
  if ($("#txtMobileTel").val() != "" && $("#txtContactTel").val() != "") {
   if (($("#txtMobileTel").val()).search(/^(((13[0-9]{1})|(15[0-9]{1})) d{8})$/) != -1) {
    if (($("#txtContactTel").val()).search(/^(([0 ]d{2,3}-)?(0d{2,3})-)?(d{7,8})(-(d{3,}))?$/) != -1) { return true } else {
     return "座机电话格式错误";
    }
   } else {
    return "移动电话格式错误";
   }
  } else {
   if ($("#txtMobileTel").val() != "") {
    if (($("#txtMobileTel").val()).search(/^(((13[0-9]{1})|(15[0-9]{1})) d{8})$/) != -1) { return true } else {
     return "移动电话格式错误";
    }
   }
   if ($("#txtContactTel").val() != "") {
    if (($("#txtContactTel").val()).search(/^(([0 ]d{2,3}-)?(0d{2,3})-)?(d{7,8})(-(d{3,}))?$/) != -1) { return true } else {
     return "座机电话格式错误";
    }
   }
  }
};
$(function(){ 
 var clock = $('#clock'); 
 //定义数字数组0-9 
 var digit_to_name = ['zero','one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']; 
 //定义星期 
 var weekday = ['周日','周一','周二','周三','周四','周五','周六']; 
 var digits = {}; 
 //定义时分秒位置 
 var positions = [ 
  'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2' 
 ]; 
}); 

例二:地区级联下拉,当不存在二级地区的下拉解除校验。

然后构建数字时钟的时分秒。在上一篇文章中我们是直接在html中放置了数字时钟的html结构,而现在我们使用jQuery来处理时钟的展示,通过append()方法来构建数字时钟。

省市地区级联

var digit_holder = clock.find('.digits'); 
 $.each(positions, function(){ 
  if(this == ':'){ 
   digit_holder.append('<div class="dots">'); 
  } 
  else{ 
   var pos = $('<div>'); 
   for(var i=1; i<8; i  ){ 
    pos.append(''); 
   } 
   digits[this] = pos; 
   digit_holder.append(pos); 
  } 
 }); 
$("#ddlOne").formValidator({ onshow: "请选择省市", onfocus: "省市必须选择", oncorrect: "输入正确" }).inputValidator({ min: 1, onerror: "请选择有效的地区" }).functionValidator({ fun: city });
 $("#ddlTwo").formValidator({ onshow: "请选择城市", onfocus: "城市必须选择", oncorrect: "输入正确" }).inputValidator({ min: 1, onerror: "请选择有效的地区" });
function city(val, elem) {
 var a = "";
 $.getJSON("../Customer/Area.ashx?parentid="   $("#ddlOne option:selected").val(), null, function(json) { 
  if (json[0].areacode == "0") {
   $("#ddlTwo").attr("disabled", true).unFormValidator(true); //解除校验
  }
  else {
   $("#ddlTwo").attr("disabled", false).unFormValidator(false); //恢复校验
  }
 });
}

最后,我们要让时钟跑起来。每秒钟调用一次update_time()函数,在update_time()中,我们先用moment.js来格式化时间,关于moment.js的介绍请参照本站文章:使用moment.js轻松管理日期和时间。然后根据当前时分秒,分别设置时分秒数字的class属性,即显示当前时分秒数字。接着继续使用moment.js来格式化日期和星期,最终完成了会走动的数字时钟,请看下面代码:

常用验证:

$(function(){ 
 ... 
 (function update_time(){ 
  //调用moment.js来格式化时间 
  var now = moment().format("HHmmss"); 
  digits.h1.attr('class', digit_to_name[now[0]]); 
  digits.h2.attr('class', digit_to_name[now[1]]); 
  digits.m1.attr('class', digit_to_name[now[2]]); 
  digits.m2.attr('class', digit_to_name[now[3]]); 
  digits.s1.attr('class', digit_to_name[now[4]]); 
  digits.s2.attr('class', digit_to_name[now[5]]); 
  var date = moment().format("YYYY年MM月DD日"); 
  var week = weekday[moment().format('d')]; 
  $(".date").html(date   ' '   week); 
  // 每秒钟运行一次 
  setTimeout(update_time, 1000); 
 })(); 
}); 

整数:

您可能感兴趣的文章:

  • 时钟Jquery html5特效代码分享(可设置闹钟并且语音提醒)
  • jquery html5制作超酷的圆盘时钟表
  • jQuery css实现的时钟效果(兼容各浏览器)
  • jquery制作LED 时钟特效
  • jquery制作图片时钟特效
  • jquery模拟LCD 时钟的html文件源代码
  • jQuery超酷平面式时钟效果代码分享
  • jQuery CSS3相结合实现时钟插件
  • 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
  • jQuery实现的电子时钟效果完整示例

复制代码 代码如下:

$("#zs").formValidator({onshow:"请输入整数",oncorrect:"谢谢你的合作,你的整数正确"}).regexValidator({regexp:"intege",datatype:"enum",onerror:"整数格式不正确"});

正整数:

复制代码 代码如下:

$("#zzs").formValidator({onshow:"请输入正整数",oncorrect:"谢谢你的合作,你的正整数正确"}).regexValidator({regexp:"intege1",datatype:"enum",onerror:"正整数格式不正确"});

负整数:

复制代码 代码如下:

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:基于jQuery和CSS3制作数字时钟附源码下载,barcod

关键词: m.lom599.com