您的位置：首页 > 编程技术 > html  >  bootstrap datetimepicker日期插件使用方法

bootstrap datetimepicker日期插件使用方法

 更新时间：2017年1月22日 11:06  点击：1648
bootstrap中datetimepicker日期插件非常简单易用，那么如何使用呢？快跟小编看看这篇讲解bootstrap datetimepicker日期插件使用方法的文章吧！

本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用，供大家参考，具体内容如下

首先在文件头部引入必要的文件：

 

<link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css">
<script src="Js/bootstrap-datetimepicker.js"></script>
 代码如下复制代码

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本文介绍的是BootStrap表单验证的实例代码，对刚刚学习bootstrap的同学来说很有帮助，下面一起来看看吧

下面给大家分享bootstrap表单验证实例代码，具体代码如下所示：

 

 代码如下 复制代码

<%@ page language="java"contentType="text/html; charset=UTF-8"

  pageEncoding="UTF-8"%>

<%@ include file="../include/taglib.jsp"%>

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">

<%@include file="../include/common.jsp"%>

<script type="text/javascript"src="form.js"></script>

<script type="text/javascript"src="bootstrapValidator.min.js"></script>

<link rel="stylesheet"href="../../css/edit.css">

<link rel="stylesheet"href="bootstrapValidator.min.css">

<title>表单测试</title>

</head>

<body class="no-skin">

<div class="main-container"id="main-container">

<div class="main-content">

<div class="main-content-inner">

<div class="page-content">

<div class="row">

<div class="col-xs-12 col-sm-12 col-md-12">

<form id="formTest"class="form-horizontal"role="form">

   <div class="form-group">

<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">用户姓名:</label>

<div class="col-xs-3 col-sm-3 col-md-3">

<div>

<input type="text"id="username"name="username"class="col-xs-12 col-sm-12 col-md-12"placeholder="用户姓名"/>

</div>

</div>

</div>

<!-- 生日-->

<div class="form-group">

<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">生&emsp;&emsp;日:</label>

<div class="col-xs-3 col-sm-3 col-md-3">

<div>

<input type="text"id="birthday"name="birthday"class="col-xs-12 col-sm-12 col-md-12"placeholder="生日"/>

</div>

</div>

</div>

<!-- 邮件 -->

<div class="form-group">

<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">邮&emsp;&emsp;件:</label>

<div class="col-xs-3 col-sm-3 col-md-3">

<div>

<input type="text"id="email"name="email"class="col-xs-12 col-sm-12 col-md-12"placeholder="邮件"/>

</div>

</div>

</div>

<!-- 密码 -->

<div class="form-group">

<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">密&emsp;&emsp;码:</label>

<div class="col-xs-3 col-sm-3 col-md-3">

<div>

<input type="text"id="password"name="password"class="col-xs-12 col-sm-12 col-md-12"placeholder="密码"/>

</div>

</div>

</div>

<!-- 确认密码 -->

<div class="form-group">

<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">确认密码:</label>

<div class="col-xs-3 col-sm-3 col-md-3">

<div>

<input type="text"id="confirmPassword"name="confirmPassword"class="col-xs-12 col-sm-12 col-md-12"placeholder="确认密码"/>

</div>

</div>

</div>

<div class="form-group">

<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">语&emsp;&emsp;言:</label>

<div class="col-xs-3 col-sm-3 col-md-3">

<div>

<input type="checkbox"id="languages"name="languages"value="中文"style="margin-top:12px"/>中文

</div>

 <div>

<input type="checkbox"id="languages"name="languages"value="英语"style="margin-top:12px"/>英语

</div>

 <div>

<input type="checkbox"id="languages"name="languages"value="德语"style="margin-top:12px"/>德语

 </div>

 <div>

<input type="checkbox"id="languages"name="languages"value="韩语"style="margin-top:12px"/>韩语

 </div>

</div>

</div>

<!-- 自定义 -->

<div class="form-group">

<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right"id="callbackshow"></label>

<div class="col-xs-3 col-sm-3 col-md-3">

<div>

<input type="text"id="callbacktest"name="callbacktest"class="col-xs-12 col-sm-12 col-md-12"placeholder="自 定 义"/>

</div>

</div>

</div>

</form>

<!-- PAGE CONTENT ENDS -->

</div><!-- /.col -->

</div><!-- /.row -->

</div><!-- /.page-content -->

</div><!-- /.main-content-inner -->

</div><!-- /.main-content -->

<div class="clear-div"></div>

<div class="footer-button-box container">

<div class="button-conent">

  <button class="btn"type="button"id="submitBtn">

提交

</button>

<button class="btn"type="button"id="resetBtn">

重置

</button>

</div><!-- /.button-conent -->

</div><!-- /.footer-button-box -->

</div><!-- /.main-container -->

</body>

</html>

 

--------------------------------------------------引入js----------------------------------------------------------------------

 

 代码如下 复制代码

$(function() {

//重置

$('#resetBtn').click(function(){

//清空表单验证内容

$('#formTest')[0].reset();

//清空表单验证信息

$('#formTest').bootstrapValidator('resetForm');

});

functionrandomNumber(min, max) {

     returnMath.floor(Math.random() * (max - min + 1) + min);

    };

   $('#callbackshow').html([randomNumber(1, 100),'+', randomNumber(1, 200),'='].join(' '));

   //校验

$('#formTest').bootstrapValidator({

    message :'',

    feedbackIcons: {

      valid:'glyphicon glyphicon-ok',

invalid:'glyphicon glyphicon-remove',

validating:'glyphicon glyphicon-refresh'

    },

    //验证用户名字

    fields: {

username: {

  message:'用户名验证失败',

validators: {

 notEmpty: {

    message:'用户名不能为空'

 },

 stringLength: {

  min: 2,

max: 4,

message:'名字长度只能为2-4位'

 },

 regexp: {

  regexp: /^[\u2E80-\u9FFF]+$/,

  message:'只能为汉字'

 },

}

},//end username

birthday:{

  validators: {

   notEmpty: {

    message:'生日不能为空'

   },

 date:{

  format:'YYYY/MM/DD',

message:'输入正确的日期格式，YYYY/MM/DD'

 }

 }

  },//end birthday

//验证email

  email: {

  validators: {

   notEmpty: {

    message:'邮箱地址不能为空'

   },

 emailAddress: {

message:'邮箱地址不对'

 }

  }

 },//end email

  password:{

 validators: {

   notEmpty: {

    message:'密码不能为空'

   },

 stringLength: {

  min: 6,

max: 15,

message:'密码长度最小为6最多为15'

 },

 regexp: {

 regexp: /^[\d]+$/,

 message:'只能为数字'

 },

}

 },//end password

confirmPassword:{

 validators: {

  notEmpty: {

  message:'密码不能为空'

},

stringLength: {

  min: 6,

  max: 15,

  message:'密码长度最小为6最多为15'

},

identical: {

          field:'password',

          message:'2次密码不一致'

        },

}

},//end confirmPassword

'languages': {

        validators: {

          notEmpty: {

            message:'至少要选择一个'

          },

choice: {

            min: 2,

            max: 3,

            message:'选择2-3个'

          }

       }

     },//end languages

     callbacktest:{

 validators: {

callback:{

message:'输入错误',

callback:function(value,validator){

varitems = $('#callbackshow').html().split(' '),

sum = parseInt(items[0]) + parseInt(items[2]);

console.log(sum);

returnvalue == sum;

}

}

  }

},//end callbacktest

    }

  });

 

//表单提交

$("#formTest").submit(function(ev){ev.preventDefault();});

$("#submitBtn").on("click",function(){

varbootstrapValidator = $("#formTest").data('bootstrapValidator');

bootstrapValidator.validate();

if(bootstrapValidator.isValid()){

$.ajaxRequest({

url :'www.baidu.com',

  });

}else{

return;

}

});

 });

 

这篇文章介绍了一个canvas实现绘制吃豆鱼效果的实例，想要绘制吃豆鱼效果的同学可以参考一下

话不多说，请看代码：

 代码如下复制代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>canvas吃豆鱼</title>
 </head>
 <style>
 body{
 text-align:center;
 }
 canvas{
 background: #efefef;
 }
 </style>
 <body>
 <h1>
 角度转为弧度：<br />
 弧度=2*PI*角度/360=角度*PI/180
 </h1>
 <!--画布的宽和高只能使用属性，不能使用样式-->
 <canvas id='a1' width="500" height="400"></canvas>
 </body>
</html>
<script>
 var ctx=a1.getContext('2d');//得到画布上的画笔并设置绘制方式
 function openMouse(){
 //绘制圆（3/4）
 ctx.beginPath();//开始一条路径
 ctx.arc(250,200,100,45*Math.PI/180,315*Math.PI/180);//圆心为（250,200），半径为100
 ctx.lineTo(250,200);
 ctx.closePath();
 ctx.stroke();//勾勒轮廓/描边
 ctx.fillStyle='#00ffff';
 ctx.fill();
 eye();
 }
 //openMouse();
 function closeMouse(){
 ctx.beginPath();//开始一条路径
 ctx.arc(250,200,100,0*Math.PI/180,360*Math.PI/180);//圆心为（250,200），半径为100
 ctx.lineTo(250,200);
 ctx.closePath();
 ctx.stroke();//勾勒轮廓/描边
 ctx.fillStyle='#00ffff';
 ctx.fill();
 eye();
 }
 //closeMouse();
 //绘制公共部分眼睛
 function eye(){
 //绘制眼睛
 ctx.beginPath();
 ctx.arc(250,200-100/2,25,0,2*Math.PI);//眼睛半径为25
 ctx.stroke();
 ctx.fillStyle='#001900';
 ctx.fill();
 //绘制眼神光
 ctx.beginPath();
 ctx.arc(265,140,5,0,2*Math.PI);//眼神光半径为5
 ctx.stroke();
 ctx.fillStyle='#ffffff';
 ctx.fill();
 }
 var isOpen=true;//定义变量isOpen：是否张开
 var timer=setInterval(function(){
 var ctx=a1.getContext('2d');
 ctx.clearRect(0,0,500,400);//清空画布大小
 if(isOpen){
 closeMouse();
 isOpen=false;
 }else{
 openMouse();
 isOpen=true;
 }
 },500);
</script>

 

[!--infotagslink--]

相关文章