html怎么用js特效做折线图?

JavaScript014

html怎么用js特效做折线图?,第1张

使用原生js自己写或js库(框架)都是可以的,由于目前HTML5并不是所有的浏览器都完美支持,使用兼容性比较好的js库是个不错的选择。

例如Highcharts图标库就可以实现各类曲线图、折线图、区域图、3D图、柱状图等等。具体使用参考:http://www.hcharts.cn/demo/index.php。

Highcharts中做折线图的demo代码可以作为参考:

<html lang="en">

<head>

<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js">

</script>

<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js">

</script>

<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js">

</script>

<script>

$(function () {

$('#container').highcharts({

chart: {

type: 'line'

},

title: {

text: 'Monthly Average Temperature'

},

ubtitle: {

text: 'Source: WorldClimate.com'

},

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

},

yAxis: {

title: {

text: 'Temperature (°C)'

}

},

tooltip: {

enabled: false,

formatter: function() {

return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y +'°C'

}

},

plotOptions: {

line: {

dataLabels: {

enabled: true},

enableMouseTracking: false

}

},

series: [{

name: 'Tokyo',

data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

}, {

name: 'London',

data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

}]

})

})

</script>

</head>

<body>

<div id="container" style="min-width:700pxheight:400px"></div>

</body>

</html>

html中如何用js实现提交表单

办法1.同一个页面中建立两个表单 各自提交:

<form action="?" name="form1" id="form1">

<!-- 表单内容 -->

<input type="submit" />

</form>

<form action="?" name="form1" id="form1">

<!-- 表单内容 -->

<input type="submit"  />

</form>

办法2:如果非要只有一个表单的话,通过js提交:

<script type="text/javascript" language="javascript">

function submitYouFrom(path){

$('form1').action=path

$('form1').submit()

}

</script>

<form action="?" name="form1" id="form1">

<!-- 表单内容 -->

<input type="button" value="提交1" onclick="submitYouFrom('地址一')"/>

<input type="button" value="提交2" onclick="submitYouFrom('地址二')"/>

</form>

JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。

比如图片切换,渐变等等,它为网页活跃了网页的气氛,有时候会起到一定的亲切力。

JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。

扩展资料:

能够具有交互性,能够包含更多活跃的元素,就有必要在网页中嵌入其它的技术。如:Javascript、VBScript、Document Object Model(DOM,文档对象模型)、Layers和 Cascading Style Sheets(CSS,层叠样式表)。

JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化,减少下载时间。JavaScript 能及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的,只要你有创意。

这个函数是求如图蓝线的长度  黑色是当前窗口   绿色是hover的元素

function move( ev , bool) {

var top = $(this).offset().top

var bottom = top + $(this).height()

var left = $(this).offset().left

var right = left + $(this).width()

这个函数是求相对于当前页面  hover元素的四条边的距离

然后计算

var sT = Math.abs(y - top),   //鼠标位置到hover元素顶部的距离

sB = Math.abs(y - bottom),   //底部

sL = Math.abs(x - left),    //左边

sR = Math.abs(x - right) //右边

var a = Math.min( sT , sB , sL , sR )  //然后在这4个距离里面选出最小值    变量a 就是距离最短的值