SKILLNULL, Author at SKILL.NULL

代码实现导航栏分割线

无需背景图片就可以实现导航栏分割线，颜色自定，线段虚实自定。

.nav1{

width:auto;

height:50px;

text-align:center;

margin:13px auto 0;

}

.nav1 a{

display: inline-block;

text-decoration:none;

}

.nav1 a:hover{

color:#09109e;

border:6px none #fff;

font-weight:bold;

}

.nav1 li{

position:relative;

}

/*制作导航分隔线效果*/

.nav1 li::before,

.nav1 li::after{

content:"";

position:absolute;

top:-5px;

height: 40px;

width: 1px;

}

.nav1 li::after{

right: 0;

background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%,

rgba(255,255,255,0));

background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%,

rgba(255,255,255,0));

background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba

(255,255,255,0));

background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba

(255,255,255,0));

background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba

(255,255,255,0));

}

.nav1 li::before{

left: 0;

background: -moz-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9);

background: -webkit-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9);

background: -o-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9);

background: -ms-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9);

background: linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9);

}

/*删除导航第一个和最后一个分隔线*/

.nav1 li:first-child::before{

display: none;

}

.nav1 li:last-child::after{

display: none;

}

2017-08-14by SKILLNULL HTML&CSS 阅读(6183)评论(0)

JS获取阴历阳历和星期

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

获取当前阳历日期时间，阴历日期和星期，三者分开，可自行调整顺序。

新建JS文件getdates.js，代码如下：

/*获取当前阳历日期*/

function getCurrentDateTime () {

var d = new Date();

var year = d.getFullYear();

var month = d.getMonth() + 1;

var date = d.getDate();

/*时分秒*/

/**********************

var hours = d.getHours();

var minutes = d.getMinutes();

var seconds = d.getSeconds();

var ms = d.getMilliseconds();

**************************/

var curDateTime = year;

if (month > 9) {

curDateTime = curDateTime + "年" + month;

} else {

curDateTime = curDateTime + "年0" + month;

}

if (date > 9) {

curDateTime = curDateTime + "月" + date + "日";

} else {

curDateTime = curDateTime + "月0" + date + "日";

}

/**********************************

if (hours > 9){

curDateTime = curDateTime + " " + hours;

}else{

curDateTime = curDateTime + " 0" + hours;

}

if (minutes > 9){

curDateTime = curDateTime + ":" + minutes;

}else{

curDateTime = curDateTime + ":0" + minutes;

}

if (seconds > 9){

curDateTime = curDateTime + ":" + seconds;

}else{

curDateTime = curDateTime + ":0" + seconds;

}

***************************************/

curDateTime = curDateTime + " ";

return curDateTime;

}

/*获取当前是星期几*/

function showWeek () {

var show_week = new Array('星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日');

var time = new Date();

var day = time.getDay();

var now_week = show_week[day - 1] + ' ';

return now_week;

}

/*获取当前农历日期*/

function showCal () {

var D = new Date();

var yy = D.getFullYear();

var mm = D.getMonth() + 1;

var dd = D.getDate();

var ww = D.getDay();

var ss = parseInt(D.getTime() / 1000);

if (yy < 100) yy = "19" + yy;

return GetLunarDay(yy, mm, dd);

}

//定义全局变量

var CalendarData = new Array(100);

var madd = new Array(12);

var tgString = "甲乙丙丁戊己庚辛壬癸";

var dzString = "子丑寅卯辰巳午未申酉戌亥";

var numString = "一二三四五六七八九十";

var monString = "正二三四五六七八九十冬腊";

var weekString = "日一二三四五六";

var sx = "鼠牛虎兔龙蛇马羊猴鸡狗猪";

var cYear, cMonth, cDay, TheDate;

CalendarData = new Array(0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B, 0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95);

madd[0] = 0;

madd[1] = 31;

madd[2] = 59;

madd[3] = 90;

madd[4] = 120;

madd[5] = 151;

madd[6] = 181;

madd[7] = 212;

madd[8] = 243;

madd[9] = 273;

madd[10] = 304;

madd[11] = 334;

function GetBit (m, n) {

return (m >> n) & 1;

}

//农历转换

function e2c () {

TheDate = (arguments.length != 3) ? new Date() : new Date(arguments[0], arguments[1], arguments[2]);

var total, m, n, k;

var isEnd = false;

var tmp = TheDate.getYear();

if (tmp < 1900) {

tmp += 1900;

}

total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + madd[TheDate.getMonth()] + TheDate.getDate() - 38;

if (TheDate.getYear() % 4 == 0 && TheDate.getMonth() > 1) {

total++;

}

for (m = 0; ; m++) {

k = (CalendarData[m] < 0xfff) ? 11 : 12;

for (n = k; n >= 0; n--) {

if (total <= 29 + GetBit(CalendarData[m], n)) {

isEnd = true;

break;

}

total = total - 29 - GetBit(CalendarData[m], n);

}

if (isEnd) break;

}

cYear = 1921 + m;

cMonth = k - n + 1;

cDay = total;

if (k == 12) {

if (cMonth == Math.floor(CalendarData[m] / 0x10000) + 1) {

cMonth = 1 - cMonth;

}

if (cMonth > Math.floor(CalendarData[m] / 0x10000) + 1) {

cMonth--;

}

function GetcDateString () {

var tmp = "";

/*显示农历年：（如：甲午(马)年）*/

/*tmp+=tgString.charAt((cYear-4)%10);

tmp+=dzString.charAt((cYear-4)%12);

tmp+="(";

tmp+=sx.charAt((cYear-4)%12);

tmp+=")年 ";*/

if (cMonth < 1) {

tmp += "(闰)";

tmp += monString.charAt(-cMonth - 1);

} else {

tmp += monString.charAt(cMonth - 1);

}

tmp += "月";

tmp += (cDay < 11) ? "初" : ((cDay < 20) ? "十" : ((cDay < 30) ? "廿" : "三十"));

if (cDay % 10 != 0 || cDay == 10) {

tmp += numString.charAt((cDay - 1) % 10);

}

return tmp;

}

function GetLunarDay (solarYear, solarMonth, solarDay) {

//solarYear = solarYear<1900?(1900+solarYear):solarYear;

if (solarYear < 1921 || solarYear > 2020) {

return "";

} else {

solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11;

e2c(solarYear, solarMonth, solarDay);

return GetcDateString();

}

/*显示*/

(function () {

var date = getCurrentDateTime();

var week = showWeek();

var calendar = showCal();

(function () {

var date = getCurrentDateTime();

var week = showWeek();

var calendar = showCal();

("#currentDate").text("欢迎您！" + date + "（农历 " + calendar + "）" + week);

});

2018-12-03by SKILLNULL JavaScript 阅读(7125)评论(0)

bootstrap垂直下拉菜单默认展开

HTML：

　　　　　 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

　　　　　　　 data-target="#bs-example-navbar-collapse-1" aria-expanded="false">　　

　　　　　　　　</button>

　　　　　　</div>

　　　　　　　　　　　　　</ul>

　　　　　　　　　　</li>

　　　　　　　　</ul>

　　　　　　</div>

　　</nav>

</div>

由于加了open 所以默认是展开的，但是有个问题就是无论点击网页的任何地方都会折叠。以下的js解决了这个问题。

JS：

　　$(function () {

　　　　var openddt = $(".open").children('.dropdown-toggle');

　　　　openddt.attr('data-toggle', '');

　　　　openddt.click(function () {

　　　　　　$(this).siblings(".dropdown-menu").toggle();

　　　　});

　　})

</script>

2018-12-03by SKILLNULL HTML&CSS 阅读(7562)评论(0)

2024年十一月
一	二	三	四	五	六	日
« 8月
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30