Canvas实现放射线动画效果_H5之家 - 中国HTML5教程资源分享第一站

小编给大家推荐的这篇文章介绍了Canvas实现放射线动画效果的教程，非常实用，有兴趣的同学可以参考一下。

效果如下：

代码如下：

代码如下复制代码

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<style>

body {background: #000;overflow: hidden;margin: 0;padding: 0;}

#canv {width: 45%;margin: 5% 30%;animation: wheel-rotate 30s linear infinite;}

@keyframes wheel-rotate {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

</style>

</head>

<body>

<canvasid="canv"width="600"height="600"></canvas>

<scripttype="text/javascript">

var c;

var $;

var w = 600;

var h = 600;

constant = 15;

var rad = 300;

var timeout = 0;

c = document.getElementById("canv");

$ = c.getContext("2d");

drawLines();

function drawLines() {

$.fillRect(0,0,w,h);

$.translate(w/2,h/2);

for (var i = 0; i <25; i++) {

for (var n = -45; n <= 45; n+=constant) {

setTimeout("draw("+n+");",100 * timeout);

timeout++;

}

function draw(n){

$.beginPath();

$.moveTo(0,rad);

varradians=Math.PI/180*n;

var x = (rad * Math.sin(radians)) / Math.sin(Math.PI/2 - radians);

$.lineTo(x,0);

if (Math.abs(n) == 45) {

$.strokeStyle=rndColor();

$.lineWidth=2;

} else if (n == 0) {

$.strokeStyle="rgb(200,200,200)";

$.lineWidth=.5;

} else {

$.strokeStyle="rgb(110,110,110)";

$.lineWidth=.5;

}

$.stroke();

$.rotate((Math.PI/180)*15);

}

function rndColor() {

varr=255*Math.random()|0,

g=255*Math.random()|0,

b=255*Math.random()|0;

return 'rgb(' + r + ',' + g + ',' + b + ')';

}

function myrefresh(){

//window.location.reload();

//drawLines()

}

//setTimeout('myrefresh()',100*175);

</script>

</body>

</html>

没有了

本文介绍了bootstrap table操作技巧分享，非常实用，有兴趣的同学可以参考一下。

本文实例为大家分享了bootstrap table操作的相关技巧，供大家参考，具体内容如下

源码

html代码：

代码如下复制代码

<tableid="agenttable"data-toggle="table"

data-pagination="true"data-cache="false"

data-height="800"data-show-columns="true"

data-smart-display="true"

data-async=false

data-query-params="bh_agt_queryParams"

data-search="true"

data-sortable="true"

data-show-export="true"

data-show-refresh="true"

data-page-size="15"

data-page-list="[15,30,60,120]"

data-response-handler="bh_agt_bootstrapresp"

data-row-style="table_rowFormatter"

<thead>

<tr>

<thdata-field="id"data-align="center"data-sortable="true"bgcolor="#FF0000">id</th>

<thdata-field="name"data-align="center"data-sortable="true">名称</th>

<thdata-field="agentip"data-align="center"data-sortable="true">ip</th>

<thdata-field="country"data-align="center"data-sortable="true">国家</th>

<thdata-field="province"data-align="center"data-sortable="true">省</th>

<thdata-field="city"data-align="center"data-sortable="true">市</th>

<thdata-field="carrier"data-align="center"data-sortable="true">提供商</th>

</tr>

</thead>

</table>

js代码：

代码如下复制代码

//生成后台数据请求参数。后台可以用request.getParameter获取

varbh_agt_queryParams=function(params){

vartmp = bt_bhagent_paras//外面生成的json格式参数

bt_bhagent_paras={}

returntmp

}

varbh_agt_bootstrapresp=function(data){

bt_bhagent_list = data;

//这里是动态加载数据后的入口函数。

//在这里可以对data进行二次加工生成retdata。

//在这里也可以出发其它的关联动作，比如说画echart图。

returnretdata

}

//对单行数据进行格式化,可以返回各种css

vartable_rowFormatter =function(row, index){

if(row.succ =="SUCCESS"){

return{ classes:'success'};

}elseif(row.succ =="NOTING"){

return{ classes:'warning'};

}

return{ classes:'danger'};

}

//加载Table数据

varbh_table_update =function(refresh,filter){

if(refresh){

$('#'+ filter.eTable).bootstrapTable('refresh',{

url: filter.tableUrl

});

}else{

$('#'+ filter.eTable).bootstrapTable({

url: filter.tableUrl

});

}

知识点说明

没有了

小编给大家推荐的这篇文章介绍了bootstrap 下拉多选框进行多选传值问题代码分析，非常实用，有兴趣的同学快来看看吧。

项目开发遇到个问题，就是引入bootstrap下拉多选框进行多选的时候，用form表单提交到后台，获取不到多选的值，只能获取的选择的第一个值。

纠结了会。

jsp页面需要引入这东东~

直接上代码~

<head>

functionfun(){

varstr=[];

varobj = document.getElementById("approverq");

for(vari=0;i<obj.options.length;i++){

if(obj.options[i].selected){

str.push(obj.options[i].value);// 收集选中项

}

$("#approver").val(str);

}

</script>

</head>

<body>

<form id="form"name="form"class="form-horizontal"method="post"

action="${ctx}/leave/editEntity.shtml">

<input type="hidden"class="form-control checkacc"

value="${leave.id}"name="LeaveFormMap.id"id="id">