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 ...
随机推荐
- JAVA框架 json数据交互
一.导入依赖: <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId& ...
- python在输出一段话中插入多个变量，每日作业补充
%s用来插入用户输入的值name=input('请输入您的姓名:')age=input('请输入您的年龄:')sex=input('你的性别:')print('-------您好!%s------\n ...
- 服务器端数据合法性验证：签名sign和口令token原理
有时候,你也许会想: 我写的接口,那别人要是知道url,并且知道其需要的数据结构和逻辑,那不是都可以访问了? 甚至是,客户点传递过来的数据,是不是被恶意修改了? 这时,我们可能需要“验证”一下.比如: ...
- Iframe和Frame中实现cookie跨域的方法（转载）
在Iframe和Frame中默认是不支持Cookie跨域的,但通过设置P3P协议相关的响应头可以解决这一问题.关于p3p协议: P3P: Platform for Privacy Preference ...
- docker 端口映射错误解决方法
今天搞了半天shipyard,在网页上打开时无法显示容器和镜像,最后发现是docker端口映射错误,由于防火墙未关闭: 4月 12 18:51:29 localhost firewalld[757]: ...
- [Lydsy1805月赛]对称数 BZOJ5361
分析: 这个题,还是蛮有趣的.考虑,如果l,r区间内的所有数出现奇数次,那么[l-1,r]的抑或和等于所得抑或和. 之后怎么维护呢,主席树维护区间抑或和,记得将每个点附上一个ull级别的随机数,之后抑 ...
- DDD China Conference 2017
DDD China Conference 2017 时间:2017.12.9地点:国际会议中心
- [C/C++标准库]_[初级]_[转换UTC时间到local本地时间]
场景 1.如果有面向全球用户的网站, 一般在存储时间数据时存储的是UTC格式的时间, 这样时间是统一的, 并可以根据当地时区来进行准确的转换. 2.存储本地时间的问题就在于如果换了时区, 那么显示的时 ...
- DotNetCore部署（IIS）踩坑记
一．windows系统中Dotnet core runtime 安装后,无法启动次程序,因为计算机中丢失api-ms-win-crt-runtime-l1-1-0.dll的解决方法 错误现象如图 因为 ...
- Spring Boot(十二)：Spring Boot 如何测试打包部署
有很多网友会时不时的问我, Spring Boot 项目如何测试,如何部署,在生产中有什么好的部署方案吗?这篇文章就来介绍一下 Spring Boot 如何开发.调试.打包到最后的投产上线. 开发阶段 ...