前端 - Page 12 of 12

实现笛卡尔心形线的重复循环绘制

HTML部分:

1.<a onclick="logoClick()"></a>

2.<div id="canvasZone">

</div>

CSS部分：

#canvasZone {

width: 100%;

height: 100%;

text-align: center;

padding-top: 20px;

margin-left: -35px;

}

#myCanvas {

height: 300px;

width: auto;

}

JS部分：

var arr = [];//保存所有的XY坐标，只为验证。实际程序中可删除。

var r = 4;

var radian;//弧度

var i;

var radianDecrement;//弧度增量

var time = 15;//每个点之间的时间间隔

var intervalId;

var num = 618;//分割为 618 个点

var startRadian = Math.PI;

var ctx;

function logoClick () {

startAnimation();

window.setInterval("lisner()", 1);//监听事件，监听是否画所有的点

}

function lisner () {

if (i >= num) {//判断点是否画完

i = 0;//当所有的点画完即进行初始化

//清空画布("#canvasZone").empty();

// 清空画布("#canvasZone").append("<canvas id=\"myCanvas\"></canvas>");

// 重新建立画布并开始进行内容绘制

("#canvasZone").empty();

startAnimation();

}

function startAnimation () {

ctx = document.getElementById("myCanvas").getContext("2d");

//让画布撑满整个屏幕，-20是滚动条的位置，需留出。如滚动条出现则会挤压画布。

WINDOW_HEIGHT = document.documentElement.clientHeight - 20;

WINDOW_WIDTH = document.documentElement.clientWidth - 20;

ctx.width = WINDOW_WIDTH;

ctx.heigh = WINDOW_HEIGHT;

drawHeart();

}

function drawHeart () {

ctx.strokeStyle = "red";

ctx.lineWidth = 1;//设置线的宽度

radian = startRadian;//弧度设为初始弧度

radianDecrement = Math.PI / num * 2;

ctx.moveTo(getX(radian), getY(radian));//移动到初始点

i = 0;

intervalId = setInterval("printHeart()", time);

}

//x = 16 sin^3 t, y = (13 cos t - 5 cos 2t - 2 cos 3t - cos 4t)

function printHeart () {

radian += radianDecrement;

ctx.lineTo(getX(radian), getY(radian));//在旧点和新点之间连线

//arr.push("X:" + getX(radian) + "<br/>Y:" + getY(radian) + "<br/>");

i++;

ctx.stroke();//画线

if (i >= num) {

clearInterval(intervalId);

//document.getElementById("bs").innerHTML = arr.join("");//打印所有的XY坐标点。

}

function getX (t) {//由弧度得到 X 坐标

return 100 + r * (16 * Math.pow(Math.sin(t), 3));

}

function getY (t) {//由弧度得到 Y 坐标

return 50 - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));

}

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

代码实现导航栏分割线

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

.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 阅读(6327)评论(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 阅读(7300)评论(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 阅读(7732)评论(0)

2025年一月
一	二	三	四	五	六	日
« 12月
		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	31