Javascript开发小知识点
1、判断元素是否具有某属性
$("#id").hasClass("someClass");
2、页面刷新
window.location.reload();
3、弹出确认框
var r=confirm("确认此操作?");
//r gets true or false
4、字符串转数字
//不能直接 加和啊 a+b 是连接字符串
//要转成int的
arr[j]=parseInt(obj[i][j].num);//每个数 用于计算标准差
sumIt+=parseInt(obj[i][j].num);//总和 用于计算平均数
5、导航栏平滑滚动效果(http://2016.igem.org/Team:BIT-China/Design)
window.onscroll = function () { //滚动监听，实现导航栏平滑固定 var header=$("#header-container"); if (scroll >= 100) { if(header.css("position") != "fixed"){ header.css({position:"fixed",top:"-70px"}).animate({ top:"0",width:"100%",marginTop:"1.2em" },100,"linear"); } //添加导航下拉class，删除两侧padding header.addClass("roll-nav"); header.removeClass("home-img"); }else if (scroll <= 100) { if(header.css("position") != "static"){ header.animate({ top:"-70px",marginTop:"20px" },100,"linear",function(){ header.css({position:"static"}) }); } //删除导航下拉class，增加两侧padding header.removeClass("roll-nav"); header.addClass("home-img"); } //导航栏平滑滚动——END }
这个效果的html结构如下
<div class="wrapper">
<div class="header-container">
....
</div>
</div>
.roll-nav和home-img如下
.roll-nav{ z-index: 3; padding: 0; position: fixed; margin-top: -10px; -webkit-transition: transform ease-in-out 0.2s; -moz-transition: transform ease-in-out 0.2s; -ms-transition: transform ease-in-out 0.2s; -o-transition: transform ease-in-out 0.2s; transition: transform ease-in-out 0.2s; } /*导航栏padding*/ .home-img{ padding-left: 200px;padding-right: 200px; } @media screen and (max-width:1024px){ .home-img{ padding-left: 100px;padding-right: 100px; } }
动画样式是依靠transition完成的，但是！！！移动设备对于transition的支持很不好，会出现卡顿的情况，这点一定要注意
View Code6、数组乱序排序
//将人员信息打乱 var image_gallery=$("#image-gallery"); var students=image_gallery.find(">li"); image_gallery.children("").replaceWith(""); image_gallery.append(students.toArray().shuffle());
7、播放声音
//设置一个audio标签 display="none"，然后获取它.play就可以播放了 <audio controls id="audio" style="opacity:0"> <source src="music/goods.wav" type="audio/mpeg"> </audio>
8、使用日期组件
效果图：
HTML结构：
<input type="text" id="date2" placeholder="日期">
调用：
//日历组件必须 $(function(){ $('#date2').on('click',function(){ $(this).glDatePicker({ //showAlways : false, format : 'yyyy-mm-dd' }); }) });
组件源码
/*! * glDatePicker v2.0 * http://glad.github.com/glDatePicker/ * * Copyright (c) 2013 Gautam Lad. All rights reserved. * Released under the MIT license. * * Date: Tue Jan 1 2013 */ ;(function() { $.fn.glDatePicker = function(options) { var pluginName = 'glDatePicker'; // Find the plugin attached to the element var instance = this.data(pluginName); // If the instance wasn't found, create it... if(!instance) { // Return the element being bound to return this.each(function() { return $(this).data(pluginName, new glDatePicker(this, options)); }); } // ...otherwise if the user passes true to the plugin (on the second call), // then return the instance of the plugin itself return (options === true) ? instance : this; }; // Default options $.fn.glDatePicker.defaults = { // Style to use for the calendar. This name must match the name used in // the stylesheet, using the class naming convention "gldp-cssName". cssName: 'default', // The z-index for the calendar control. zIndex: 1000, // Thickness of border (in pixels) borderSize: 1, // The number of pixels to offset the calendar's position on the page. calendarOffset: { x: 0, y: 1 }, // Set to true if you want the calendar to be visible at all times. // NOTE: If your target element is hidden, the calendar will be hidden as well. showAlways: false, // Hide the calendar when a date is selected (only if showAlways is set to false). hideOnClick: true, // Allow selection of months by clicking on the month in the title. allowMonthSelect: true, // Allow selection of years by clicking on the year in the title. allowYearSelect: true, // The date that will be treated as 'today'. todayDate: new Date(), // The date that will appear selected when the calendar renders. // By default it will be set to todayDate. selectedDate: null, // Arrows used for the Previous and Next month buttons on the title. // Set these to blank to hide the arrows completely. prevArrow: '\u25c4', nextArrow: '\u25ba', // A collection of dates that can be selectable by the user. // The dates can be a one-time selection or made repeatable by setting // the repeatYear or repeatMonth flag to true. // By default repeatYear and repeatMonth are false. // // This example creates 4-individual dates that can be selected; // The first date will repeat every year, the second date will repeat every // month and year, the third date will repeat every month and the fourth date // will only be selectable one-time and not repeat: // // selectableDates: [ // { date: new Date(0, 8, 5), repeatYear: true }, // { date: new Date(0, 0, 14), repeatMonth: true, repeatYear: true }, // { date: new Date(2013, 0, 24), repeatMonth: true }, // { date: new Date(2013, 11, 25) }, // ] selectableDates: null, // A collection of date ranges that are selectable by the user. // The ranges can be made to repeat by setting repeatYear to true // (repeatMonth is not supported). // // This example will create 3-sets of selectable date ranges with // specific from and to ranges. The 4th and 5th ranges don't specify // the "to" date in which case the "to" date will be the maximum days for // the month specified in "from". The 4th and 5th ranges also repeat every year: // // selectableDateRange: [ // { from: new Date(2013, 1, 1), to: newDate (2013, 2, 1) }, // { from: new Date(2013, 4, 1), to: newDate (2013, 8, 1) }, // { from: new Date(2013, 7, 10), to: newDate (2013, 9, 10) }, // { from: new Date(0, 8, 10), repeatYear: true } // { from: new Date(0, 9, 1), repeatYear: true } // ] selectableDateRange: null, // Mark certain dates as special dates. Similar to selectableDates, this // property supports both repeatYear and repeatMonth flags. // Each special date can be styled using custom style names and can have // data attached to it that will be returned in the onClick callback. // The data field can be any custom (JSON style) object. // // This example creates two (repeatable by year) dates with special data in them. // The first date also assigns a special class (which you will have to define). // specialDates: [ // { // date: new Date(0, 8, 5), // data: { message: 'Happy Birthday!' }, // repeatYear: true, // cssClass: 'special-bday' // }, // { // date: new Date(2013, 0, 8), // data: { message: 'Meeting every day 8 of the month' }, // repeatMonth: true // } // ] specialDates: null, // List of months that can be selectable, including when the user clicks // on the title to select from the dropdown. // This example only makes two months visible; September and December: // selectableMonths: [8, 11] selectableMonths : null, // List of selectable years. If not provided, will default to 5-years // back and forward. // This example only allows selection of dates that have year 2012, 2013, 2015 // selectableYears: [2012, 2013, 2015] selectableYears: null, // List of selectable days of the week. 0 is Sunday, 1 is Monday, and so on. // This example allows only Sunday, Tuesday, Thursday: // selectableDOW: [0, 2, 4] selectableDOW : null, // Names of the month that will be shown in the title. // Will default to long-form names: // January, February, March, April, May, June, July, // August, September, October, November, December monthNames: null, // Names of the days of the Week that will be shown below the title. // Will default to short-form names: // Sun, Mon, Tue, Wed, Thu, Fri, Sat dowNames: null, // The day of the week to start the calendar on. 0 is Sunday, 1 is Monday and so on. dowOffset: 0, // Callback that will trigger when the user clicks a selectable date. // Parameters that are passed to the callback: // el : The input element the date picker is bound to // cell : The cell on the calendar that triggered this event // date : The date associated with the cell // data : Special data associated with the cell (if available, otherwise, null) onClick: (function(el, cell, date, data) { el.val(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()); dealOrder(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()) // }), // Callback that will trigger when the user hovers over a selectable date. // This callback receives the same set of parameters as onClick. onHover: function(el, cell, date, data) {}, // Callback that will trigger when the calendar needs to show. // You can use this callback to animate the opening of the calendar. onShow: function(calendar) { calendar.show(); }, // Callback that will trigger when the calendar needs to hide. // You can use this callback to animate the hiding of the calendar. onHide: function(calendar) { calendar.hide(); }, // First date of the month. firstDate: null }; // Our plugin object var glDatePicker = (function() { // Main entry point. Initialize the plugin function glDatePicker(element, userOptions) { // Grab handle to this var self = this; // Save bound element to el self.el = $(element); var el = self.el; // Merge user options into default options self.options = $.extend(true, {}, $.fn.glDatePicker.defaults, userOptions); var options = self.options; // Find the calendar element if the user provided one self.calendar = $($.find('[gldp-el=' + el.attr('gldp-id') + ' ]')); // Default first date to selected options.selectedDate = options.selectedDate || options.todayDate; options.firstDate = (new Date((options.firstDate || options.selectedDate)))._first(); if(!(el.attr('gldp-id') || '').length) { el.attr('gldp-id', 'gldp-' + Math.round(Math.random() * 1e10)) } // Show the plugin on focus el .addClass('gldp-el') .bind('click', function(e) { self.show(e); }) .bind('focus', function(e) { self.show(e); }); // If the user is defining the container and it exists, hide it on initial creation. // The update function will handle showing if it's showAlways = true if(self.calendar.length && !options.showAlways) { self.calendar.hide(); } // Hide the plugin on mouse up outside of the plugin $(document).bind('mouseup', function(e) { var target = e.target; var calendar = self.calendar; if(!el.is(target) && !calendar.is(target) && calendar.has(target).length === 0 && calendar.is(':visible')) { self.hide(); } }); // Render calendar self.render(); }; // Public methods glDatePicker.prototype = { show: function() { // Hide others and show this calendar $.each($('.gldp-el').not(this.el), function(i, o) { if(o.length) { o.options.onHide(o.calendar) ; } }); // Show this calendar this.options.onShow(this.calendar); }, hide: function() { if(this.options && !this.options.showAlways) { this.options.onHide(this.calendar); } }, // Render the calendar render: function(renderCalback) { var self = this; var el = self.el; var options = self.options; var calendar = self.calendar; // Build a core class (with border) that every element would have var coreClass = ' core border '; var cssName = 'gldp-' + options.cssName; // Get today var todayVal = options.todayDate._val(); var todayTime = todayVal.time; // Constants var maxRow = 6; var maxCol = 7; var borderSize = options.borderSize + 'px'; // Helper function to build selectable list var getSelectableList = function(min, max, userList) { // Build a default list using min/max var resultList = []; for(var i = min; i <= max; i++) { resultList.push(i); } // If user provided a collection, sanitize list by ensuring it's within range and unique if(userList) { var newList = []; $.each(userList, function(i, v) { if(v >= min && v <= max && newList._indexOf(v) < 0) { newList.push(v); } }); resultList = newList.length ? newList : resultList; }; // Sort the values before returning it resultList.sort(); return resultList; }; // Selectable (constants) var selectableMonths = getSelectableList(0, 11, options.selectableMonths); var selectableYears = getSelectableList(todayVal.year - 5, todayVal.year + 5, options.selectableYears); var selectableDOW = getSelectableList(0, 6, options.selectableDOW); var dowNames = options.dowNames || [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]; var monthNames = options.monthNames || [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; // Create cell width based on el size var containerWidth = el.outerWidth(); var containerHeight = containerWidth; // Create cell size based on container size var getCellSize = function(_size, _count) { return (_size / _count) + ((options.borderSize / _count) * (_count - 1)); }; var cellWidth = getCellSize(containerWidth, maxCol); var cellHeight = getCellSize(containerHeight, maxRow + 2); // If calendar doesn't exist, create it and re-assign it to self if(!calendar.length) { self.calendar = calendar = $('<div/>') .attr('gldp-el', el.attr('gldp-id')) .data('is', true) .css( { display: (options.showAlways ? undefined : 'none'), zIndex: options.zIndex, width: (cellWidth * maxCol) + 'px' }); $('body').append(calendar); } else { if(!eval(calendar.data('is'))) { containerWidth = calendar.outerWidth(); containerHeight = calendar.outerHeight(); cellWidth = getCellSize(containerWidth, maxCol); cellHeight = getCellSize(containerHeight, maxRow + 2); } } // Hide calendar if the target element isn't visible if(!el.is(':visible')) { calendar.hide(); } // Add core classes and remove calendar's children calendar .removeClass() .addClass(cssName) .children().remove(); // Bind to resize event to position calendar var onResize = function() { var elPos = el.offset(); calendar.css( { top: (elPos.top + el.outerHeight() + options.calendarOffset.y) + 'px', left: (elPos.left + options.calendarOffset.x) + 'px' }); }; $(window).resize(onResize); onResize(); // Create variables for cells var cellCSS = { width: cellWidth + 'px', height: cellHeight + 'px', lineHeight: cellHeight + 'px' }; // Helper function to setDate var setFirstDate = function(_date) { if(_date) { // Get first date options.firstDate = _date; // Update the calendar self.render(); } }; var getFirstDate = function(_offset) { // Create start date as the first date of the month var _date = new Date(options.firstDate); // Default to no offset _offset = _offset || 0; // Find out which months are selectable while(true) { // Adjust date for month offset _date.setMonth(_date.getMonth() + _offset); _date.setDate(Math.min(1, _date._max())); // If not an offset, break out of the loop if(_offset == 0) { break; } // Get _date's value var dateVal = _date._val(); // Get local vars var dateMonth = dateVal.month; var dateYear = dateVal.year; // Find the month first if(selectableMonths._indexOf(dateMonth) != -1) { // If year is in our collection, break... if(selectableYears._indexOf(dateYear) != -1) { break; } else { // ...otherwise, if it's out of bounds, exit loop if(dateYear < selectableYears[0] || dateYear > selectableYears[selectableYears.length - 1]) { return null; } } } } return _date; }; // Get the previous, next first dates var prevFirstDate = getFirstDate(-1); var nextFirstDate = getFirstDate(1); // Get the first date for the current month being rendered var firstDate = (options.firstDate = getFirstDate()); var firstDateVal = firstDate._val(); var firstDateMonth = firstDateVal.month; var firstDateYear = firstDateVal.year; // Get the start date in the calendar var startDate = new Date(firstDate); // Sanitize days of the week offset var dowOffset = Math.abs(Math.min(6, Math.max(0, options.dowOffset))); // Offset weekdays var startOffset = startDate.getDay() - dowOffset; startOffset = startOffset < 1 ? -7 - startOffset : -startOffset; dowNames = (dowNames.concat(dowNames)) .slice(dowOffset, dowOffset + 7); // Offset the start date startDate._add(startOffset); // Gather flags for prev/next arrows var showPrev = (prevFirstDate); var showNext = (nextFirstDate); // Create the arrows and title var monyearClass = coreClass + 'monyear '; var prevCell = $('<div/>') .addClass(monyearClass) .css( $.extend({}, cellCSS, { borderWidth: borderSize + ' 0 0 ' + borderSize }) ) .append( $('<a/>') .addClass('prev-arrow' + (showPrev ? '' : '-off')) .html(options.prevArrow) ) .mousedown(function() { return false; }) .click(function(e) { if(options.prevArrow != '' && showPrev) { e.stopPropagation(); setFirstDate(prevFirstDate); } }); var titleCellCount = maxCol - 2; var titleWidth = (cellWidth * titleCellCount) - (titleCellCount * options.borderSize) + (options.borderSize); var titleCell = $('<div/>') .addClass(monyearClass + 'title') .css( $.extend({}, cellCSS, { width: titleWidth + 'px', borderTopWidth: borderSize, marginLeft: '-' + (borderSize) }) ); var nextCell = $('<div/>') .addClass(monyearClass) .css( $.extend({}, cellCSS, { marginLeft: '-' + (borderSize), borderWidth: borderSize + ' ' + borderSize + ' 0 0' }) ) .append( $('<a/>') .addClass('next-arrow' + (showNext ? '' : '-off')) .html(options.nextArrow) ) .mousedown(function() { return false; }) .click(function(e) { if(options.nextArrow != '' && showNext) { e.stopPropagation(); setFirstDate(nextFirstDate); } }); // Add cells for prev/title/next calendar .append(prevCell) .append(titleCell) .append(nextCell); // Add all the cells to the calendar for(var row = 0, cellIndex = 0; row < maxRow + 1; row++) { for(var col = 0; col < maxCol; col++, cellIndex++) { var cellDate = new Date(startDate); var cellClass = 'day'; var cellZIndex = options.zIndex + (cellIndex); var cell = $('<div/>') if(!row) { cellClass = 'dow'; cell.html(dowNames[col]); cellDate = null; } else { // Get the new date for this cell cellDate._add(col + ((row - 1) * maxCol)); // Get value for this date var cellDateVal = cellDate._val(); var cellDateTime = cellDateVal.time; // Variable to hold special data var specialData = null; // Determine if this date is selectable var isSelectable = true; // Helper function to get repeat friendly date against current date var getRepeatDate = function(v, date) { // If repeating, set the date's year and month accordingly if(v.repeatYear === true) { date.setYear(cellDateVal.year); } if(v.repeatMonth === true) { date.setMonth(cellDateVal.month); } return date._val(); }; // Assign date for the cell cell.html(cellDateVal.date); // If we have selectable date ranges if(options.selectableDateRange) { isSelectable = false; $.each(options.selectableDateRange, function(i, v) { var dateFrom = v.from; var dateTo = (v.to || null); // If to is not specified, default to max days in the from month dateTo = dateTo || new Date(v.from.getFullYear(), v.from.getMonth(), v.from._max()); // If repeating year, set the from and two to the current date's year dateFrom = getRepeatDate(v, dateFrom); dateTo = getRepeatDate(v, dateTo); // Test to see if this date is selectable if(cellDateTime >= dateFrom.time && cellDateTime <= dateTo.time) { isSelectable = true; return true; } }); } // Handle date ranges and collections if(options.selectableDates) { if((options.selectableDateRange && !isSelectable) || (isSelectable && !options.selectableDateRange)) { isSelectable = false; } $.each(options.selectableDates, function(i, v) { var vDate = getRepeatDate(v, v.date); if(vDate.time == cellDateTime) { return (isSelectable = true); } }); } // If not active or if not within selectableMonths, set to noday otherwise evaluate accordingly if(!isSelectable || selectableYears._indexOf(cellDateVal.year) < 0 || selectableMonths._indexOf(cellDateVal.month) < 0 || selectableDOW._indexOf(cellDateVal.day) < 0) { cellClass = 'noday'; } else { // Handle active dates and weekends cellClass = ([ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat' ])[cellDateVal.day]; // Handle today or selected dates if(firstDateMonth != cellDateVal.month) { cellClass += ' outday'; } if(todayTime == cellDateTime) { cellClass = 'today'; cellZIndex += 50; } if(options.selectedDate._time() == cellDateTime) { cellClass = 'selected'; cellZIndex += 51; } // Handle special dates if(options.specialDates) { $.each(options.specialDates, function(i, v) { var vDate = getRepeatDate(v, v.date); if(vDate.time == cellDateTime) { cellClass = (v.cssClass || 'special'); cellZIndex += 52; specialData = v.data; } }); } cell .mousedown(function() { return false; }) .hover(function(e) { e.stopPropagation(); // Get the data from this cell var hoverData = $(this).data('data'); // Call callback options.onHover(el, cell, hoverData.date, hoverData.data); }) .click(function(e) { e.stopPropagation(); // Get the data from this cell var clickedData = $(this).data('data'); // Save date to selected and first options.selectedDate = options.firstDate = clickedData.date; // Update calendar (and auto-hide if necessary) self.render(function() { if(!options.showAlways && options.hideOnClick) { self.hide(); } }); // Call callback options.onClick(el, $(this), clickedData.date, clickedData.data); }); } } // Update the css for the cell $.extend(cellCSS, { borderTopWidth: borderSize, borderBottomWidth: borderSize, borderLeftWidth: (row > 0 || (!row && !col)) ? borderSize : 0, borderRightWidth: (row > 0 || (!row && col == 6)) ? borderSize : 0, marginLeft: (col > 0) ? '-' + (borderSize) : 0, marginTop: (row > 0) ? '-' + (borderSize) : 0, zIndex: cellZIndex }); // Assign other properties to the cell cell .data('data', { date: cellDate, data: specialData}) .addClass(coreClass + cellClass) .css(cellCSS); // Add cell to calendar calendar.append(cell); } } // Render the month / year title // Helper function for toggling select and text var toggleYearMonthSelect = function(showYear) { var show = 'inline-block'; var hide = 'none'; if(options.allowMonthSelect) { monthText.css({ display: !showYear ? hide : show }); monthSelect.css({ display: !showYear ? show : hide }); } if(options.allowYearSelect) { yearText.css({ display: showYear ? hide : show }); yearSelect.css({ display: showYear ? show : hide }); } }; // Helper function when select is updated var onYearMonthSelect = function() { options.firstDate = new Date(yearSelect.val(), monthSelect.val(), 1); self.render(); }; // Build month selector var monthSelect = $('<select/>') .hide() .change(onYearMonthSelect); // Build year selector var yearSelect = $('<select/>') .hide() .change(onYearMonthSelect); // Build month label var monthText = $('<span/>') .html(monthNames[firstDateMonth]) .mousedown(function() { return false; }) .click(function(e) { e.stopPropagation(); toggleYearMonthSelect(false); }); // Build year label var yearText = $('<span/>') .html(firstDateYear) .mousedown(function() { return false; }) .click(function(e) { e.stopPropagation(); toggleYearMonthSelect(true); }); // Populate month select $.each(monthNames, function(i, v) { if(options.allowMonthSelect && selectableMonths._indexOf(i) != -1) { var o = $('<option/>').html(v).attr('value', i); if(i == firstDateMonth) { o.attr('selected', 'selected');} monthSelect.append(o); } }); // Populate year select $.each(selectableYears, function(i, v) { if(options.allowYearSelect) { var o = $('<option/>').html(v).attr('value', v); if(v == firstDateYear) { o.attr('selected', 'selected'); } yearSelect.append(o); } }); var titleYearMonth = $('<div/>') .append(monthText) .append(monthSelect) .append(yearText) .append(yearSelect); // Add to title titleCell.children().remove(); titleCell.append(titleYearMonth); // Run the callback signaling end of the render renderCalback = renderCalback || (function() {}); renderCalback(); } }; // Return the plugin return glDatePicker; })(); // One time initialization of useful prototypes (function() { Date.prototype._clear = function() { this.setHours(0); this.setMinutes(0); this.setSeconds(0); this.setMilliseconds(0); return this; }; Date.prototype._time = function() { return this._clear().getTime(); }; Date.prototype._max = function() { var isLeapYear = (new Date(this.getYear(), 1, 29).getMonth() == 1) ? 1 : 0; var days = [31, 28 + isLeapYear, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; return days[this.getMonth()]; }; Date.prototype._add = function(days) { this.setDate(this.getDate() + days); }; Date.prototype._first = function() { var date = new Date(this); date.setDate(1); return date; }; Date.prototype._val = function() { this._clear(); return { year: this.getFullYear(), month: this.getMonth(), date: this.getDate(), time: this.getTime(), day: this.getDay() }; }; Array.prototype._indexOf = function(value) { return $.inArray(value, this); } })(); })();
.gldp-default { position: absolute; font-family: 'helvetica'; } /* Core style for every cell */ .gldp-default .core { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; position: relative; float: left; padding: 0; margin: 0; font-size: 14px; text-align: center; cursor: pointer; color: #222; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #dadada 98%, #ffffff 99%, #dadada 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(98%,#dadada), color-stop(99%,#ffffff), color-stop(100%,#dadada)); background: -webkit-linear-gradient(top, #ffffff 0%,#dadada 98%,#ffffff 99%,#dadada 100%); background: -o-linear-gradient(top, #ffffff 0%,#dadada 98%,#ffffff 99%,#dadada 100%); background: -ms-linear-gradient(top, #ffffff 0%,#dadada 98%,#ffffff 99%,#dadada 100%); background: linear-gradient(to bottom, #ffffff 0%,#dadada 98%,#ffffff 99%,#dadada 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dadada',GradientType=0 ); } /* Cell border */ .gldp-default .border { border-style: solid; border-width: 0; border-color: #888; } /* Month/Year text and select */ .gldp-default .monyear, .gldp-default .monyear select { font-size: 16px !important; font-weight: bold; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75); } /* Month/Year text */ .gldp-default .monyear span { margin: 0 5px 0 5px; } /* Prev/Next arrows */ .gldp-default .prev-arrow, .gldp-default .next-arrow { color: #222; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75); } .gldp-default .prev-arrow:active, .gldp-default .next-arrow:active { color: #f00; } .gldp-default .prev-arrow-off, .gldp-default .next-arrow-off { color: #222; opacity: 0.15; } /* Days of the week */ .gldp-default .dow { color: #fff; font-weight: bold; cursor: pointer; background: #337ab7; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#880000',GradientType=0 ); } /* Weekdays */ .gldp-default .mon, .gldp-default .tue, .gldp-default .wed, .gldp-default .thu, .gldp-default .fri { font-weight: bold; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75); } /* Weekend days */ .gldp-default .sat, .gldp-default .sun { color: #3858a8; font-weight: bold; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75); } /* Selectable days that are outside of current month being shown */ .gldp-default .outday { color: #666 !important; } /* Hover */ .gldp-default .mon:hover, .gldp-default .tue:hover, .gldp-default .wed:hover, .gldp-default .thu:hover, .gldp-default .fri:hover, .gldp-default .sat:hover, .gldp-default .sun:hover { background: #fcfff4; background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#e9e9ce)); background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); background: -o-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); background: -ms-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); } /* Non-Selectable days */ .gldp-default .noday { color: #444; font-weight: normal; cursor: wait !important; background: #aaaaaa; background: -moz-linear-gradient(top, #aaaaaa 0%, #8a8a8a 98%, #aaaaaa 99%, #8a8a8a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaaaaa), color-stop(98%,#8a8a8a), color-stop(99%,#aaaaaa), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #aaaaaa 0%,#8a8a8a 98%,#aaaaaa 99%,#8a8a8a 100%); background: -o-linear-gradient(top, #aaaaaa 0%,#8a8a8a 98%,#aaaaaa 99%,#8a8a8a 100%); background: -ms-linear-gradient(top, #aaaaaa 0%,#8a8a8a 98%,#aaaaaa 99%,#8a8a8a 100%); background: linear-gradient(to bottom, #aaaaaa 0%,#8a8a8a 98%,#aaaaaa 99%,#8a8a8a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#8a8a8a',GradientType=0 ); } /* Currently selected day */ .gldp-default .selected { color: #fff; font-weight: bold; border-color: #c00; background: #e8bf88; background: -moz-linear-gradient(top, #e8bf88 0%, #ffc19d 1%, #fd8642 2%, #ab2412 98%, #ef753f 99%, #ef753f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8bf88), color-stop(1%,#ffc19d), color-stop(2%,#fd8642), color-stop(98%,#ab2412), color-stop(99%,#ef753f), color-stop(100%,#ef753f)); background: -webkit-linear-gradient(top, #e8bf88 0%,#ffc19d 1%,#fd8642 2%,#ab2412 98%,#ef753f 99%,#ef753f 100%); background: -o-linear-gradient(top, #e8bf88 0%,#ffc19d 1%,#fd8642 2%,#ab2412 98%,#ef753f 99%,#ef753f 100%); background: -ms-linear-gradient(top, #e8bf88 0%,#ffc19d 1%,#fd8642 2%,#ab2412 98%,#ef753f 99%,#ef753f 100%); background: linear-gradient(to bottom, #e8bf88 0%,#ffc19d 1%,#fd8642 2%,#ab2412 98%,#ef753f 99%,#ef753f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8bf88', endColorstr='#ef753f',GradientType=0 ); } /* Today */ .gldp-default .today { color: #fff; font-weight: bold; border-color: #00c; background: #88bfe8; background: -moz-linear-gradient(top, #88bfe8 0%, #9dc1ff 1%, #4286fd 2%, #0124ab 98%, #3775ef 99%, #3775ef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88bfe8), color-stop(1%,#9dc1ff), color-stop(2%,#4286fd), color-stop(98%,#0124ab), color-stop(99%,#3775ef), color-stop(100%,#3775ef)); background: -webkit-linear-gradient(top, #88bfe8 0%,#9dc1ff 1%,#4286fd 2%,#0124ab 98%,#3775ef 99%,#3775ef 100%); background: -o-linear-gradient(top, #88bfe8 0%,#9dc1ff 1%,#4286fd 2%,#0124ab 98%,#3775ef 99%,#3775ef 100%); background: -ms-linear-gradient(top, #88bfe8 0%,#9dc1ff 1%,#4286fd 2%,#0124ab 98%,#3775ef 99%,#3775ef 100%); background: linear-gradient(to bottom, #88bfe8 0%,#9dc1ff 1%,#4286fd 2%,#0124ab 98%,#3775ef 99%,#3775ef 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bfe8', endColorstr='#3775ef',GradientType=0 ); } /* Special */ .gldp-default .special { color: #fff; font-weight: bold; border-color: #0c0; background: #88e888; background: -moz-linear-gradient(top, #88e888 0%, #9dff9d 1%, #42fd42 2%, #01ab01 98%, #37ef37 99%, #37ef37 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88e888), color-stop(1%,#9dff9d), color-stop(2%,#42fd42), color-stop(98%,#01ab01), color-stop(99%,#37ef37), color-stop(100%,#37ef37)); background: -webkit-linear-gradient(top, #88e888 0%,#9dff9d 1%,#42fd42 2%,#01ab01 98%,#37ef37 99%,#37ef37 100%); background: -o-linear-gradient(top, #88e888 0%,#9dff9d 1%,#42fd42 2%,#01ab01 98%,#37ef37 99%,#37ef37 100%); background: -ms-linear-gradient(top, #88e888 0%,#9dff9d 1%,#42fd42 2%,#01ab01 98%,#37ef37 99%,#37ef37 100%); background: linear-gradient(to bottom, #88e888 0%,#9dff9d 1%,#42fd42 2%,#01ab01 98%,#37ef37 99%,#37ef37 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88e888', endColorstr='#37ef37',GradientType=0 ); }
9、使用折线图组件
效果图：
HTML结构：
<div id="canvasPlace"> <script src="js/drawLine.js" ></script> </div>
组件源码：
// don't try to learn anything from the code, it's a // series of hacks. this one's all about the visuals. // - @hakimel var LineChart = function( options ) { var data = options.data; var canvas = document.getElementById("canvasPlace").appendChild( document.createElement( 'canvas' ) ); var context = canvas.getContext( '2d' ); var rendering = false, paddingX = 40, paddingY = 40, width = 1100 ,//options.width || window.innerWidth, height = 400 ,//options.height || window.innerHeight, progress = 0; canvas.width = width; canvas.height = height; var maxValue, minValue; var y1 = paddingY + ( 0.05 * ( height - ( paddingY * 2 ) ) ), y2 = paddingY + ( 0.50 * ( height - ( paddingY * 2 ) ) ), y3 = paddingY + ( 0.95 * ( height - ( paddingY * 2 ) ) ); format(); render(); function format( force ) { maxValue = 0; minValue = Number.MAX_VALUE; data.forEach( function( point, i ) { maxValue = Math.max( maxValue, point.value ); minValue = Math.min( minValue, point.value ); } ); data.forEach( function( point, i ) { point.targetX = paddingX + ( i / ( data.length - 1 ) ) * ( width - ( paddingX * 2 ) ); point.targetY = paddingY + ( ( point.value - minValue ) / ( maxValue - minValue ) * ( height - ( paddingY * 2 ) ) ); point.targetY = height - point.targetY; if( force || ( !point.x && !point.y ) ) { point.x = point.targetX + 30; point.y = point.targetY; point.speed = 0.04 + ( 1 - ( i / data.length ) ) * 0.05; } } ); } function render() { if( !rendering ) { requestAnimationFrame( render ); return; } context.font = '10px sans-serif'; context.clearRect( 0, 0, width, height ); context.fillStyle = '#222'; context.fillRect( paddingX, y1, width - ( paddingX * 2 ), 1 ); context.fillRect( paddingX, y2, width - ( paddingX * 2 ), 1 ); context.fillRect( paddingX, y3, width - ( paddingX * 2 ), 1 ); if( options.yAxisLabel ) { context.save(); context.globalAlpha = progress; context.translate( paddingX - 15, height - paddingY - 10 ); context.rotate( -Math.PI / 2 ); context.fillStyle = '#000'; context.fillText( options.yAxisLabel, 0, 0 ); context.restore(); } var progressDots = Math.floor( progress * data.length ); var progressFragment = ( progress * data.length ) - Math.floor( progress * data.length ); data.forEach( function( point, i ) { if( i <= progressDots ) { point.x += ( point.targetX - point.x ) * point.speed; point.y += ( point.targetY - point.y ) * point.speed; context.save(); var wordWidth = context.measureText( point.label ).width; context.globalAlpha = i === progressDots ? progressFragment : 1; context.fillStyle = point.future ? '#aaa' : '#000'; context.fillText( point.label, point.x - ( wordWidth / 2 ), height - 18 ); if( i < progressDots && !point.future ) { context.beginPath(); context.arc( point.x, point.y, 4, 0, Math.PI * 2 ); context.fillStyle = '#1baee1'; context.fill(); } context.restore(); } } ); context.save(); context.beginPath(); context.strokeStyle = '#1baee1'; context.lineWidth = 2; var futureStarted = false; data.forEach( function( point, i ) { if( i <= progressDots ) { var px = i === 0 ? data[0].x : data[i-1].x, py = i === 0 ? data[0].y : data[i-1].y; var x = point.x, y = point.y; if( i === progressDots ) { x = px + ( ( x - px ) * progressFragment ); y = py + ( ( y - py ) * progressFragment ); } if( point.future && !futureStarted ) { futureStarted = true; context.stroke(); context.beginPath(); context.moveTo( px, py ); context.strokeStyle = '#aaa'; if( typeof context.setLineDash === 'function' ) { context.setLineDash( [2,3] ); } } if( i === 0 ) { context.moveTo( x, y ); } else { context.lineTo( x, y ); } } } ); context.stroke(); context.restore(); progress += ( 1 - progress ) * 0.02; requestAnimationFrame( render ); } this.start = function() { rendering = true; } this.stop = function() { rendering = false; progress = 0; format( true ); } this.restart = function() { this.stop(); this.start(); } this.append = function( points ) { progress -= points.length / data.length; data = data.concat( points ); format(); } this.populate = function( points ) { progress = 0; data = points; format(); } }; var chart = new LineChart({ data: [] }); reset(); chart.start(); //操作函数 //设置值 function append(label,value,future) { if(future==null) chart.append([ { label:label, value:value} ]); else chart.append([ { label:label, value:value ,future :true} ]); } function restart() { chart.restart(); } function reset() { chart.populate([{ label: '基数0', value: 0 }]); /*{ label: 'One', value: 100 }, { label: 'Two', value: 90 }, { label: 'Three', value: 86 }, { label: 'Four', value: 79 }, { label: 'Five', value: 110 }*/ }
