自己写的时间轴空控件
2018-01-31 13:26
274 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<style>
*{margin:0;padding:0;}
.bgimg{width:100%;background:url(arrow.png) center no-repeat;background-position-y:20px;}
.monthwrap{width:100%;margin:auto;padding-left:10%;box-sizing:border-box;}
.month{width:7%;text-align: center;display: inline-block;background:url(yue_zc.png) top no-repeat;height:67px;background-size: 100%;color:#fff;padding-top:20px;cursor: pointer;}
.active{
background:url(yue_dx.png) top no-repeat;
color:#333;
font-weight: bold;
font-size: 16px;
}
.cut,.add{cursor: pointer;width:50px;}
.timewrap{
background: #14424f repeat;
color: #fff;
font-size: 18px;
margin-top:20px;border-radius:10px;
text-align:center;
padding-bottom:3px;
}
.year{margin-left:20px;margin-right:20px;}
</style>
<body>
<div class="row">
<div class="col-lg-3 timewrap">
<span class="cut">
<img src="sj1.png" alt=""/>
</span>
<span class="year">2017</span>
<span class="add">
<img src="sj2.png" alt=""/>
</span>
</div>
<div class="col-lg-9 plr0">
<div class="bgimg">
<div class="monthwrap">
<span class="month">1月</span>
<span class="month">2月</span>
<span class="month">3月</span>
<span class="month">4月</span>
<span class="month">5月</span>
<span class="month active">6月</span>
<span class="month">7月</span>
<span class="month">8月</span>
<span class="month">9月</span>
<span class="month">10月</span>
<span class="month">11月</span>
<span class="month">12月</span>
</div>
</div>
</div>
</div>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script>
$(function(){
$(".cut").click(function(){
var subval = $('.year').text();
// alert(subval);
var cutyear =parseInt(subval)-1;
//alert(cutyear);
$('.year').empty().text(cutyear);
alert($('.year').text()+'年'+$('.active').text())
});
$(".add").click(function(){
var subval = $('.year').text();
// alert(subval);
var cutyear =parseInt(subval)+1;
$('.year').empty().text(cutyear);
alert($('.year').text()+'年'+$('.active').text())
});
$(".month").click(function(event) {
$(this).addClass('active').siblings().removeClass('active');
alert($('.year').text()+'年'+$('.active').text())
});
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<style>
*{margin:0;padding:0;}
.bgimg{width:100%;background:url(arrow.png) center no-repeat;background-position-y:20px;}
.monthwrap{width:100%;margin:auto;padding-left:10%;box-sizing:border-box;}
.month{width:7%;text-align: center;display: inline-block;background:url(yue_zc.png) top no-repeat;height:67px;background-size: 100%;color:#fff;padding-top:20px;cursor: pointer;}
.active{
background:url(yue_dx.png) top no-repeat;
color:#333;
font-weight: bold;
font-size: 16px;
}
.cut,.add{cursor: pointer;width:50px;}
.timewrap{
background: #14424f repeat;
color: #fff;
font-size: 18px;
margin-top:20px;border-radius:10px;
text-align:center;
padding-bottom:3px;
}
.year{margin-left:20px;margin-right:20px;}
</style>
<body>
<div class="row">
<div class="col-lg-3 timewrap">
<span class="cut">
<img src="sj1.png" alt=""/>
</span>
<span class="year">2017</span>
<span class="add">
<img src="sj2.png" alt=""/>
</span>
</div>
<div class="col-lg-9 plr0">
<div class="bgimg">
<div class="monthwrap">
<span class="month">1月</span>
<span class="month">2月</span>
<span class="month">3月</span>
<span class="month">4月</span>
<span class="month">5月</span>
<span class="month active">6月</span>
<span class="month">7月</span>
<span class="month">8月</span>
<span class="month">9月</span>
<span class="month">10月</span>
<span class="month">11月</span>
<span class="month">12月</span>
</div>
</div>
</div>
</div>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script>
$(function(){
$(".cut").click(function(){
var subval = $('.year').text();
// alert(subval);
var cutyear =parseInt(subval)-1;
//alert(cutyear);
$('.year').empty().text(cutyear);
alert($('.year').text()+'年'+$('.active').text())
});
$(".add").click(function(){
var subval = $('.year').text();
// alert(subval);
var cutyear =parseInt(subval)+1;
$('.year').empty().text(cutyear);
alert($('.year').text()+'年'+$('.active').text())
});
$(".month").click(function(event) {
$(this).addClass('active').siblings().removeClass('active');
alert($('.year').text()+'年'+$('.active').text())
});
});
</script>
</body>
</html>
相关文章推荐
- 超级好用的时间控件(可以自己定义时间格式)
- 自己做的一个日期时间选择控件,欢迎试用并给出修改意见
- JS时间控件(自己写的)
- 自己实现个Android下仿IOS的时间选择器、时间控件Time-Selector
- jsp中插入时间控件
- 【Android】自己定义控件——仿天猫Indicator
- Yii: 日期和时间控件的使用 .
- 自己动手做WEB控件(二)
- 关于两个时间控件开始时间到结束时间的问题(含中文设置)
- 时间条控件制作简明教程
- 时间合理的分配给自己的提示
- 手把手教你写Js日期时间选择器(3)-让控件滑动起来
- 日期、时间控件的使用
- <s:property value="">标签怎么将从后台获取的时间格式化成自己想要的样式
- flex 如何转换数据库中的时间格式,并写到datagrid等控件中
- ArcGIS.Server.9.3和ArcGIS API for Flex实现自己的Toc控件(三)
- 自己做的一个下拉框控件
- Js时间控件乱码总结
- 可以选择时间的日历控件
- 自己学会汉化DevExpress控件