from表单里有个button会自己默认提交
<form action="http://www.baidu.com" method="post" id="changeForm">
<input type="hidden" value="55555" name = "changeUserId" id = "changeUserId"/>
<button >提交</button>
</form>
网页的自身关闭
<form action="http://www.baidu.com" method="post" id="changeForm">
<input type="hidden" value="55555" name = "changeUserId" id = "changeUserId"/>
<button onclick="self.close()">提交</button>
</form>
Chart.min.js画图
<!doctype html>
<html>
<head>
<title>Bar Chart</title>
<meta charset="UTF-8" />
<script src="js/Chart.min.js"></script>
<script src="js/Chart.js"></script>
<meta name="viewport" content="initial-scale = 1, user-scalable = no">
<style>
canvas {}
</style>
</head>
<body>
<div id="" style="">
<a href="https://www.baidu.com">导出数据</a>
<canvas id="canvas" height="200" width="300"></canvas>
<canvas id="canvas2" height="200" width="300" style=" margin-top: 50px;"></canvas>
<canvas id="myChartLine" width="400" height="400"></canvas>
<canvas id="myChartDoughnut" width="400" height="400"></canvas>
<canvas id="myChartPie" width="400" height="400"></canvas>
</div>
<script>
var dataCourse = new Array;
var arr = [65, -59, 90];
var arr1 = [65, -59, 90, -81, 56, -55, 40];
dataCourse = arr1;
dataCourse.push(999);
//alert(dataCourse);
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
title: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}, {
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive: true,
scaleShowGridLines: false,
bezierCurve: false
});
var canvas1 = document.getElementById("canvas2");
var context = canvas1.getContext("2d");
window.myBar2 = new Chart(context).Bar(barChartData, {
responsive: true
});
context.translate(0, canvas1.height);
// context.rotate(10*Math.PI/300);
// context.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.shadowOffsetY = 20;
context.scale(1, -1);
var dataLine = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
fillColor: "red",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}, {
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
}]
};
var defaults = {
//Boolean - If we show the scale above the chart data
scaleOverlay: false,
//Boolean - If we want to override with a hard coded scale
scaleOverride: false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps: null,
//Number - The value jump in the hard coded scale
scaleStepWidth: null,
//Number - The scale starting value
scaleStartValue: null,
//String - Colour of the scale line
scaleLineColor: "rgba(0,0,0,.1)",
//Number - Pixel width of the scale line
scaleLineWidth: 1,
//Boolean - Whether to show labels on the scale
scaleShowLabels: false,
//Interpolated JS string - can access value
scaleLabel: "<%=value%>",
//String - Scale label font declaration for the scale label
scaleFontFamily: "'Arial'",
//Number - Scale label font size in pixels
scaleFontSize: 12,
//String - Scale label font weight style
scaleFontStyle: "normal",
//String - Scale label font colour
scaleFontColor: "#666",
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: true,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether the line is curved between points
bezierCurve: true,
//Boolean - Whether to show a dot for each point
pointDot: true,
//Number - Radius of each point dot in pixels
pointDotRadius: 3,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth: 1,
//Boolean - Whether to show a stroke for datasets
datasetStroke: true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth: 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill: true,
//Boolean - Whether to animate the chart
animation: true,
//Number - Number of animation steps
animationSteps: 60,
//String - Animation easing effect
animationEasing: "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete: 10
}
// 折线图
var ctxLine = document.getElementById("myChartLine").getContext("2d");
new Chart(ctxLine).Line(dataLine, defaults);
var dataDoughnut = [{
value: 30,
color: "#F7464A"
}, {
value: 50,
color: "#E2EAE9"
}, {
value: 100,
color: "#D4CCC5"
}, {
value: 40,
color: "#949FB1"
}, {
value: 120,
color: "#4D5360"
}
];
var Doughnut = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//The percentage of the chart that we cut out of the middle.
percentageInnerCutout: 50,
//Boolean - Whether we should animate the chart
animation: true,
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeOutBounce",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//Function - Will fire on animation completion.
onAnimationComplete: null
}
// 环图
var ctxDoughnut = document.getElementById("myChartDoughnut").getContext("2d");
new Chart(ctxDoughnut).Doughnut(dataDoughnut, Doughnut);
var dataPie = [{
value: 30,
color: "#F38630"
}, {
value: 50,
color: "#E0E4CC"
}, {
value: 100,
color: "#69D2E7"
}]
var Pie = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Boolean - Whether we should animate the chart
animation: true,
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeOutBounce",
//Boolean - Whether we animate the rotation of the Pie
animateRotate: true,
//Boolean - Whether we animate scaling the Pie from the centre
animateScale: false,
//Function - Will fire on animation completion.
onAnimationComplete: null
};
// 环图
var ctxPie = document.getElementById("myChartPie").getContext("2d");
new Chart(ctxPie).Pie(dataPie, Pie);
</script>
<div>
html原有的表单属性
<h3>演示如何创建 Date 字段</h3><p>点击按钮来创建 Date 字段。</p>
<form action="http://www.baidu.com" method="post">
本地时间格式：<input type="datetime-local" id="localTime" value="2016-06-01" /></br>
日期：<input type="date" id="localTime2" value="2016-06-01" /></br>
月份：<input type="month" id="mymonth" value="2016-06-01" /></br>
周：<input type="week" id="myurl" value="" /></br>
时间：<input type="time" id="mytime" value="" /></br>
数字：<input type="number" id="mynumber" value="" /></br>
进度：<input type="range" id="myrange" value="30" /></br>
搜索框：<input type="search" id="mysearch" value="" /></br>
<input type="submit" value="提交" />
</form>
<button onclick="myFunction()">试一下</button>
<button onclick="getmyDate()">时间</button>
<script>
function myFunction() {
var x = document.createElement("INPUT");
x.setAttribute("type", "date");
x.setAttribute("value", "2016-06-01");
x.setAttribute("id", "myDate");
document.body.appendChild(x);
};
function getmyDate() {
var myDate = document.getElementById("localTime2").value;
alert(typeof myDate);
};
</script>
</div>
</body>
</html>