前端效果,

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
<title>大转盘</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
@charset "utf-8";
/*reset css*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, .footer, .header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video{margin: 0;padding: 0;border: 0;font-size: 100%;font-size: 14px;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,.footer, .header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote,q {quotes: none;}
a{text-decoration: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse;border-spacing: 0;}
textarea{resize: none;font-family:arial,"黑体";}
*{outline: none;-webkit-tap-highlight-color:rgba(255,0,0,0);}
a:focus,a:active,a:link,a:visited,a:hover{outline: none;text-decoration: none;-webkit-tap-highlight-color:rgba(255,0,0,0);}

@charset 'utf-8';
body,html{height:100%}

.box{width:5.45rem;height:5.45rem;margin-top:30vh}
.panRotate{animation:panRotate 5s ease-in;
animation-fill-mode:both;
-webkit-animation:panRotate 5s ease-in;
-webkit-animation-fill-mode:both}
@keyframes panRotate{to{transform:rotate(2880deg);-webkit-transform:rotate(2880deg)}}
@-webkit-keyframes panRotate{to{transform:rotate(2880deg);-webkit-transform:rotate(2880deg)}}

.rotate_0{animation:rotate_0 2.05s ease-out;animation-fill-mode:both;-webkit-animation:rotate_0 2.05s ease-out;
-webkit-animation-fill-mode:both}
@keyframes rotate_0{to{transform:rotate(700deg);-webkit-transform:rotate(700deg)}}
@-webkit-keyframes rotate_0{to{transform:rotate(700deg);
-webkit-transform:rotate(700deg)}}

.rotate_10{animation:rotate_10 1s ease-out;animation-fill-mode:both;-webkit-animation:rotate_10 1s ease-out;-webkit-animation-fill-mode:both}
@keyframes rotate_10{to{transform:rotate(380deg);-webkit-transform:rotate(380deg)}}
@-webkit-keyframes rotate_10{to{transform:rotate(380deg);-webkit-transform:rotate(380deg)}}

.rotate_4{animation:rotate_4 1.15s ease-out;animation-fill-mode:both;-webkit-animation:rotate_4 1.15s ease-out;-webkit-animation-fill-mode:both}
@keyframes rotate_4{to{transform:rotate(600deg);-webkit-transform:rotate(600deg)}}
@-webkit-keyframes rotate_4{to{transform:rotate(600deg);-webkit-transform:rotate(600deg)}}

.rotate_3{animation:rotate_3 1.3s ease-out;animation-fill-mode:both;-webkit-animation:rotate_3 1.3s ease-out;-webkit-animation-fill-mode:both}
@keyframes rotate_3{to{transform:rotate(540deg);-webkit-transform:rotate(540deg)}}
@-webkit-keyframes rotate_3{to{transform:rotate(540deg);-webkit-transform:rotate(540deg)}}

.rotate_2{animation:rotate_2 1.45s ease-out;animation-fill-mode:both;-webkit-animation:rotate_2 1.45s ease-out;-webkit-animation-fill-mode:both}
@keyframes rotate_2{to{transform:rotate(480deg);-webkit-transform:rotate(480deg)}}
@-webkit-keyframes rotate_2{to{transform:rotate(480deg);-webkit-transform:rotate(480deg)}}

.rotate_1{animation:rotate_1 1.6s ease-out;animation-fill-mode:both;-webkit-animation:rotate_1 1.6s ease-out;-webkit-animation-fill-mode:both}
@keyframes rotate_1{to{transform:rotate(420deg);-webkit-transform:rotate(420deg)}}
@-webkit-keyframes rotate_1{to{transform:rotate(420deg);-webkit-transform:rotate(420deg)}}

.rotate_5{animation:rotate_5 1.75s ease-out;animation-fill-mode:both;-webkit-animation:rotate_5 1.75s ease-out;-webkit-animation-fill-mode:both}
@keyframes rotate_5{to{transform:rotate(660deg);-webkit-transform:rotate(660deg)}}
@-webkit-keyframes rotate_5{to{transform:rotate(660deg);-webkit-transform:rotate(660deg)}}

.rotate_6{animation:rotate_6 1.9s ease-out;animation-fill-mode:both;-webkit-animation:rotate_6 1.9s ease-out;-webkit-animation-fill-mode:both}
@keyframes rotate_6{to{transform:rotate(720deg);-webkit-transform:rotate(720deg)}}
@-webkit-keyframes rotate_6{to{transform:rotate(720deg);-webkit-transform:rotate(720deg)}}

@-webkit-keyframes bounceIn{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);
animation-timing-function:cubic-bezier(.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes bounceIn{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);
animation-timing-function:cubic-bezier(.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
.bounceIn{animation:bounceIn .75s;-webkit-animation:bounceIn .75s;animation-fill-mode:both;-webkit-animation-fill-mode:both}

html,body{height: 100%;}
.main{background: url(https://image.buslive.cn/zt-zp/images/hm.png) no-repeat;background-size: 100% 12.2rem;width: 6.4rem;}
.banner{background: url(https://image.buslive.cn/zt-zp/images/banner.png) no-repeat;background-size: 6rem 4.82rem;width: 6rem;height: 4.82rem;margin: 0 auto;margin-top: -0.8rem;}
.zp_box{border: 0.03rem solid #fff;width: 5.5rem;height: 5.5rem;border-radius: 50%;margin: 0 auto;position: relative;margin-top: -0.6rem;}
.zp_box .zp_bor{width: 4.5rem;height: 4.5rem;border-radius: 50%;border: 0.5rem solid #7965ff;position: relative;}
.zp_box .zp_bor i{ width: .14rem; height: .14rem; border-radius: 50%; display: block; }
.zp_box .zp_bor .light1{ position: absolute; top: -.33rem; left: 2.18rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light2{ position: absolute; top: -.23rem; left: 2.84rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light3{ position: absolute; top: .02rem; left: 3.44rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light4{ position: absolute; top: .4rem; left: 4rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light5{ position: absolute; top: 0.9rem; left: 4.35rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light6{ position: absolute; top: 1.5rem; left: 4.6rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light7{ position: absolute; top: 2.18rem; right: -.33rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light8{ position: absolute; bottom:1.5rem;left: 4.6rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light9{ position: absolute; bottom: 0.9rem; left: 4.35rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light10{ position: absolute; bottom: .4rem; left:4rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light11{ position: absolute; bottom: .02rem; left: 3.44rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light12{ position: absolute; bottom: -.23rem; left: 2.84rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light13{ position: absolute; bottom: -.33rem; left: 2.18rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light14{ position: absolute; bottom: -.23rem; right: 2.84rem; background: #ff9994; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light15{ position: absolute; bottom: .02rem; right: 3.44rem; background: #ffe84e; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light16{ position: absolute; bottom: .4rem; right: 4rem; background: #ff9994; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light17{ position: absolute; bottom: 0.9rem; right: 4.35rem; background: #ffe84e; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light18{ position: absolute; bottom: 1.5rem; right: 4.6rem; background: #ff9994; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light19{ position: absolute; bottom: 2.18rem; left: -.33rem; background: #ffe84e; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light20{ position: absolute; top: 1.5rem; right: 4.6rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light21{ position: absolute; top: .9rem; right: 4.35rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light22{ position: absolute; top: .4rem; right: 3.95rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light23{ position: absolute; top: .02rem; right: 3.44rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light24{ position: absolute; top: -.23rem; right: 2.84rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
@keyframes color_nor
{
from {background: #ffe84e;}
to {background: #ff9994;}
}

@-webkit-keyframes color_nor
{
from {background: #ffe84e;}
to {background: #ff9994;}
}
@keyframes color_oth
{
from {background: #ff9994;}
to {background: #ffe84e;}
}

@-webkit-keyframes color_oth
{
from {background: #ff9994;}
to {background: #ffe84e;}
}
.zp_pb{background: url(https://image.buslive.cn/zt-zp/images/zp_mb.png) no-repeat;background-size: 4.5rem 4.5rem;width: 4.5rem;height: 4.5rem;position: relative;border-radius: 50%;overflow: hidden;
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari 和 Chrome */
-o-transform:rotate(30deg); /* Opera */

}
.zp_go{background: url(https://image.buslive.cn/zt-zp/images/zp_zz.png) no-repeat;background-size: 1.5rem 2rem;width: 1.5rem;height: 2rem;position: absolute;z-index: 1;top: 1rem;left: 1.5rem;}
.zp_shadow{background: url(https://image.buslive.cn/zt-zp/images/zp_bs.png) no-repeat;background-size: 4.9rem .73rem;width: 4.9rem;height: .73rem;margin: 0 auto;margin-top: -0.3rem;}
.nav_btn{height: 0.75rem;margin: 0.4rem;padding-bottom: 0.3rem;position: relative;overflow: hidden;margin-top: 0.9rem;margin-bottom: 0;}
.go_back{background: url(https://image.buslive.cn/zt-zp/images/nav-btn.png) no-repeat;background-size: 2.72rem .75rem;width: 2.72rem;height: .75rem;line-height: .7rem;font-size: .26rem;text-align: center;color: #fff;float: left;}
.my_prize{background: url(https://image.buslive.cn/zt-zp/images/nav-btn.png) no-repeat;background-size: 2.72rem .75rem;width: 2.72rem;height: .75rem;line-height: .7rem;font-size: .26rem;text-align: center;color: #fff;float: right;}

.zj_pop{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.8); z-index: 99;/*display: none;*/}
.zj_pop .pop_main{position: absolute;top: 2rem;left: 0.4rem;right: 0.4rem;padding: 0.3rem 0.2rem;border-radius: 0.2rem;background-color: #fff6d6;background: url(https://image.buslive.cn/dfw_zt/images/newImages_0112/ico35_0418.png) no-repeat;background-size: 100% 100%;height:2rem;padding-top: 2rem;}
.zj_pop .pop_main .abp_txt{font-size: .4rem;color: red;text-align: center;margin: 0.1rem 0.4rem;line-height: .8rem;}
.abp_close{display: block;margin: 0.3rem auto;width: 1.5rem;height: 0.6rem;line-height: 0.6rem;border-radius: 0.1rem;color: #fff;text-align: center;font-size: 0.24rem;position: absolute;bottom: -1.5rem;right: 1.8rem;background-color: red;color: #fff;}

.np_pop{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.8); z-index: 99;/*display: none;*/}
.np_pop .pop_main{position: absolute;top: 2rem;left: 0.6rem;right: 0.6rem;padding: 0.3rem 0.2rem;border-radius: 0.2rem;background-color: #fff6d6;}
.np_pop .pop_main .abp_txt{font-size: 0.24rem;color: #000;text-align: center;margin: 0.1rem 0.4rem;line-height: 0.5rem;}
.np_close{display: block;margin: 0.3rem auto;width: 1.5rem;height: 0.6rem;line-height: 0.6rem;border-radius: 0.1rem;color: #833700;background-color: #ffcc32;text-align: center;font-size: 0.24rem;}

.buller{ position: fixed; top: 3rem; z-index: 100; display: none; left: -6.4rem; box-sizing: border-box; color: #fff; font-size: .24rem; border-radius: .5rem; line-height: .68rem; height: .68rem; background-repeat: no-repeat; white-space: nowrap; animation: move 1 4.5s linear; -webkit-animation: move 1 4.5s linear; }
.buller.bullerbg1{ padding-left: .8rem; padding-right: .15rem; background-color: rgba(89,101,105,.8); background-image: url(//image.buslive.cn/dfw_zt/images/bulletico.png); background-position: .1rem center; background-size: .64rem .52rem; }
.buller.bullerbg2{ background-image: url(//image.buslive.cn/dfw_zt/images/newImages_0112/bubble_0615.png); background-position: 0 0; background-size: 100% 100%; width: 5.7rem;padding-left: .9rem;}

@keyframes move{
0%{ left: 6.4rem };
100%{ left: -6.4rem; }
}
@-webkit-keyframes move{
0%{ left: 6.4rem };
100%{ left: -6.4rem; }
}
</style>
<script>

new function () {
var _self = this;
_self.width = 640;
_self.fontSize = 100;
_self.widthProportion = function () {
var _dom = (document.body && document.body.clientWidth || document.getElementsByTagName("html")[0].offsetWidth) / _self.width;
return _dom;
};
_self.changePage = function () {
document.getElementsByTagName("html")[0].setAttribute("style", "font-size:" + _self.widthProportion() * _self.fontSize + "px");
}
_self.changePage();
window.addEventListener('resize', function () {
_self.changePage();
}, false);
};
</script>
<body>
<div class="main">
<div class="banner"></div>
<div class="zp_box">
<div class="zp_bor">
<i class="light1"></i>
<i class="light2"></i>
<i class="light3"></i>
<i class="light4"></i>
<i class="light5"></i>
<i class="light6"></i>
<i class="light7"></i>
<i class="light8"></i>
<i class="light9"></i>
<i class="light10"></i>
<i class="light11"></i>
<i class="light12"></i>
<i class="light13"></i>
<i class="light14"></i>
<i class="light15"></i>
<i class="light16"></i>
<i class="light17"></i>
<i class="light18"></i>
<i class="light19"></i>
<i class="light20"></i>
<i class="light21"></i>
<i class="light22"></i>
<i class="light23"></i>
<i class="light24"></i>
<div class="zp_pb pan"></div>
<a href="javascript:;" class="zp_go"></a>
</div>
</div>
<div class="zp_shadow"></div>
<div class="nav_btn">
<a href="./?a=index" class="go_back" style="display:block;float:left;">返回游戏</a>
<a href="./?a=prize_my" class="my_prize">查看我的奖品</a>
</div>
</div>
<!-- <div class="prize_pop"><div class="pop_main"><div class="abp_txt">中奖啦</div><a href="javascript:;" class="abp_close">确定</a></div></div> -->
</body>
</html>
<script>
var angleValue = 22.5;
var mn = Math.floor(Math.random() * 1000);
var gameOn = false;
var _prize;
var mygold = 10000;

$('.zp_go').click(function(){

var glarr = [0,1,2,5,50,100,0,1,2,0];
var gl = Math.floor(Math.random() *10 );
console.log(glarr[gl]);
_prize = glarr[gl];
goRotate(glarr[gl]);

})

// 旋转函数
function goRotate(data){

if (data == 1) {
rotateDeg='rotate_1';
}else if(data == 100){
rotateDeg='rotate_2';
}else if(data ==50){
rotateDeg='rotate_4';
}else if(data == 5){
rotateDeg='rotate_5';
}else if(data == 2){
rotateDeg='rotate_6';
}else if(data == 0){
rotateDeg='rotate_3';
}

if(mygold>0){
mygold--;
$('.pan').addClass('panRotate');
setTimeout(function() {
$('.pan').removeClass('panRotate');
$('.pan').addClass(rotateDeg);
setTimeout(function() {
if (data == 0) {
var str = '<div class="np_pop"><div class="pop_main"><div class="abp_txt">很遗憾,您没有中奖</div><a href="javascript:;" class="np_close">确定</a></div></div>';
setTimeout(function(){$(str).appendTo("body");}, 200);

}else{
var str = '<div class="prize_pop zj_pop"><div class="pop_main"><div class="abp_txt" style="font-size:.46rem">'+_prize+'元</div><a href="javascript:;" class="abp_close">确定</a></div></div>';
setTimeout(function(){$(str).appendTo("body");}, 200);

}

// gameOn = false;
}, 3000);
}, 5000);
}else if(mygold==0){
nogold();
// gameOn = false;
}
}

$(document).on("click",".abp_close,.np_close",function(){
$(".prize_pop").remove();
$(".np_pop").fadeOut(200);
$('.pan').removeClass(rotateDeg);
})

function nogold(){
var str = '<div class="np_pop"><div class="pop_main"><div class="abp_txt">摇奖机会已用光,请通关后再来</div><a href="javascript:;" class="np_close">确定</a></div></div>';
$(str).appendTo("body");
}
</script>

jq css3实现跑马灯+大转盘的更多相关文章

  1. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  2. 【跑马灯】纯css3跑马灯demo

    我们写跑马灯一般都是用js控制定时器不断循环产生,但是定时器消耗比较大,特别是程序中很多用到定时器的时候,感觉有的时候比较卡.但是css3样式一般不会.这里主要的思路就是用css3代替js定时器实现一 ...

  3. CSS3——3D旋转图(跑马灯效果图)

    CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...

  4. 纯css3跑马灯demo

    我们写跑马灯一般都是用js控制定时器不断循环产生,但是定时器消耗比较大,特别是程序中很多用到定时器的时候,感觉有的时候比较卡.但是css3样式一般不会.这里主要的思路就是用css3代替js定时器实现一 ...

  5. jq跑马灯效果

    这几天公司产品有个无缝循环滚动的广告跑马灯要做,最开始想到的是<marquee>标签,但在PC端正常,在安卓广告屏上却怎么都跑不动,后来用的css3的animation,结果也是PC端及其 ...

  6. 纯CSS3大转盘抽奖(响应式、可配置)

    源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...

  7. 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...

  8. JQ跑马灯

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. 大转盘抽奖css3+js(简单书写)

    今天花了一段时间简单写了下抽奖大转盘,这里写的只是自己想到的简单的写了下(也希望收获其他想法),后续,再写的话会更新. 大体思路:页面加载完成后,通过监听开始按钮的点击事件.然后会根据产生的随机数,通 ...

随机推荐

  1. 机器学习读书笔记(七)支持向量机之线性SVM

    一.SVM SVM的英文全称是Support Vector Machines,我们叫它支持向量机.支持向量机是我们用于分类的一种算法. 1 示例: 先用一个例子,来了解一下SVM 桌子上放了两种颜色的 ...

  2. HDU 2121:Ice_cream’s world II(不定根的最小树形图)

    题目链接 题意 求有向图的最小生成树,且根不定. 思路 最小树形图即求有向图的最小生成树,用的是朱刘算法. 这里不定根,那么可以建立一个虚根,让虚根和所有点相连,权值为一个很大的数(这里直接设为所有边 ...

  3. HDU 1286:找新朋友(欧拉函数)

    http://acm.hdu.edu.cn/showproblem.php?pid=1286 题意:中文. 思路:求欧拉函数. #include <cstdio> #include < ...

  4. Git使用小技巧之多个远程仓库

    想要获取更多文章可以访问我的博客 - 代码无止境. 这是一个普通的工作日,小代正在勤勤恳恳的写代码.这时陈BOSS走到小代身边,跟小代说:"我们的代码需要同时推送到Github和码云两个仓库 ...

  5. 【POJ - 1426】Find The Multiple(dfs)

    -->Find The Multiple 原文是英语,直接上中文了 Descriptions: 给定一个正整数n,请编写一个程序来寻找n的一个非零的倍数m,这个m应当在十进制表示时每一位上只包含 ...

  6. VUE-CLI3.0脚手架安装

    文档:https://cli.vuejs.org/zh/guide/ 条件: npm 更至最新 node >=8.9 1.全局安装 npm install -g @vue/cli 或 yarn ...

  7. C语言学习书籍推荐《C语言接口与实现:创建可重用软件的技术》下载

    <C语言接口与实现:创建可重用软件的技术>概念清晰.实例详尽,是一本有关设计.实现和有效使用C语言库函数,掌握创建可重用C语言软件模块技术的参考指南.书中提供了大量实例,重在阐述如何用一种 ...

  8. GitHub代码阅读神器,你值有拥有!

    (题图:from  github) Github作为全球最大的程序员聚集地,已经成为学习开发技能的绝佳伴侣(如果你是程序员,但你还没有账户的话,这里建议你去signup,毕竟能增加成长的机会,不能错过 ...

  9. Java web导出word,文件名为中文,%E6%9D%90%E8%B4%A8%E5%8D%95乱码

    因为文件名为中文,导出时会有乱码问题 原代码: String fileName = "文件名.doc"; response.setHeader("Content-Disp ...

  10. 齐治运维堡垒机后台存在命令执行漏洞(CNVD-2019-17294)分析

    基本信息 引用:https://www.cnvd.org.cn/flaw/show/CNVD-2019-17294 补丁信息:该漏洞的修复补丁已于2019年6月25日发布.如果客户尚未修复该补丁,可联 ...