隔行变色功能，不用js，直接用css伪类就可以做，这个实例可以作为js插件开发很好的入门级实例。本文实现的隔行变色包括以下功能：
1，支持2种常用结构共存( div元素 和 表格类型 )
2，一个页面内支持不同模块隔行变色，分别管理
3，可以定制的配置有：
奇/偶数行的背景颜色
特定的模块加上隔行变色
当前激活行的颜色
隔行变色的元素类型定制
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>隔行变色插件开发 - by ghostwu</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 10px 30px;
border: 1px solid #ccc;
}
.even-color {
background: #ccc;
}
.odd-color {
background: #eee;
}
.even-color2 {
background: #000;
}
.odd-color2 {
background: #666;
}
.current {
background: yellow;
}
.active {
background: #09f;
}
#box div,
#box2 div {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</style>
<script>
(function () {
/*
隔行变色
选项卡
全选不选反选
*/
var ghostwu = {};
/***************隔行变色开始***************/
ghostwu.BgColor = {
Bg: function (option) {
return new ghostwu.BgColor.init(option);
}
};
ghostwu.BgColor.init = function (option) {
this.oldColor = null;
this.opt = {
'activeClass': 'active',
'evenClass': 'even-color',
'oddClass': 'odd-color',
'ele': 'div',
'context': document
}; //存储默认配置
for (var key in option) {
this.opt[key] = option[key];
}
if (this.opt.ele == 'div') {
var curCxt = this.opt.context;
if (typeof this.opt['context'] === 'string') {
curCxt = document.querySelector(this.opt['context']);
}
this.elements = curCxt.querySelectorAll(this.opt.ele);
} else {
this.elements = this.opt.context.querySelectorAll(this.opt.ele + ' tr');
for (var i = 0; i < this.elements.length; i++) {
if (this.elements[i].children[0].nodeName.toLowerCase() == 'th') {
this.elements = [].slice.call(this.elements);
this.elements.splice(i, 1);
}
}
}
}
ghostwu.BgColor.init.prototype.setBgColor = function () {
for (var i = 0; i < this.elements.length; i++) {
if (i % 2 == 0) {
this.elements[i].className = this.opt['evenClass'];
} else {
this.elements[i].className = this.opt['oddClass'];
}
}
}
ghostwu.BgColor.init.prototype.hover = function () {
var that = this;
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].onmouseover = function () {
that.addBg(this);
};
this.elements[i].onmouseout = function () {
that.removeBg(this);
}
}
}
ghostwu.BgColor.init.prototype.addBg = function (curObj) {
this.oldColor = curObj.className;
curObj.className = this.opt['activeClass'];
}
ghostwu.BgColor.init.prototype.removeBg = function (curObj) {
curObj.className = this.oldColor;
}
/***************隔行变色结束***************/
window.g = ghostwu;
})();
</script>
<script>
window.onload = function () {
var oBg = g.BgColor.Bg({
'activeClass': 'current',
'ele': 'table'
});
oBg.setBgColor();
oBg.hover();
var oBg2 = g.BgColor.Bg({
'activeClass': 'active',
'ele': 'div',
'context': '#box'
});
oBg2.setBgColor();
oBg2.hover();
var oBg3 = g.BgColor.Bg({
'activeClass': 'current',
'ele': 'div',
'evenClass': 'even-color2',
'oddClass': 'odd-color2',
'context': '#box2'
});
oBg3.setBgColor();
oBg3.hover();
}
</script>
</head>
<body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="box2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
</table>
</body>
</html>
run code
(function(){
/*
隔行变色
选项卡
全选不选反选
*/
var ghostwu = {};
/***************隔行变色开始***************/
ghostwu.BgColor = {
};
ghostwu.BgColor.init = function(){
}
ghostwu.BgColor.setBgColor = function(){
}
ghostwu.BgColor.hover = function(){
}
ghostwu.BgColor.addBg = function(){
}
ghostwu.BgColor.removeBg = function(){
}
/***************隔行变色结束***************/
/***************选项卡开始***************/
ghostwu.Tab = {
};
ghostwu.Tab.init = function(){
}
ghostwu.Tab.bindEvent = function(){
}
ghostwu.BgColor.switchTab = function(){
}
/***************选项卡结束***************/
window.g = ghostwu;
})();
一、首先定义一个一级的命名空间 ghostwu = {}，然后通过window对象 暴露这个对象 给外部使用
接下来开发的插件，只要加在我的一级命名空间中即可，如：
ghostwu.BgColor
ghostwu.Tab
ghostwu.Page
ghostwu.Module
........等等
插件的具体方法，在二级命名空间继续增加，如：
ghostwu.BgColor.init
为隔行变色插件( BgColor ) 添加一个初始化方法( init )
二、实现一个不能定制配置的隔行变色功能
demo.js代码
var ghostwu = {};
/***************隔行变色开始***************/
ghostwu.BgColor = {
oldColor : null
};
ghostwu.BgColor.init = function(){
this.aDiv = document.querySelectorAll( "div" );
}
ghostwu.BgColor.setBgColor = function(){
for( var i = 0; i < this.aDiv.length; i++ ){
if ( i % 2 == 0 ){
this.aDiv[i].className = 'even-color';
}else {
this.aDiv[i].className = 'odd-color';
}
}
}
ghostwu.BgColor.hover = function(){
var that = this;
for( var i = 0 ; i < this.aDiv.length; i++ ){
this.aDiv[i].onmouseover = function(){
that.addBg( this );
}
this.aDiv[i].onmouseout = function(){
that.removeBg( this );
}
}
}
ghostwu.BgColor.addBg = function( curObj ){
this.oldColor = curObj.className;
curObj.className = 'active';
}
ghostwu.BgColor.removeBg = function( curObj ){
curObj.className = this.oldColor;
}
/***************隔行变色结束***************/
html页面布局代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>隔行变色 - by ghostwu</title>
<style>
div{
margin:10px;
padding:20px;
border:1px solid #ccc;
}
.even-color {
background:#ccc;
}
.odd-color {
background: #eee;
}
.active {
background:yellow;
}
</style>
<script src="./lib/demo.js"></script>
<script>
window.onload = function(){
var oBg = g.BgColor;
oBg.init();
oBg.setBgColor();
oBg.hover();
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
至此，一个简单的隔行变色功能就完成了，但是不能称之为插件，因为这个功能现在是写死的
var ghostwu = {};
/***************隔行变色开始***************/
ghostwu.BgColor = {
oldColor : null,
opt : {
'activeClass' : 'active',
'oddClass' : 'odd-color',
'evenClass' : 'even-color',
'ele' : 'div'
}
};
ghostwu.BgColor.init = function(){
this.elements = document.querySelectorAll( this.opt['ele'] );
}
ghostwu.BgColor.setBgColor = function(){
for( var i = 0; i < this.elements.length; i++ ){
if ( i % 2 == 0 ){
this.elements[i].className = this.opt['evenClass'];
}else {
this.elements[i].className = this.opt['oddClass'];
}
}
}
ghostwu.BgColor.hover = function(){
var that = this;
for( var i = 0 ; i < this.elements.length; i++ ){
this.elements[i].onmouseover = function(){
that.addBg( this );
}
this.elements[i].onmouseout = function(){
that.removeBg( this );
}
}
}
ghostwu.BgColor.addBg = function( curObj ){
this.oldColor = curObj.className;
curObj.className = this.opt['activeClass'];
}
ghostwu.BgColor.removeBg = function( curObj ){
curObj.className = this.oldColor;
}
/***************隔行变色结束***************/
经过修改之后，我们就可以通过 opt这个json 配置样式和元素结构了， 接下来，我们就得增加参数配置了
四、参数配置
只需要在demo.js代码中，加入一个for循环，把参数的配置复制给opt即可
ghostwu.BgColor.init = function( option ){
for( var key in option ){
this.opt[key] = option[key];
}
this.elements = document.querySelectorAll( this.opt['ele'] );
}
html测试页面修改如下：
<style>
div{
margin:10px;
padding:20px;
border:1px solid #ccc;
}
.even-color2 {
background:#000;
}
.odd-color2 {
background: #666;
}
.current {
background:#08f;
}
</style>
<script src="./lib/demo.js"></script>
<script>
window.onload = function(){
var oBg = g.BgColor;
oBg.init({
'activeClass' : 'current',
'evenClass' : 'even-color2',
'oddClass' : 'odd-color2'
});
oBg.setBgColor();
oBg.hover();
}
</script>
五、完善元素的配置
在第四步中，class都可以定制了，但是ele还不能定制，这个ele就是控制隔行变色的结构
修改init函数如下：
ghostwu.BgColor.init = function( option ){
for( var key in option ){
this.opt[key] = option[key];
}
if ( this.opt['ele'] == 'div' ) {
this.elements = document.querySelectorAll( this.opt['ele'] );
}else{
this.elements = document.querySelectorAll( this.opt['ele'] + " tr" );
this.elements = [].slice.call( this.elements );
for( var i = 0 ; i < this.elements.length; i++ ){
if ( this.elements[i].children[0].nodeName.toLowerCase() == 'th' ) {
this.elements.splice( i, 1 );
}
}
}
}
测试页面的代码修改如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>隔行变色 - by ghostwu</title>
<style>
table {
border-collapse: collapse;
width: 100%;
} th,
td {
padding: 10px 30px;
border: 1px solid #ccc;
}
div {
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
} .even-color2 {
background: #000;
} .odd-color2 {
background: #666;
} .current {
background: #08f;
}
</style>
<script src="./lib/demo.js"></script>
<script>
window.onload = function () {
var oBg = g.BgColor;
oBg.init({
'activeClass': 'current',
'evenClass': 'even-color2',
'oddClass': 'odd-color2'
});
oBg.setBgColor();
oBg.hover(); var oBg2 = g.BgColor;
oBg2.init({
'activeClass': 'current',
'evenClass': 'even-color2',
'oddClass': 'odd-color2',
'ele' : 'table'
});
oBg2.setBgColor();
oBg2.hover();
} </script>
</head> <body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
</table>
</body> </html>
至此，我们开发的功能，勉强算个插件了，但是，不能按区域控制，比如页面上有10个div, 分成2部分，一部分有5个div，另外一部分也是5个，我想其中一部分div加上隔行变色效果。另外一部分不加.
六、分块控制
ghostwu.BgColor = {
oldColor : null,
opt : {
'activeClass' : 'active',
'oddClass' : 'odd-color',
'evenClass' : 'even-color',
'ele' : 'div',
'context' : document
}
};
ghostwu.BgColor.init = function( option ){
for( var key in option ){
this.opt[key] = option[key];
}
var cxt = this.opt['context'];
if ( typeof cxt === 'string' ){
cxt = document.querySelector( this.opt['context'] );
}
if ( this.opt['ele'] == 'div' ) {
this.elements = cxt.querySelectorAll( this.opt['ele'] );
}else{
this.elements = cxt.querySelectorAll( this.opt['ele'] + " tr" );
this.elements = [].slice.call( this.elements );
for( var i = 0 ; i < this.elements.length; i++ ){
if ( this.elements[i].children[0].nodeName.toLowerCase() == 'th' ) {
this.elements.splice( i, 1 );
}
}
}
}
修改html页面代码如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>隔行变色 - by ghostwu</title>
<style>
table {
border-collapse: collapse;
width: 100%;
} th,
td {
padding: 10px 30px;
border: 1px solid #ccc;
} .even-color {
background: #ccc;
} .odd-color {
background: #eee;
} .even-color2 {
background: #000;
} .odd-color2 {
background: #666;
} .current {
background: yellow;
} .active {
background: #09f;
} #box div,
#box2 div {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
<script src="./lib/demo.js"></script>
<script>
window.onload = function () {
var oBg = g.BgColor;
oBg.init({
'activeClass': 'current',
'evenClass': 'even-color2',
'oddClass': 'odd-color2',
'context' : '#box'
});
oBg.setBgColor();
oBg.hover(); var oBg3 = g.BgColor;
oBg3.init({
'activeClass': 'active',
'evenClass': 'even-color',
'oddClass': 'odd-color',
'context' : '#box2'
});
oBg3.setBgColor();
oBg3.hover(); var oBg2 = g.BgColor;
oBg2.init({
'activeClass': 'current',
'evenClass': 'even-color2',
'oddClass': 'odd-color2',
'ele': 'table',
'context' : document
});
oBg2.setBgColor();
oBg2.hover();
}
</script>
</head> <body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="box2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>ghostwu</td>
<td>man</td>
<td>20</td>
</tr>
</table>
</body> </html>
这样我们就可以达到分块控制的目的，但是，如果你仔细一点，应该能发现一个问题，activeClass设置的样式产生了覆盖，3个区域不能定制activeClass。这个就是单例模式无法解决的问题，我们可以通过构造函数解决
七、构造函数解决属性配置覆盖的问题
(function(){
/*
隔行变色
选项卡
全选不选反选
*/
var ghostwu = {};
/***************隔行变色开始***************/
ghostwu.BgColor = {
Bg : function( option ){
return new ghostwu.BgColor.init( option );
}
};
ghostwu.BgColor.init = function( option ){
this.oldColor = null;
this.opt = {
'activeClass' : 'active',
'evenClass' : 'even-color',
'oddClass' : 'odd-color',
'ele' : 'div',
'context' : document
}; //存储默认配置
for( var key in option ){
this.opt[key] = option[key];
}
if ( this.opt.ele == 'div' ){
var curCxt = this.opt.context;
if ( typeof this.opt['context'] === 'string' ) {
curCxt = document.querySelector( this.opt['context'] );
}
this.elements = curCxt.querySelectorAll( this.opt.ele );
}else {
this.elements = this.opt.context.querySelectorAll( this.opt.ele + ' tr' );
for( var i = 0; i < this.elements.length; i++ ){
if( this.elements[i].children[0].nodeName.toLowerCase() == 'th'){
this.elements = [].slice.call( this.elements );
this.elements.splice( i, 1 );
}
}
}
}
ghostwu.BgColor.init.prototype.setBgColor = function(){
for( var i = 0 ; i < this.elements.length; i++ ){
if ( i % 2 == 0 ) {
this.elements[i].className = this.opt['evenClass'];
}else {
this.elements[i].className = this.opt['oddClass'];
}
}
}
ghostwu.BgColor.init.prototype.hover = function(){
var that = this;
for( var i = 0 ; i < this.elements.length; i++ ){
this.elements[i].onmouseover = function(){
that.addBg( this );
};
this.elements[i].onmouseout = function(){
that.removeBg( this );
}
}
}
ghostwu.BgColor.init.prototype.addBg = function( curObj ){
this.oldColor = curObj.className;
curObj.className = this.opt['activeClass'];
}
ghostwu.BgColor.init.prototype.removeBg = function( curObj ){
curObj.className = this.oldColor;
}
/***************隔行变色结束***************/
window.g = ghostwu;
})();
页面测试代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>隔行变色插件开发 - by ghostwu</title>
<style>
table {
border-collapse: collapse;
width: 100%;
} th,
td {
padding: 10px 30px;
border: 1px solid #ccc;
} .even-color {
background: #ccc;
} .odd-color {
background: #eee;
} .even-color2 {
background: #000;
} .odd-color2 {
background: #666;
} .current {
background: yellow;
} .active {
background: #09f;
} #box div,
#box2 div {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
<script src="./lib/common2.js"></script>
<script>
window.onload = function () {
var oBg = g.BgColor.Bg({
'activeClass': 'current',
'ele': 'table'
});
oBg.setBgColor();
oBg.hover(); var oBg2 = g.BgColor.Bg({
'activeClass': 'active',
'ele': 'div',
'context': '#box'
});
oBg2.setBgColor();
oBg2.hover(); var oBg3 = g.BgColor.Bg({
'activeClass': 'current',
'ele': 'div',
'evenClass': 'even-color2',
'oddClass': 'odd-color2',
'context': '#box2'
});
oBg3.setBgColor();
oBg3.hover();
}
</script>
</head> <body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="box2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>20</td>
</tr>
</table>
</body> </html>
[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件的更多相关文章
-
[js插件开发教程]实现一个比较完整的开源级选项卡插件
在这篇文章中,我实现了一个基本的选项卡功能:请猛击后面的链接>> [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件. 还缺少两个常用的切换(自动切换与透明度渐变),当然 ...
-
动手开发一个名为“微天气”的微信小程序（上）
引言:在智能手机软件的装机量中,天气预报类的APP排在比較靠前的位置.说明用户对天气的关注度非常高.由于人们不管是工作还是度假旅游等各种活动都须要依据自然天气来安排.跟着本文开发一个"微天气 ...
-
[js插件开发教程]原生js仿jquery架构扩展开发选项卡插件
jquery插件一般是这么干的: $.fn.插件名称 = function(){}, 把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾 ...
-
[js插件开发教程]定制一个手风琴插件(accordion)
本文带来一个垂直方向的手风琴插件开发,可以定制的功能如下: contentClass : 'panel', //面板样式navClass : 'nav', //导航样式activeClass : 'a ...
-
ASP.NET Aries 入门开发教程3：开发一个列表页面及操控查询区
前言: Aries框架毕竟是开发框架,所以重点还是要写代码的,这样开发人员才不会失业,哈. 步骤1:新建html 建一个Html,主要有三步: 1:引入Aries.Loader.js 2:弄一个tab ...
-
【JS新手教程】replace替换一个字符串中所有的某单词
JS中的replace方法可以替换一个字符串中的单词.语句的格式是: 需要改的字符串.replace(字符串或正则表达式,替换成的字符串) 如果第一个参数用字符串,默认是找到该字符串中的第一个匹配的字 ...
-
开发一个根据xml创建代理类的小框架
github地址 https://github.com/1367356/GradleTestUseSubModule/tree/master/CreateMyFrameWork 1:定义一些规则
-
学习写了一个点击按钮倒计时的jquery小插件
(function($) { $.fn.extend({ getSms: function(value) { value = $.extend({ wait: 60, //参数, 默认60秒 }, v ...
-
bootstrap开发一个简单网页。
CSS代码: body{ padding-top: 50px; padding-bottom: 50px; overflow: auto!important; ...
随机推荐
-
关于owinstartupattribute的错误
关于以上的作物究其原因在与引用的Microsoft.owin等一系列的dll文件,出现这个问题只需在内部删除多余的相关包就可以了,在我的项目中需要三个,如下图,其余的都删除 . 这些相关的dll为什么 ...
-
md5加密篇（一）
/// <summary> /// 获取文件的md5摘要 /// </summary> /// <param name="sFile">文件流& ...
-
Linux挂载磁盘
查看 fdisk –l 挂载 mount 磁盘 目录 参考地址:http://blog.csdn.net/tianlesoftware/article/details/5642883 卸载 umoun ...
-
POJ 1650 Integer Approximation
Integer Approximation Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 5081 Accepted: ...
-
ThreadLocal深入理解二
转载:http://doc00.com/doc/101101jf6 今天在看之前转载的博客:ThreadLocal的内部实现原理.突然有个疑问, 按照threadLocal的原理, 当把一个对象存入到 ...
-
npm使用教程（未完)
npm docs 设置镜像站 因为npmjs的官方网站,总会下载比较慢或打不开,所以通常需要设置一下镜像站来更好的安装npm库 npm install --registry http://regist ...
-
BZOJ 1975 SDOI2010 魔法猪学院 A*k短路
题目大意:给定一个值E 求起点到终点的最多条路径 使长度之和不超过E k短路的A*算法--每一个点有一个估价函数=g[x]+h[x] 当中g[x]是从源点出发已经走了的长度 h[x]是从这个点到汇点的 ...
-
JAVA 导出 Excel， 将Excel下载到本地
昨天说了如何将数据导出成 excel 的两种方式,今天完善一下将 java 导出(文件在服务器)并下载到本地 1. 触发导出 ajax 代码 $.ajax({ type: "POST&quo ...
-
正确理解volatile与happens-before
1. 双重校验锁实现单例的问题 在延迟实现单例时,一般代码形式如下: public class Foo { private static volatile Foo instance; public s ...
-
HDU - 6315 Naive Operations (线段树+思维) 2018 Multi-University Training Contest 2
题意:数量为N的序列a和b,a初始全为0,b为给定的1-N的排列.有两种操作:1.将a序列区间[L,R]中的数全部+1:2.查询区间[L,R]中的 ∑⌊ai/bi⌋(向下取整) 分析:对于一个位置i, ...