js手写俄罗斯方块
代码如下
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/k.css"/>
</head>
<body>
<div class="k">
<div class="main-box">
<div class="main"> </div>
</div> <div class="opt-box" style="visibility: hidden;visibility: visible;">
<div class="title">
<p>连氏俄罗斯方块</p>
<p style="font-size: 14px;color: mediumorchid;">玩200分算你牛</p>
</div>
<div class="next">
<!-- 一个方块-->
<div class="o" style="display:none;top: 60px;left: 60px;">
<div class="block"></div>
</div>
<!-- L 型拐角-->
<div class="l" style="display:none;top: 60px;left: 45px;">
<div class="inset">
<div class="block i0"></div>
<div class="block i"></div>
<div class="block ii"></div>
<div class="block iii"></div>
</div>
</div>
<!-- 田字块 -->
<div class="oooo" style="display:none;left: 45px;top: 45px;">
<div class="inset">
<div class="block i0"></div>
<div class="block i"></div>
<div class="block ii"></div>
<div class="block iii"></div>
</div>
</div>
<!--长条bar-->
<div class="bar" style="display:none;left: 50px;top: 45px;">
<div class="inset">
<div class="block i0"></div>
<div class="block i"></div>
<div class="block ii"></div>
<div class="block iii"></div>
</div>
</div>
<!--小字-->
<div class="xiao" style="display:none;left: 70px;top: 45px;">
<div class="inset">
<div class="block i0"></div>
<div class="block i"></div>
<div class="block ii"></div>
<div class="block iii"></div>
<div class="block iiii"></div>
<div class="block iiiii"></div>
<div class="block iiiiii"></div>
</div>
</div><!--壮字-->
<div class="zhuang" style="display:none;left: 30px;top: 30px;">
<div class="inset">
<div class="block i0"></div>
<div class="block i"></div>
<div class="block ii"></div>
<div class="block iii"></div>
<div class="block iiii"></div>
<div class="block iiiii"></div>
<div class="block iiiiii"></div>
<div class="block iiiiiii"></div>
<div class="block iiiiiiii"></div>
<div class="block _i"></div>
<div class="block _ii"></div>
<div class="block _iii"></div>
<div class="block _iiii"></div>
<div class="block _iiiii"></div>
<div class="block _iiiiii"></div>
<div class="block _iiiiiii"></div>
</div>
</div>
</div>
<p>下一个</p> <div class="opt">
<p>得分:<span class="score">0</span>分</p>
<div style="width: 100%;height: 40px;clear: both;font-size: 12px;color: red;">玩的过程中可设置下落顺序随机哦</div>
<span>设置:</span>
<select class="sel" name="">
<option value="1">顺序</option>
<option value="0">随机</option>
</select>
<div class="s">
<div class="start">start</div>
<div class="stop">stop</div>
</div>
</div>
<div class="fff">
<p>说明:</p>
<p>
↑变换,↓快速下落<br />←左 →右,
</p>
<p>空格 : 暂停/开始</p>
</div>
</div>
</div>
</body>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/k.js" type="text/javascript" charset="utf-8"></script>
</html>
css:
* {
margin:;
padding:;
font-family: "微软雅黑";
font-size: 16px;
}
.k {
width: 500px;
height: 600px;
margin: 0 auto;
margin-top: 50px;
}
.k .inset {
width: 100%;
height: 100%;
position: relative;
left:;
top:;
}
.k .main-box {
border-left: 1px solid #999;
border-bottom: 1px solid #999;
width: 300px;
height: 600px;
float: left;
}
.k .main {
width: 300px;
height: 600px;
position: relative;
background: #fff url(../img/b.PNG) repeat;
}
.k .opt-box {
float: right;
width: 198px;
height: 601px;
background: #eee;
text-align: center;
}
.k .opt-box .title {
width: 150px;
height: 50px;
margin: 0 auto;
text-align: center;
background: #dfdfdf;
border: 1px solid #aaa;
border-top: none;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.k .opt-box .next {
width: 150px;
height: 150px;
position: relative;
text-align: center;
margin: 0 auto;
margin-top: 30px;
background: #fff;
border: 1px solid #afafaf;
}
.k .opt-box .opt {
width: 150px;
height: 150px;
margin: 0 auto;
margin-top: 100px;
background: #ddd;
border-radius: 4px;
}
.k .opt-box .opt .s {
width: 100%;
height: 28px;
margin-top: 10px;
text-align: center;
}
.k .opt-box .opt select {
border: 1px solid #000;
outline: none;
}
.k .opt-box .opt p {
margin: 5px 0;
}
.k .opt-box .opt .start,
.k .opt-box .opt .stop {
height: 26px;
line-height: 26px;
padding: 0 13px;
color: #222;
cursor: pointer;
border-radius: 5px;
border: 1px solid #666;
display: inline-block;
}
.k .opt-box .opt .start:active,
.k .opt-box .opt .stop:active {
opacity: 0.5;
}
.k .opt-box .opt .start:hover,
.k .opt-box .opt .stop:hover {
background: #000;
color: #fff;
}
.k .opt-box .opt .start.active,
.k .opt-box .opt .stop.active {
background: #000;
color: #fff;
}
.k .block {
width: 30px;
height: 30px;
border-radius: 3px;
background: #000;
box-shadow: inset 0 0 10px -3px #fff;
}
.k .o {
width:;
height:;
position: absolute;
display: inline-block;
}
.k .l {
width:;
height:;
display: inline-block;
position: absolute;
}
.k .l .i0 {
position: absolute;
top: 0px;
left: 0px;
}
.k .l .i {
position: absolute;
top: -30px;
left:;
}
.k .l .ii {
position: absolute;
top: 30px;
left:;
}
.k .l .iii {
position: absolute;
left: 30px;
top: 30px;
}
.k .l.left .i {
position: absolute;
top: 0px;
left: -30px;
}
.k .l.left .ii {
position: absolute;
top: 0px;
left: 30px;
}
.k .l.left .iii {
position: absolute;
left: 30px;
top: -30px;
}
.k .l.bottom .i {
position: absolute;
top: -30px;
left: 0px;
}
.k .l.bottom .ii {
position: absolute;
top: -30px;
left: -30px;
}
.k .l.bottom .iii {
position: absolute;
left: 0px;
top: 30px;
}
.k .l.right .i {
position: absolute;
top: 0px;
left: -30px;
}
.k .l.right .ii {
position: absolute;
top: 30px;
left: -30px;
}
.k .l.right .iii {
position: absolute;
left: 30px;
top: 0px;
}
.k .oooo {
width:;
height:;
position: absolute;
}
.k .oooo .i {
position: absolute;
top: 0px;
left: 30px;
}
.k .oooo .ii {
position: absolute;
top: 30px;
left:;
}
.k .oooo .iii {
position: absolute;
left: 30px;
top: 30px;
}
.k .bar {
width:;
height:;
position: absolute;
}
.k .bar .i {
position: absolute;
top: 30px;
left: 0px;
}
.k .bar .ii {
position: absolute;
top: 60px;
left:;
}
.k .bar .iii {
position: absolute;
left: 0px;
top: -30px;
}
.k .bar.left .i,
.k .bar.right .i {
position: absolute;
top: 0px;
left: 30px;
}
.k .bar.left .ii,
.k .bar.right .ii {
position: absolute;
top: 0px;
left: 60px;
}
.k .bar.left .iii,
.k .bar.right .iii {
position: absolute;
left: -30px;
top: 0px;
}
.k .bar.bottom .i {
position: absolute;
top: 30px;
left: 0px;
}
.k .bar.bottom .ii {
position: absolute;
top: 60px;
left:;
}
.k .bar.bottom .iii {
position: absolute;
left: 0px;
top: -30px;
}
.k .xiao {
width:;
height:;
position: absolute;
}
.k .xiao .i {
position: absolute;
top: -30px;
left: 0px;
}
.k .xiao .ii {
position: absolute;
top: 30px;
left: 0px;
}
.k .xiao .iii {
position: absolute;
left: 0px;
top: 60px;
}
.k .xiao .iiii {
position: absolute;
left: -30px;
top: 60px;
}
.k .xiao .iiiii {
position: absolute;
left: -60px;
top: 0px;
}
.k .xiao .iiiiii {
position: absolute;
left: 60px;
top: 0px;
}
.k .zhuang {
width:;
height:;
position: absolute;
}
.k .zhuang .i {
position: absolute;
top: -30px;
left: 0px;
}
.k .zhuang .ii {
position: absolute;
top: 30px;
left: 0px;
}
.k .zhuang .iii {
position: absolute;
left: 0px;
top: 60px;
}
.k .zhuang .iiii {
position: absolute;
left: 0px;
top: 90px;
}
.k .zhuang .iiiii {
position: absolute;
left: -30px;
top: 0px;
}
.k .zhuang .iiiiii {
position: absolute;
left: -30px;
top: 60px;
}
.k .zhuang .iiiiiii {
position: absolute;
left: 60px;
top: 0px;
}
.k .zhuang .iiiiiiii {
position: absolute;
left: 60px;
top: -30px;
}
.k .zhuang ._i {
position: absolute;
left: 30px;
top: 30px;
}
.k .zhuang ._ii {
position: absolute;
left: 60px;
top: 30px;
}
.k .zhuang ._iii {
position: absolute;
left: 90px;
top: 30px;
}
.k .zhuang ._iiii {
position: absolute;
left: 30px;
top: 90px;
}
.k .zhuang ._iiiii {
position: absolute;
left: 60px;
top: 90px;
}
.k .zhuang ._iiiiii {
position: absolute;
left: 90px;
top: 90px;
}
.k .zhuang ._iiiiiii {
position: absolute;
left: 60px;
top: 60px;
}
.fff {
width: 150px;
height: 90px;
background: #ccc;
margin: 0 auto;
}
.fff p {
font-size: 14px;
}
js:
/*
Lian-Russia Block Game,
date:2017/5/3--2017/5/9
* */
(function(win, doc, $, undefined) {
var K = function(k) {
var $k = $("."+k);
this.author="lianxiaozhuang";
this.method="核心思想:用一个监测函数checkOverLap(时刻监测是否超出盒子或者与内部方块重合),"+
"若当前移动不符合要求(超出的或者重合了)则隐式的撤回当前步";
this.main = $k.find(".main");
this.mainWidth = this.main.width();
this.mainHeight = this.main.height();
this.next = $k.find(".next");
this.score =0;//分数值
this.sel = $k.find(".sel");
this.start = $k.find(".start");
this.stop = $k.find(".stop");
this.timer = null;//定时器
this.index =0;//初始下落块的索引(可修改)
this.width = 30;//方块宽(和css样式保持一致)
this.speed = 400;//下落块定时器速度
this.mark = false;//暂停或者开始标记
this.end = false;//游戏结束标记
this.init();
}
K.prototype = {
constructor: K,
init: function() {
var _this = this;
var flag= false; //二次点击标记
this.start.click(function() {//点击开始
if(!_this.end){//游戏结束标记(标记为true停止任何键盘或鼠标事件)
_this.mark = true;//用于点击start和stop之间切换的标记
$(this).addClass("active").siblings().removeClass("active");
if(!flag){//防止二次点击
flag = true;
if(_this.main.find(".running").length!=0){//中途暂停后在点击开始
_this.goDown();//下落函数
}else{//首次点开始
_this.main.append(_this.blockStr[_this.index]);
//下落块顺序出现
_this.index = (_this.index >= _this.blockClass.length-1) ? 0 : _this.index+1;
//右侧的下一块提示窗
_this.next.find("."+_this.blockClass[_this.index]).show().siblings().hide();
_this.goDown();
}
}
}
});
this.stop.click(function(){ //暂停
if(!_this.end){//游戏结束标记(标记为true停止任何键盘或鼠标事件)
flag = false;
_this.mark = false;//用于点击start和stop之间切换的标记
clearInterval(_this.timer);
//点击start和stop按钮后的颜色变化
$(this).addClass("active").siblings().removeClass("active");
}
});
doc.onkeydown = function(evt) {//键盘
if(!_this.end){//游戏结束标记(标记为true停止任何键盘或鼠标事件)
_this.keyBoardEvent(win.event || evt);
}
}
},
blockClass: ["o", "l", "oooo","bar","zhuang","o", "l", "oooo","o", "l", "oooo","o", "l","oooo",],//块对应class名
blockStr: [//每一个块的html代码、和上面的class名一一对应
'<div class="running o top" style="left:150px;">'+
'<div class="block"></div>'+
'</div>', '<div class="running l top" style="left:120px;top:-30px;">' +
'<div class="inset">'+
'<div class="block i0"></div>'+
'<div class="block i"></div>' +
'<div class="block ii"></div>' +
'<div class="block iii"></div>' +
'</div>'+
'</div>', '<div class="running oooo top" style="left:120px;top:-30px;">' +
'<div class="inset">'+
'<div class="block i0"></div>'+
'<div class="block i"></div>' +
'<div class="block ii"></div>' +
'<div class="block iii"></div>' +
'</div>'+
'</div>',
'<div class="running bar top" style="left:120px;top: -60px;">'+
'<div class="inset">'+
'<div class="block i0"></div>'+
'<div class="block i"></div>'+
'<div class="block ii"></div>'+
'<div class="block iii"></div>'+
'</div>'+
'</div>', '<div class="running zhuang top" style="left: 120px;top: -120px;">'+
'<div class="inset">'+
'<div class="block i0"></div>'+
'<div class="block i"></div>'+
'<div class="block ii"></div>'+
'<div class="block iii"></div>'+
'<div class="block iiii"></div>'+
'<div class="block iiiii"></div>'+
'<div class="block iiiiii"></div>'+
'<div class="block iiiiiii"></div>'+
'<div class="block iiiiiiii"></div>'+
'<div class="block _i"></div>'+
'<div class="block _ii"></div>'+
'<div class="block _iii"></div>'+
'<div class="block _iiii"></div>'+
'<div class="block _iiiii"></div>'+
'<div class="block _iiiiii"></div>'+
'<div class="block _iiiiiii"></div>'+
'</div>',
'<div class="running o top" style="left:150px;">'+
'<div class="block"></div>'+
'</div>', '<div class="running l top" style="left:120px;top:-30px;">' +
'<div class="inset">'+
'<div class="block i0"></div>'+
'<div class="block i"></div>' +
'<div class="block ii"></div>' +
'<div class="block iii"></div>' +
'</div>'+
'</div>', '<div class="running oooo top" style="left:120px;top:-30px;">' +
'<div class="inset">'+
'<div class="block i0"></div>'+
'<div class="block i"></div>' +
'<div class="block ii"></div>' +
'<div class="block iii"></div>' +
'</div>'+
'</div>',
'<div class="running o top" style="left:150px;">'+
'<div class="block"></div>'+
'</div>', '<div class="running l top" style="left:120px;top:-30px;">' +
'<div class="inset">'+
'<div class="block i0"></div>'+
'<div class="block i"></div>' +
'<div class="block ii"></div>' +
'<div class="block iii"></div>' +
'</div>'+
'</div>', '<div class="running oooo top" style="left:120px;top:-30px;">' +
'<div class="inset">'+
'<div class="block i0"></div>'+
'<div class="block i"></div>' +
'<div class="block ii"></div>' +
'<div class="block iii"></div>' +
'</div>'+
'</div>', '<div class="running o top" style="left:150px;">'+
'<div class="block"></div>'+
'</div>', '<div class="running l top" style="left:120px;top:-30px;">' +
'<div class="inset">'+
'<div class="block i0"></div>'+
'<div class="block i"></div>' +
'<div class="block ii"></div>' +
'<div class="block iii"></div>' +
'</div>'+
'</div>', '<div class="running oooo top" style="left:120px;top:-30px;">' +
'<div class="inset">'+
'<div class="block i0"></div>'+
'<div class="block i"></div>' +
'<div class="block ii"></div>' +
'<div class="block iii"></div>' +
'</div>'+
'</div>'
],
rotateBlock: function(dom) { //换class实现旋转(旋转的时候也是(先设置不可见)如果旋转后不满足要求就退回上一步操作;直到满足要求了块才会显示)
var _this = this;
var tempClassN = ["top","left", "bottom", "right"];//下落块的四个旋转方向对应的class数组
var t = dom.attr("class").split(" ");//取出当前运动的running的class值放到一个数组
var i = $.inArray(t[t.length - 1], tempClassN); //上面的那个末尾的class名在tempClassN中的位置
var _i = (i+1==tempClassN.length)?0:i+1;//取tempClassN中的下一值(可循环)
dom.removeClass(tempClassN[i]).addClass(tempClassN[_i]).css({"visibility":"hidden"});//先设置不可见。之后判断此步是否符合要求
if(_this.checkOverLap()){//不符合要求
dom.removeClass(tempClassN[_i]).addClass(tempClassN[i]).css({"visibility":"visible"});//退回上一次旋转(效果页面看不到的)
}else{
dom.css({"visibility":"visible"});//符合要求、显示
}
},
moveBlock: function(dom, n){//左右移动
var _this = this,a = 1;
a = n?-1:1; //系数a为正或负实现左移右移
var _left = parseInt(dom.css("left"));
dom.css({"left":_left +a*_this.width,"visibility":"hidden"});
//console.log(_this.checkOverLap());
if(_this.checkOverLap()){//超出或者重合
var _left = parseInt(dom.css("left"));
dom.css({"left":_left - a*_this.width,"visibility":"visible"});
}else{
dom.css({"visibility":"visible"});
}
},
goDown:function(){//下落
var _this = this;
_this.timer = setInterval(function() {
_this.interVal()
},_this.speed);
},
fastGoDown:function(){//快速下落
var _this = this;
clearInterval(_this.timer);
_this.timer = setInterval(function() { //实际上就是 goDown函数的一个快速的执行
_this.interVal()
},5);
},
interVal:function(){//定时器内部下落实现的函数.供goDown和fastGoDown里的setInterval调用
var _this = this;
var r = _this.main.find(".running");
var _top = r.offset().top;
if(_top!=null){//经测试,防止按快速下落,ie8报错
r.offset({"top":_top + _this.width}).css({"visibility":"hidden"});
}
if(_this.checkOverLap()){//如果移动的这一步超出了范围或者重合了(不满足要求了).就让它退回来这一步(这都是隐藏操作的所以也没看不到)
var _top = parseInt(r.css("top"));
r.css({"top": _top - _this.width}).css({"visibility":"visible"});
clearInterval(_this.timer);
_this.checkGameOver(r);//检查游戏结束
r.removeClass("running");
r.find(".block").addClass("fallen");
_this.checkOverFlow();//检查是否一行排满
//重新开始下一轮降落
if(!_this.end){//为true时停止下落函数的回调
_this.main.append(_this.blockStr[_this.index]);
var _val = _this.sel.val();
console.log(_val)
if(_val=="1"){//顺序出现下落块
_this.index = (_this.index >= _this.blockClass.length-1) ? 0 : _this.index+1;
}else if(_val=="0"){//随机
_this.index = parseInt(Math.random()*_this.blockClass.length);
}
//console.log(_this.index);
_this.next.find("."+_this.blockClass[_this.index]).show().siblings().hide();
_this.goDown(); //设置完毕后回调
} }else{//满足要求。显示当方块
r.css({"visibility":"visible"});
}
},
checkOverLap:function(){//移动过程中检测是否超出或者重合
var m = Math,_this = this,overlap = false;
var $main_left = this.main.offset().left,$main_top = this.main.offset().top;
var e_left_min=Infinity,e_left_max=-Infinity,e_top_min=Infinity,e_top_max=-Infinity;
$(".running").find(".block").each(function(index,element){//取下落块的位置最值
var e_left = $(element).offset().left,e_top = $(element).offset().top;
e_left_min = m.min(e_left_min,e_left);
e_top_min = m.min(e_top_min,e_top);
e_left_max = m.max(e_left_max,e_left);
e_top_max = m.max(e_top_max,e_top);
$(".fallen").each(function(index,element){
var $f_top = $(element).offset().top,
$f_left = $(element).offset().left;
//console.log($left+" "+$f_left);
if(e_top==$f_top&&e_left==$f_left){
overlap = true;
}
});
});
//不超出左边、右边和底部;且不与已经下落的方块重合
//console.log($main_top+_this.mainHeight-e_top_max)
if((e_left_min-$main_left>=0)&&($main_left+_this.mainWidth-_this.width-e_left_max >=0)
&&($main_top+_this.mainHeight-e_top_max>0)&&(!overlap)){
return false;//符合要求的移动
}else{
return true;//不合符要求
}
},
checkOverFlow:function(){//若有一行排满;删除并得分
var _this = this;
var ary = [], res = [];
$(".fallen").each(function(index,element){
var $top = $(element).offset().top;
ary.push($top);
});
ary.sort();
//下面的两个for循环摘自网上;用于打印出一个js数组中个个元素出现的个数
for(var i = 0;i<ary.length;){
var count = 0;
for(var j=i;j<ary.length;j++) {
if(ary[i] == ary[j]){
count++;
}
}
res.push([ary[i],count]);
i+=count;
}
//res 二维数维中保存了 值和值的重复数
for(var i = 0 ;i<res.length;i++){
// console.log("值:"+res[i][0]+" 重复次数:"+res[i][1]);
if(res[i][1]==_this.mainWidth/_this.width){//如果有一行满了
//console.log(res[i][0])
$(".fallen").each(function(index,element){
var $top = $(element).offset().top;
if($top==res[i][0]){
$(element).remove();
_this.score++;//加分
$(".score").html(_this.score);
if(_this.score>=100){//大于100分加速
_this.speed=200;
}
if(_this.score>=200){
alert("恭喜通关!!!!");
}
}
});
$(".fallen").each(function(index,element){//本次删除行上面的块下移动一格
var _top = $(element).offset().top;
if(_top<res[i][0]){
$(element).offset({"top":_top + _this.width});
}
});
}
}
},
checkGameOver:function(dom){//检查游戏结束
var _this = this;
var $main_top = this.main.offset().top;
//console.log($main_top);
dom.each(function(index,element){//下落块下落完毕后检查有超出最上面的情况则Game Over
if($(element).offset().top<$main_top){
_this.end = true;
if(_this.score<=50){//提示语设置
var l ="垃圾!!"
}else if(_this.score>50&&_this.score<=100){
l = " 还行!"
}else if(_this.score>100&&_this.score<=150){
l =" 很棒!";
}else if(_this.score>150&&_this.score<200){
l =" 牛人!!!!";
}else if(_this.score>=200){
l =" 超越神啦!!!!";
}
alert("Game Over!"+" "+"得分:"+_this.score+" "+l);
return;
}
});
},
keyBoardEvent: function(e) {
var _this = this,
_key = e.keyCode || e.which;
var $running = $(".main .running");
switch(_key) {
case 37: //左键
if(_this.mark){//暂停后不可操作
_this.moveBlock($running, 1);
}
break;
case 38: //向上键
if(_this.mark){
_this.rotateBlock($running);
}
break;
case 39: //右键
if(_this.mark){
_this.moveBlock($running, 0);
}
break;
case 40: //向下键
if(_this.mark){
_this.fastGoDown($running);
}
break;
case 13: //回车键 break;
case 32: //空格
return _this.mark?_this.stop.click():_this.start.click();
break;
default:
break;
}
}
} new K("k"); }(window, document, jQuery))
js手写俄罗斯方块的更多相关文章
- 原生html、js手写 radio与checkbox 美化
原生html.js手写 radio与checkbox 美化 html <!DOCTYPE html> <html> <head> <meta charse ...
- 常见的JS手写函数汇总(代码注释、持续更新)
最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name ...
- 五四青年节,今天要学习。汇总5道难度不高但可能遇到的JS手写编程题
壹 ❀ 引 时间一晃,今天已是五一假期最后一天了,没有出门,没有太多惊喜与意外.今天五四青年节,脑子里突然想起鲁迅先生以及悲欢并不相通的话,我的五一经历了什么呢,忍不住想说那大概是,父母教育孩子大声嚷 ...
- 轮播图--JS手写
轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> < ...
- 浅谈时钟的生成(js手写代码)
在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况 ...
- 不借助jquery封装好的ajax,你能用js手写ajax框架吗
不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...
- js手写图片查看器(图片的缩放、旋转、拖拽)
在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...
- 浅谈时钟的生成(js手写代码)(非原创)
在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况 ...
- js手写笔记
1.document.write(); 2.document.getElementById("").style.color="red";//sytle.font ...
随机推荐
- Vue表单绑定(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- (转)JVM调优常用命令(jstat、jmap、jstack)
原文:https://www.cnblogs.com/ityouknow/p/5714703.html 一.jstat jstat(JVM statistics Monitoring)是用于监视虚拟机 ...
- Android SurfaceView概述
简介:SurfaceView继承自View,但它与View不同,View是在UI主线程中更新画面,而SurfaceView是在一个新线程中更新画面,View的特性决定了其不适合做动画,因为如果更新画面 ...
- day63
一.环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\nodejs) 可以通过node提 ...
- sphinx搜索 笔记
架构图: 安装sphinx,见文章http://my.oschina.net/ptk/blog/495435 sphinx关键的配置文件.在里面写查询的sql. 两个关键命令:indexer生成查询索 ...
- LCD驱动应该怎么写?–基于stm32F407 [复制链接]
够用的硬件能用的代码使用的教程 (拷贝过来的代码有点乱,请下载附件查看文档) 资料下载地址:https://pan.baidu.com/s/1bHUVe6X6tymktUHk_z91cA 网络上配套S ...
- Django Rest Framework源码剖析(八)-----视图与路由
一.简介 django rest framework 给我们带来了很多组件,除了认证.权限.序列化...其中一个重要组件就是视图,一般视图是和路由配合使用,这种方式给我们提供了更灵活的使用方法,对于使 ...
- 20155321 《网络攻防》 Exp2 后门原理与实践
20155321 <网络攻防> Exp2 后门原理与实践 实验内容 例举你能想到的一个后门进入到你系统中的可能方式? 我觉得人们在平时上网的时候可能会无意识地点击到一些恶意的网站,这些网站 ...
- EZ 2017 12 30 2018noip第二次膜你赛
去年的比赛了,然而今天才改好. 总体难度适中,有大佬AK. 主要是自己SB第二题没想出来,然后又是可怜的100来分. T1 一道二分+数学的题目. 我们可以二分叫的次数,然后用公式(等差数列,公差都是 ...
- mfc 嵌套类
嵌套类 一. 嵌套类 嵌套类的定义 将某个类的定义放在另一个类的内部,这样的类定义,叫嵌套类. class AAA { int aaa; class BBB { int bbb; //其它成员或者函数 ...