- JS 点击编辑按钮，显示input边框，可编辑，点击保存按钮，输入框消失，不可编辑
-
就类似编辑资料的，都是输入框，点击编辑可以编辑输入框内的内容，点击保存输入框消失
自己做个样式不显示控件input的边框就好了，默认readonly不允许编辑。点击编辑的时候加上边框样式，去掉readonly属性
<style>.readonly input{border:none}</style>
<div id="dvInput" class="readonly">
text1：<input type="text" readonly value="text1" /><br />
text2：<input type="text" readonly value="text2" /><br />
</div>
<input type="button" value="编辑" onclick="btnClick(this)" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
function btnClick(btn) {
var toEdit = btn.value == '编辑';
$('#dvInput')[toEdit ? 'removeClass' : 'addClass']('readonly').find(':input').attr('readonly', toEdit ? false : true);
btn.value = toEdit ? '保存' : '编辑';
if (!toEdit) {//保存的ajax代码
//..
}
}
</script>
之前弄过 因为 input 本身可能存在编辑状态和输入状态切换样式问题 不好调整 可以 完全用一个label 和一个input切换来实现这个效果 也不麻烦
input有readonly和disable属性表示子读，不可编辑，可以通过控制这两个属性来控制，如果要传这个子读的值到后台用disable，不需要就随便。
input有readonly和disable属性表示子读，不可编辑，可以通过控制这两个属性来控制，如果要传这个子读的值到后台用disable，不需要就随便。
- 其他相关推荐
- style.top 在变为什么 对应元素位置可以不变？
- ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <title>Document</title> <!-- <script src="./demo/jquery.min.js"></script> --> </head> <style lang=""> *{ margin: 0; padding: 0; } body{ /*height: 1000px;*/ /*position: relative;*/ /*margin:0px; padding:0px;*/ } .point { position: absolute; border: 5px solid red; } .ball{ width:4px; height:4px; /*background: #d9fe37;*/ background: red; border-radius: 50%; position: absolute; } #sketchPad{ /*width: 400px; height: 400px;*/ /*left: 100px; top: 100px;*/ /*background-color: #ff0; overflow: auto;*/ /*position: relative;*/ } .small{ position: relative; height: 300px; overflow: auto; } .small img{ height: 300px; } #selectImage{ left: 200px; top: 500px; position: absolute; } .box{ width: 300px; height: 300px; margin: 100px; border: 1px solid #ccc; position: relative; /*overflow: auto;*/ } .big{ width: 600px; height: 600px; position: absolute; top: 0; left: 560px; border: 1px solid #ccc; overflow: auto; /*display: none;*/ display: block; background-color: #eee; } .big::-webkit-scrollbar{ display: none; } .mask{ width: 50px; height: 50px; background: rgba(255,255,0,0.4); position: absolute; top: 0; left: 0; /*鼠标的样式*/ cursor: crosshair; display: none; } .big img{ position: absolute; height: 3600px; /*box.height*big.width/mask.width */ top: 0; left: 0; } .aim{ position: absolute; top: 50%; left: 50%; width: 20px; margin-left: -10px; height: 20px; margin-top: -10px; display: block; /*z-index: 8*/ } .aim__ver{ position: absolute; top: 50%; left: 50%; width: 2px; height: 40px; margin-top: -20px; margin-left: -1px; background-color: #f00; } .aim__hor{ position: absolute; top: 50%; left: 50%; width: 40px; height: 2px; margin-top: -1px; margin-left: -20px; background-color: #f00; } </style> <body> <div class="box" id="fdj"> <div id="sketchPad" class="small"> <img id='imageID' name='imageID' src=" " alt=""> <div class="mask"></div> </div> <div class="big"> <img id='imageIDBig' name='imageID' src=" "/> <div class="aim"> <div class="aim__ver"></div> <div class="aim__hor"></div> </div> </div> </div> <div id="selectImage"> <form name="form" id="form" method="post" enctype="multipart/form-data" style="display: block;padding:2px;overflow: hidden;" > <input type="file" name="upload" id="upload" style="display: none;" onchange="document.form.path.value=this.value;selectImage(this)" multiple="multiple" accept=".PNG,.JPG,.GIF,.BMP" /> <input name="path" id="path" readonly style="display: block;float:left;margin-left:120px;height:24px"> <input type="button" value="请点击上传需要进行测量的图片" onclick="document.form.upload.click();" style="display: block;float:left;margin-left:10px;height:30px"> </form> </div> <button id="myBtn">创建连线</button> </body> <script> document.getElementById("myBtn").onclick = function(event) { document.getElementById("sketchPad").style.cursor="crosshair"; document.getElementById("sketchPad").addEventListener("click", createLine, false); event.stopPropagation(); // 阻止冒泡 }; // 1. 获取外面的父级盒子 var fdj = document.getElementById("fdj"); // 2.获取小的图片 var small = fdj.children[0]; var smallImage = small.children[0]; // 3.获取容纳大图片的盒子 var big = fdj.children[1]; // 4.获取遮罩 var mask = small.children[1]; // 5.获取大的那张图片 var bigImage = big.children[0]; // 6.鼠标经过小的图片的时候显示 small.onmouseover = function(){ mask.style.display = "block"; big.style.display = "block"; } // 7. 鼠标离开时隐藏 small.onmouseout = function(){ mask.style.display = "none"; big.style.display = "none"; } console.log("fdj_marginLeft",document.defaultView.getComputedStyle(fdj, null).marginLeft); var fdj_marginLeft=document.defaultView.getComputedStyle(fdj, null).marginLeft.slice(0,-2); var fdj_marginTop =document.defaultView.getComputedStyle(fdj, null).marginTop.slice(0,-2); function createLine() { var sketchPad=document.getElementById("sketchPad"); var sketchPad_top=document.defaultView.getComputedStyle(sketchPad, null).top.slice(0,-2); var sketchPad_left=document.defaultView.getComputedStyle(sketchPad, null).left.slice(0,-2); // console.log("sketchPad_scrollLeft",sketchPad.scrollLeft); let radius=2;//半径 let pointHtmlStr = `<div style="position:absolute;border-radius: 50%;background: red;width:${radius*2}px;height:${radius*2}px;top:${event.pageY-radius-sketchPad_top+sketchPad.scrollTop-fdj_marginTop}px;left:${event.pageX-radius-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft}px;"></div>`; sketchPad.innerHTML = sketchPad.innerHTML + pointHtmlStr; let firstPoint = {}; firstPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft; firstPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop; // console.log("firstPoint1:"+firstPoint.xPoint); function createPoints(event) { var sketchPad=document.getElementById("sketchPad"); let secondPoint = {}; secondPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft; secondPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop; let lineLength = calcLine(firstPoint, secondPoint); let angle = getAngle( firstPoint.xPoint, firstPoint.yPoint, secondPoint.xPoint, secondPoint.yPoint ); // 设置一个div 宽度为 两点之间的距离，并且以 transform-origin: 0 50% 为圆心旋转，角度已经算出来 let lineHtmlStr = `<div style="position:absolute;border-top:1px solid red;width:${lineLength}px;top:${firstPoint.yPoint}px;left:${firstPoint.xPoint}px;transform:rotate(${angle}deg);transform-origin: 0 0;"></div>`; // let bodyDiv = document.getElementsByTagName("body")[0]; // // 添加到body 后面 // bodyDiv.innerHTML = bodyDiv.innerHTML + lineHtmlStr; sketchPad.innerHTML = sketchPad.innerHTML + lineHtmlStr; // 取消本段的起始点的监听 document.getElementById("sketchPad").removeEventListener("click", createPoints); } // 计算连线长度 function calcLine(firstPoint, secondPoint) { // 计算出两个点之间的距离 let line = Math.sqrt( Math.pow(firstPoint.xPoint - secondPoint.xPoint, 2) + Math.pow(firstPoint.yPoint - secondPoint.yPoint, 2) ); // console.log("calcLinefirstPoint2.xPoint:"+firstPoint.xPoint); // console.log("calcLinesecondPoint2.xPoint:"+secondPoint.xPoint); // console.log("calcLinefirstPoint2.yPoint:"+firstPoint.yPoint); // console.log("calcLinesecondPoint2.yPoint:"+secondPoint.yPoint); console.log("line:",line); return line; } // 计算角度 // 获得人物中心和鼠标坐标连线，与x轴正半轴之间的夹角 function getAngle(x1, y1, x2, y2) { // 获得人物中心和鼠标坐标连线，与x轴正半轴之间的夹角 var x = x1 - x2; var y = y1 - y2; var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); var cos = y / z; var radina = Math.acos(cos); // 用反三角函数求弧度 var angle = 180 / (Math.PI / radina); // 将弧度转换成角度 if (x2 > x1 && y2 === y1) { // 在x轴正方向上 angle = 0; } if (x2 > x1 && y2 < y1) { // 在第一象限; angle = angle - 90; } if (x2 === x1 && y1 > y2) { // 在y轴正方向上 angle = -90; } if (x2 < x1 && y2 < y1) { // 在第二象限 angle = 270 - angle; } if (x2 < x1 && y2 === y1) { // 在x轴负方向 angle = 180; } if (x2 < x1 && y2 > y1) { // 在第三象限 angle = 270 - angle; } if (x2 === x1 && y2 > y1) { // 在y轴负方向上 angle = 90; } if (x2 > x1 && y2 > y1) { // 在四象限 angle = angle - 90; } return angle; } // 解决第一次绑定的时候执行方法 // setTimeout(function() { // document.removeEventListener("click", createPoints); // 添加节点 document.getElementById("sketchPad").addEventListener("click", createPoints, false); // 在冒泡过程中处理函数 // }, 0); } //加载任意图片 function selectImage(file) { if (!file.files || !file.files[0]) { return; } var reader = new FileReader(); reader.onload = function (evt) { document.getElementById('imageID').src = evt.target.result; document.getElementById('imageIDBig').src = evt.target.result; image = evt.target.result; } reader.readAsDataURL(file.files[0]); } // 8 鼠标移动 // var x = 0; // var y = 0; small.onmousemove = function(event){ // console.log("mask_display = ", mask.style.display); // console.log("mask_display = ", document.defaultView.getComputedStyle(mask, null).width); var event = event || window.event; // 9.获取在盒子内部的坐标 本身定位了，这里换用父亲边框到body边框的距离 显示在遮罩的中间 var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2+ small.scrollLeft ; var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2+small.scrollTop; console.log("x = ",x); console.log("y = ",y); // console.log("mask_width=",mask.style) // 10.增加限制条件 if(x < 0){ // x = 0; }else if(x > small.offsetWidth - mask.offsetWidth){ // x = small.offsetWidth - mask.offsetWidth; } if(y < 0){ // y = 0; }else if(y > small.offsetHeight - mask.offsetHeight){ // y = small.offsetHeight-mask.offsetHeight; } mask.style.left = x+ "px"; mask.style.top = y + "px"; console.log("mask.style.left = ",mask.style.left); console.log("mask.style.top = ",mask.style.top); console.log(document.getElementsByClassName("mask")[0]); // 11.利用倍数关系显示大图片 开始没有看懂为什么大图片要定位，后来想想只有定位的盒子才有top/left值 var mask_height=window.getComputedStyle(mask).getPropertyValue('height'); var mask_width=window.getComputedStyle(mask).getPropertyValue('width'); var big_height=window.getComputedStyle(big).getPropertyValue('height'); var big_width=window.getComputedStyle(big).getPropertyValue('width'); bigImage.style.left = -x*big_width.slice(0,-2)/mask_width.slice(0,-2) +"px"; bigImage.style.top = -y*big_height.slice(0,-2)/mask_height.slice(0,-2) + "px"; } // console.log("x=",x); // console.log("y=",y); </script> </html> ``` 这是一个自己的小练习，目的就是标记测量图片中相关标的尺寸。鼠标移动时还带有一个放大镜效果。 出现的问题是：点击左下角【创建连线】按钮并点击图中某位置，选中第一个标记点后，通过354-355行中代码设置，在控制台明明看到x和y都在随着鼠标移动不断更新，但是偏偏无法对黄色mask框的left和top正确赋值。想得脑瓜疼，希望指教下 element.style.top和element.style.left控制css属性失效的原因 ``` 
- php+mvc模式的登陆口验证码可以点击刷新，不会自动刷新，求大神解决
- 1：描述问题：网站首页登陆口不管如何刷新[F5]，验证码都不会变。但是点击验证码的话可以变为新的验证码！而且我们使用验证码登陆成功后同时退出来，此时登陆口的验证码还是之前使用过的验证码，没有更新！请大神帮我解决下，贴出正确的代码！因为本人不是很懂，只会照葫芦画瓢！万分感谢！无解决方案的请别回复了谢谢！ 文件名：PassportController 代码如下，这个应该是控制器 /* 生成验证码 */ public function verify() { $config = [ 'fontSize' => 19, // 验证码字体大小 'length' => 4, // 验证码位数 'imageH' => 34 ]; $Verify = new Verify($config); $Verify->entry(); } /* 验证码校验 */ public function check_verify($code, $id = '') { $verify = new \Think\Verify(); $res = $verify->check($code, $id); $this->ajaxReturn($res, 'json'); } public function accessRules() { return array( array('allow', // 允许所有用户访问 'login' 动作. 'users'=>array('*'), ), array('allow', // 允许认证用户访问所有动作 'users'=>array('@'), ), array('deny', // 拒绝所有的用户。 'users'=>array('*'), ), ); } /* 异地登录检测 */ public function actionPlaceOtherLogin() { if(isset($_POST['username']) && $_POST['username']!="" && isset($_POST['pwd']) && $_POST['pwd']) { $siteLogin=new SiteLoginForm; $siteLogin->username=$_POST['username']; $siteLogin->password=$_POST['pwd']; $siteLogin->verifyCode=$_POST['verifyCode']; $siteLogin->rememberMe=false; if($siteLogin->validate())//用户名密码正确 { $userinfo=User::model()->findByAttributes(array( 'Username'=>$_POST['username'], 'PassWord'=>md5($_POST['pwd']) )); if($userinfo->Status==0)//用户帐号没有被冻结，处于正常状态 { if($userinfo->PlaceOtherLogin==0)//用户没有开启异地登录，则允许用户直接提交登录 { echo "true"; }else//开启异地登录 { //1.检查此次登录的ip与最近一次登录的ip是否相同 $lastLoginLog=Loginlog::model()->find(array( 'condition'=>'userid='.$userinfo->id, 'order'=>'id desc' )); if($lastLoginLog->loginip===XUtils::getClientIP())//如果本次登录ip与最近一次登录ip相同则允许用户直接提交 { echo "true"; }else//如果不同则返回通知使用短信验证 { echo $userinfo->Phon;//需要手机接手短信验证码,返回手机号码，以便发送短信进行验证 } } }else//帐号被冻结 { echo "LOCK"; } }else { echo "FAIL"; } } } // 登陆口的文件名：index 代码如下 // <link rel="stylesheet" type="text/css" href="<?php echo VERSION2;?>2_files/index.css"> <div class="banNer"><!--首页幻灯--> <ul class="rslides" id="slider"> <li style="background: url(<?php echo VERSION2;?>img/banner/banner_tg.jpg) no-repeat center top;"> <li style="background: url(<?php echo VERSION2;?>img/banner/003.jpg) no-repeat center top;"> </li> </ul> <!--登录区域--> <div class="login_frame_bg" <?php if(Yii::app()->user->getId())echo 'style="display:none;"';?>> <div class="login_frame"> <span class="warningSpan"<?php if(isset($_GET['loginStatus']) && $_GET['loginStatus']=='fail') echo 'style="display:block;"';?>>用户名或密码错误</span> <div id="myForm"> <table> <form method="post" onsubmit="return checkLogin()" action="<?php echo $this->createUrl('passport/login');?>"> <tbody> <tr> <td> <div class="login_mailbox"> <input type="hidden" name="User[position]" value="index" /> <input id="lusername" type="text" name="User[Username]" autocomplete="off" placeholder="用户名"> </div> </td> </tr> <tr> <td> <p class="zq" id="miaoname" style="margin:-15px 0px 10px;"></p> </td> </tr> <tr> <td> <div class="login_ps"> <input id="lpassword" type="password" name="User[PassWord]" name="LoginForm[password]" placeholder="请输入密码"> </div> </td> </tr> <tr> <td> <table> <tr> <td> <input type="text" name="User[VerifyCode]" class="" placeholder="请输入右边验证码" style=" width: 170px; margin-right: 5px; border-radius: 5px; line-height: 35px; border: 1px solid #fff; padding-left: 5px;" id="verifyCode" /> </td> <td> <?php $this->widget( 'CCaptcha', array('showRefreshButton'=>false, 'clickableImage'=>true, 'imageOptions'=>array( 'alt'=>'点击换图', 'title'=>'点击换图', 'style'=>'cursor:pointer; background:#fff; height:27px; border-radius:5px;' ) ) ); ?> </td> </tr> </table> </td> </tr> <tr> <td> <p class="zq" style="height: 10px;"></p> </td> </tr> <tr> <td> <p id="miaopwd" class="zq" style="margin:-15px 0px 10px;"></p> </td> </tr> <tr> <td> <li style=" color:#fff; font-size:12px;"><input name="User[rememberMe]" type="checkbox" style="position: relative; top: 3px; width:12px;" /> 下次自动登录<a href="javascript:;" class="forgetPwd" style=" float:right; margin-right:28px; color:white;">忘记密码?</a></li><br /> </td> </tr> <tr> <td> <button class="login-btn" id="login_btn">登录</button> </td> </tr> <tr> <td> <span><a href="<?php echo $this->createUrl('passport/regist');?>" id="a">还没有账号？点击注册>></a></span> </td> </tr> </tbody> <form> </table> </div> </div> </div> <div class="indIntr" style="background="achose.png" ><!--系统优势--> <div class="why_main4 clearfix"> </div> </div> <script> //登录表单检测 function checkLogin() { if($("#lusername").val()=="") { layer.tips('用户名不能为空', '#lusername'); return false; }else if($("#lpassword").val()=="") { layer.tips('密码不能为空', '#lpassword'); return false; }else if($("#verifyCode").val()=="") { layer.tips('验证码不能为空', '#verifyCode'); return false; }else { var submitStatus=0;//提交状态初始化verifyCode var phone=0;//手机号码初始化 //检查是否开启异地登录 $.ajax({ type:"POST", url:"<?php echo $this->createUrl('passport/placeOtherLogin');?>", data:{ "username":$("#lusername").val(), "pwd":$("#lpassword").val(), "verifyCode":$("#verifyCode").val(), }, async:false, success:function(msg) { if(msg=="true")//不用检测 { submitStatus=1; }else if(msg=="FAIL")//用户名或密码不正确 { } else if(msg=="LOCK")//用户帐户被冻结 { submitStatus=3; }else//需要发送手机验证码 { phone=msg;//赋值用户手机号 submitStatus=2; } } }); /*alert(submitStatus); exit;*/ //检查是否开启异地登录 if(submitStatus==0)//用户名密码不正确 { layer.tips('用户名，密码或验证码不正确', '#lusername', { tips: [1, '#0FA6D8'] //还可配置颜色 }); return false; }else if(submitStatus==3) { //询问框 layer.confirm('<span style="color:red;">您的帐户已被冻结，如有需要请联系客服人员</span>', { btn: ['知道了'] //按钮 }); return false; }else if(submitStatus==1)//直接提交 { return true; }else//2表示需要发送短信验证码 { //发送验证码 $.ajax({ type:"POST", url:"<?php echo $this->createUrl('site/sms');?>", data:{"phone":phone,"phoneCode":"DONE"}, async:false, success:function(msgCode) { if(msgCode=="SUCCESS") { //询问框 layer.confirm('<span style="color:red;">短信发送成功(异地登录请输入手机验证码)</span><br/>验证码<input class="text1 phoneCodeVal" name="phoneCodeVal" />', { btn: ['确定提交'] //按钮 },function(){ if($(".phoneCodeVal").val()=="")//验证码不为空 { layer.tips('验证码不能为空', '.phoneCodeVal'); }else{ //发送手机号与验证码去验证正确性 $.ajax({ type:"POST", url:"<?php echo $this->createUrl('passport/userCheckPhoneAndCode');?>", data:{"phone":phone,"phoneCode":$(".phoneCodeVal").val()}, async:false, success:function(msgCertain) { if(msgCertain=="SUCCESS")//手机验证码检测通过 { //验证通过直接进行提交登录 $.ajax({ type:"POST", url:"<?php echo $this->createUrl('passport/codePassLogin');?>", data:{"username":$("#lusername").val(),"pwd":$("#lpassword").val()}, async:false, success:function(msglogin) { if(msglogin=="SUCCESS")//登录成功刷新当前页面 { location.reload(); //询问框 }else//登录异常刷新当前页面 { layer.confirm('<span style="color:red;">登录异常</span>，您可以联系客服人员', { btn: ['知道了'] //按钮 }); } } }); //验证通过直接进行提交登录 }else if(msgCertain=="CODEFAIL")//验证不正确 { layer.tips('验证码不正确', '.phoneCodeVal'); }else//手机号异常 { layer.tips('手机号码异常', '.phoneCodeVal'); } } }); //发送手机号与验证码去验证正确性 } }); }else { //询问框 layer.confirm('<span style="color:red;">异地登录验证-短信发送失败，可能发送次数过多</span>，您可以联系客服人员', { btn: ['知道了'] //按钮 }); phoneAndCodeCheckStatus=0; } } }); //发送短信验证码结束 return false; } } } //忘记密码 $(".forgetPwd").click(function(){ layer.open({ type: 2, title:'找回密码', area: ['375px','270px'], skin: 'layui-layer-rim', //加上边框 content: ['<?php echo $this->createUrl('passport/forgetPwd');?>', 'no'] }); }); </script> // 能帮我解决问题的才回复，或者还需要我提供什么的请留言，谢谢了，
- 关于jsp页面调用摄像头拍照并显示图片的问题其一
- 之前是只显示当前拍摄的那一张图片，现在由于需拍摄的图片有多张，需要把所有的图片显示在一个区域，大致样式如下，黑色边框代表图片的显示区域，摄像头显示的区域不变  照片是从左到右依次排列显示，并且每张图的右上角有可删除功能，想请问代码应该怎么加，怎么改？下面是之前显示的部分代码 ``` CSS: .booth { position:relative; top:-350px; left:350px; width:420px; background:#ccc; border: 10px solid #ddd; margin: 0 auto; } jsp: </div> <div class="booth"> <video id="video" width="400" height="300"></video> <input id='tack' type="button" value="拍照"> <canvas id='canvas' width='400' height='300'></canvas> <img id='img' src=''> <input type="button" onclick="uploadImage();" value="上传"> </div> JS： var video = document.getElementById('video'), canvas = document.getElementById('canvas'), snap = document.getElementById('tack'), img = document.getElementById('img'), vendorUrl = window.URL || window.webkitURL; //媒体对象 navigator.getMedia = navigator.getUserMedia || navagator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; navigator.getMedia({ video: true, //使用摄像头对象 audio: false //不适用音频 }, function(strem){ console.log(strem); video.src = vendorUrl.createObjectURL(strem); video.play(); }, function(error) { //error.code console.log(error); }); snap.addEventListener('click', function(){ //绘制canvas图形 canvas.getContext('2d').drawImage(video, 0, 0, 400, 300); //把canvas图像转为img图片 img = canvas.toDataURL("image/png"); }); ```
- FabricJS 在mac机器上对Canvas调整大小屏幕会闪烁
- ``` 我的HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Ionic App</title> <!--script type="text/javascript" language='javascript' src="fabric.js"></script--> <script type="text/javascript" language='javascript' src="index.js"></script> <style type="text/css"> html, body { width: 100%; height: 100%; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; } #left { float: left; width: 20%; height: 100%; border: 0px solid red; padding: 0px; margin: 0px; } #center { float: left; width: 80%; height: 100%; border: 0px solid green; } #canvasWrapper { overflow: scroll; background: #FFFFFF; } #canvas{ border: 0px solid black; } </style> </head> <body id='body'> <div id='left'> <button onclick="init()">Init Canvas</button> <input type="file" onchange="chooseImage(event)"/><br/> <button onclick="zoomIn()">Zoom In</button> <button onclick="zoomOut()">Zoom Out</button><br/> </div> <div id='center'> <div id='canvasWrapper' tabIndex='0'> <canvas id="canvas" ></canvas> </div> </div> </body> </html> index.js代码: /*! index.js 使用FabricJS对钡条逻辑封装的*/ // 0 1 2 3 4 5 6 7 8 9 10 var zoomArray = [0.33, 0.4, 0.5, 0.66, 0.8, 1, 1.25, 1.5, 2, 2.5, 3]; //缩放的比例,都是对称的 var zoomIndex = 5; //当前的zoomIndex var canvasWrapper = null; //Canvas的包裹物,当外部的window大小变化时候需要对它的宽度和高度设置 var canvas = null; //Canvas var fCanvas = null; //中间的Fabric.Canvas var backgroundBase64 = null; var backgroundImage = null; //背景fabric.Image var backgroundImageWidth = 0 //Canvas的宽度,由图片的宽度决定 var backgroundImageHeight = 0; //Canvas的高度,由图片的高度决定 //Canvas的属性 var canvasAttrs = { imageSmoothingEnabled: false, enableRetinaScaling: false, stopContextMenu: true, //Menu禁用 fireLeftClick: true, //左按键启用 fireMiddleClick: true, //滚动键启用 fireRightClick: false, //右按键禁用 //selectionColor: '#CC00FF', //selection的颜色 selectionLineWidth: 2, //selection的线宽 selection: true, //selection启动 selectionBorderColor: '#FFFF00',//selection边框颜色 selectionFullyContained: true, //只有当selection全部包含Canvas.Object的时候才会被选中 selectionKey: 'ctrlKey' //使用ctrlKey进行多选 }; //图片属性,中间Canvas的背景图和坐下那个图 var imageAttrs = { left: 0, top: 0, selectable: false, //设置不能被选中,这样就可以作为背景图了 hoverCursor: "default", //设置它的鼠标形状 crossOrigin: 'Anonymous' }; /*! * OK选择文件 */ function chooseImage(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function(event) { var imgBase64 = event.target.result; backgroundBase64 = imgBase64; //构造数据 var data = {}; var dataMap = {}; data['partitions'] = []; data['items'] = []; data['filters'] = {}; dataMap['data'] = data; dataMap["base64"] = backgroundBase64; loadData(dataMap); } reader.readAsDataURL(file) } /*! * OK这是上来执行的函数 */ function init() { __initFilterBackend(); __initCanvasWrapper(); __initCanvas(); } function loadData(dataMap) { if (dataMap == null) return; //图片的Base64编码。这个值肯定是有的 backgroundBase64 = dataMap['base64']; //加载背景图 fabric.util.loadImage(backgroundBase64, function(img) { //背景图 backgroundImage = new fabric.Image(img, imageAttrs); backgroundImageWidth = backgroundImage.width; backgroundImageHeight = backgroundImage.height; fCanvas.setWidth(backgroundImageWidth); fCanvas.setHeight(backgroundImageHeight); fCanvas.add(backgroundImage); }); } /*! * OK放大按钮触发 */ function zoomIn() { var oldZoom = zoomArray[zoomIndex]; ++zoomIndex; if (zoomIndex > (zoomArray.length - 1)) { zoomIndex = (zoomArray.length - 1); //直接return掉,因为zoomIndex > (zoomArray.length - 1)说明之前的zoomIndex已经是数组最后一个了 return; } __zoom(oldZoom); } /*! * OK缩小按钮触发 */ function zoomOut() { var oldZoom = zoomArray[zoomIndex]; --zoomIndex; if (zoomIndex < 0) { zoomIndex = 0; //直接return掉,因为zoomIndex < 0说明之前的zoomIndex已经是0了 return; } __zoom(oldZoom); } /*! * OK初始化Filter后端。使用Canvas2dFilterBackend,因为如果用new fabric.WebglFilterBackend()会报错 */ function __initFilterBackend() { fabric.filterBackend = new fabric.Canvas2dFilterBackend(); } /*! * OK初始化CanvasWrapper */ function __initCanvasWrapper() { //如果已经初始话好了就直接return if (canvasWrapper != null) return; var centerDiv = window.document.getElementById('center'); var width = centerDiv.offsetWidth; var height = centerDiv.offsetHeight; canvasWrapper = window.document.getElementById('canvasWrapper'); //这里通过style的width和height里设置加上px,并且这里我不设置style的maxWidth和maxHeight //因为如果设置了maxWidth和maxHeight后当我们对里面的Canvas进行缩小的时候,如果里面的Canvas变的太小,这样 canvasWrapper.style.width = width + 'px'; canvasWrapper.style.height = height + 'px'; } /*! * OK初始化Canvas */ function __initCanvas() { //如果已经初始化好了就直接return if (fCanvas != null) return; canvas = window.document.getElementById('canvas'); //这里不设置宽度和高度,通过导入图片的宽高来设置 fCanvas = new fabric.Canvas(canvas, canvasAttrs); //单纯设置canvas.backgroundColor内容无效,必须和下面的canvas.add一起才会起效果 fCanvas.backgroundColor = 'black'; } /*! * OK缩放的核心函数 */ function __zoom(oldZoom) { //记录一开始的left和top值 //var scrollLeft = canvasWrapper.scrollLeft; //var scrollTop = canvasWrapper.scrollTop; //以下是放大缩小操作,重新设置放大缩小的比例 var zoom = zoomArray[zoomIndex]; //在指定的点进行缩放 fCanvas.setZoom(zoom); //!Important,加入对Canvas大小的设置,这样可以让CanvasWrapper也能进行调整 fCanvas.setWidth(backgroundImageWidth*zoom); fCanvas.setHeight(backgroundImageHeight*zoom); //放大完后要重新设置transform //var vpt = fCanvas.viewportTransform; //console.log('-----' + vpt[4] + ' and ' + vpt[5]); //vpt[4] = 0; //vpt[5] = 0; //fCanvas.requestRenderAll(); /* oldleft newLeft * --------- = --------- * oldZoom newZoom */ //canvasWrapper.scrollLeft = (scrollLeft*zoom)/oldZoom; //canvasWrapper.scrollTop = (scrollTop*zoom)/oldZoom; } ```
- 在中国程序员是青春饭吗？
- 今年，我也32了 ，为了不给大家误导，咨询了猎头、圈内好友，以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助，记得帮我点赞哦。 目录： 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时，拿着傲人的工资，想着好好干，以为我们的人生是这样的： 等真到了那一天，你会发现，你的人生很可能是这样的： ...
- 《MySQL 性能优化》之理解 MySQL 体系结构
- 本文介绍 MySQL 的体系结构，包括物理结构、逻辑结构以及插件式存储引擎。
- 程序员请照顾好自己，周末病魔差点一套带走我。
- 程序员在一个周末的时间，得了重病，差点当场去世，还好及时挽救回来了。
- Python+OpenCV实时图像处理
- 目录 1、导入库文件 2、设计GUI 3、调用摄像头 4、实时图像处理 4.1、阈值二值化 4.2、边缘检测 4.3、轮廓检测 4.4、高斯滤波 4.5、色彩转换 4.6、调节对比度 5、退出系统 初学OpenCV图像处理的小伙伴肯定对什么高斯函数、滤波处理、阈值二值化等特性非常头疼，这里给各位分享一个小项目，可通过摄像头实时动态查看各类图像处理的特点，也可对各位调参、测试...
- 2020年一线城市程序员工资大调查
- 人才需求 一线城市共发布岗位38115个，招聘120827人。 其中 beijing 22805 guangzhou 25081 shanghai 39614 shenzhen 33327 工资分布 2020年中国一线城市程序员的平均工资为16285元，工资中位数为14583元，其中95%的人的工资位于5000到20000元之间。 和往年数据比较： yea...
- 为什么猝死的都是程序员，基本上不见产品经理猝死呢？
- 相信大家时不时听到程序员猝死的消息，但是基本上听不到产品经理猝死的消息，这是为什么呢？ 我们先百度搜一下：程序员猝死，出现将近700多万条搜索结果： 搜索一下：产品经理猝死，只有400万条的搜索结果，从搜索结果数量上来看，程序员猝死的搜索结果就比产品经理猝死的搜索结果高了一倍，而且从下图可以看到，首页里面的五条搜索结果，其实只有两条才是符合条件。 所以程序员猝死的概率真的比产品经理大，并不是错...
- 害怕面试被问HashMap？这一篇就搞定了！
- 声明：本文以jdk1.8为主！ 搞定HashMap 作为一个Java从业者，面试的时候肯定会被问到过HashMap，因为对于HashMap来说，可以说是Java集合中的精髓了，如果你觉得自己对它掌握的还不够好，我想今天这篇文章会非常适合你，至少，看了今天这篇文章，以后不怕面试被问HashMap了 其实在我学习HashMap的过程中，我个人觉得HashMap还是挺复杂的，如果真的想把它搞得明明白...
- 毕业5年，我问遍了身边的大佬，总结了他们的学习方法
- 我问了身边10个大佬，总结了他们的学习方法，原来成功都是有迹可循的。
- python爬取百部电影数据，我分析出了一个残酷的真相
- 2019年就这么匆匆过去了，就在前几天国家电影局发布了2019年中国电影市场数据，数据显示去年总票房为642.66亿元，同比增长5.4%；国产电影总票房411.75亿元，同比增长8.65%，市场占比 64.07%；城市院线观影人次17.27亿，同比增长0.64%。 看上去似乎是一片大好对不对？不过作为一名严谨求实的数据分析师，我从官方数据中看出了一点端倪：国产票房增幅都已经高达8.65%了，为什...
- 推荐10个堪称神器的学习网站
- 每天都会收到很多读者的私信，问我：“二哥，有什么推荐的学习网站吗？最近很浮躁，手头的一些网站都看烦了，想看看二哥这里有什么新鲜货。” 今天一早做了个恶梦，梦到被老板辞退了。虽然说在我们公司，只有我辞退老板的份，没有老板辞退我这一说，但是还是被吓得 4 点多都起来了。（主要是因为我掌握着公司所有的核心源码，哈哈哈） 既然 4 点多起来，就得好好利用起来。于是我就挑选了 10 个堪称神器的学习网站，推...
- 这些软件太强了，Windows必装！尤其程序员！
- Windows可谓是大多数人的生产力工具，集娱乐办公于一体，虽然在程序员这个群体中都说苹果是信仰，但是大部分不都是从Windows过来的，而且现在依然有很多的程序员用Windows。 所以，今天我就把我私藏的Windows必装的软件分享给大家，如果有一个你没有用过甚至没有听过，那你就赚了????，这可都是提升你幸福感的高效率生产力工具哦！ 走起！???? NO、1 ScreenToGif 屏幕，摄像头和白板...
- 阿里面试，面试官没想到一个ArrayList，我都能跟他扯半小时
- 我是真的没想到，面试官会这样问我ArrayList。
- 曾经优秀的人，怎么就突然不优秀了。
- 职场上有很多辛酸事，很多合伙人出局的故事，很多技术骨干被裁员的故事。说来模板都类似，曾经是名校毕业，曾经是优秀员工，曾经被领导表扬，曾经业绩突出，然而突然有一天，因为种种原因，被裁员了，...
- C语言荣获2019年度最佳编程语言
- 关注、星标公众号，不错过精彩内容作者：黄工公众号：strongerHuang近日，TIOBE官方发布了2020年1月编程语言排行榜单。我在前面给过一篇文章《2019年11月C语言接近Ja...
- 大学四年因为知道了这32个网站，我成了别人眼中的大神！
- 依稀记得，毕业那天，我们导员发给我毕业证的时候对我说“你可是咱们系的风云人物啊”，哎呀，别提当时多开心啦????，嗯，我们导员是所有导员中最帅的一个，真的???? 不过，导员说的是实话，很多人都叫我大神的，为啥，因为我知道这32个网站啊，你说强不强????，这次是绝对的干货，看好啦，走起来！ PS：每个网站都是学计算机混互联网必须知道的，真的牛杯，我就不过多介绍了，大家自行探索，觉得没用的，尽管留言吐槽吧???? 社...
- 良心推荐，我珍藏的一些Chrome插件
- 上次搬家的时候，发了一个朋友圈，附带的照片中不小心暴露了自己的 Chrome 浏览器插件之多，于是就有小伙伴评论说分享一下我觉得还不错的浏览器插件。 我下面就把我日常工作和学习中经常用到的一些 Chrome 浏览器插件分享给大家，随便一个都能提高你的“生活品质”和工作效率。 Markdown Here Markdown Here 可以让你更愉快的写邮件，由于支持 Markdown 直接转电子邮...
- 看完这篇HTTP，跟面试官扯皮就没问题了
- 我是一名程序员，我的主要编程语言是 Java，我更是一名 Web 开发人员，所以我必须要了解 HTTP，所以本篇文章就来带你从 HTTP 入门到进阶，看完让你有一种恍然大悟、醍醐灌顶的感觉。 最初在有网络之前，我们的电脑都是单机的，单机系统是孤立的，我还记得 05 年前那会儿家里有个电脑，想打电脑游戏还得两个人在一个电脑上玩儿，及其不方便。我就想为什么家里人不让上网，我的同学 xxx 家里有网，每...
- 史上最全的IDEA快捷键总结
- 现在Idea成了主流开发工具，这篇博客对其使用的快捷键做了总结，希望对大家的开发工作有所帮助。
- 阿里程序员写了一个新手都写不出的低级bug，被骂惨了。
- 这种新手都不会范的错，居然被一个工作好几年的小伙子写出来，差点被当场开除了。
- 谁是华为扫地僧？
- 是的，华为也有扫地僧！2020年2月11-12日，“养在深闺人不知”的华为2012实验室扫地僧们，将在华为开发者大会2020（Cloud）上，和大家见面。到时，你可以和扫地僧们，吃一个洋...
- AI 没让人类失业，搞 AI 的人先失业了
- 最近和几个 AI 领域的大佬闲聊 根据他们讲的消息和段子 改编出下面这个故事 如有雷同 都是巧合 1. 老王创业失败，被限制高消费 “这里写我跑路的消息实在太夸张了。” 王葱葱哼笑一下，把消息分享给群里。 阿杰也看了消息，笑了笑。在座几位也都笑了。 王葱葱是个有名的人物，21岁那年以全额奖学金进入 KMU 攻读人工智能博士，累计发表论文 40 余篇，个人技术博客更是成为深度学习领域内风向标。 ...
- 2020年，冯唐49岁：我给20、30岁IT职场年轻人的建议
- 点击“技术领导力”关注∆每天早上8:30推送 作者|Mr.K 编辑| Emma 来源|技术领导力(ID：jishulingdaoli) 前天的推文《冯唐：职场人35岁以后，方法论比经验重要》，收到了不少读者的反馈，觉得挺受启发。其实，冯唐写了不少关于职场方面的文章，都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯...
- 一份王者荣耀的英雄数据报告
- 咪哥杂谈本篇阅读时间约为 6 分钟。1前言前一阵写了关于王者的一些系列文章，从数据的获取到数据清洗，数据落地，都是为了本篇的铺垫。今天来实现一下，看看不同维度得到的结论。2环境准备本次实...
- 作为一名大学生，如何在B站上快乐的学习？
- B站是个宝，谁用谁知道???? 作为一名大学生，你必须掌握的一项能力就是自学能力，很多看起来很牛X的人，你可以了解下，人家私底下一定是花大量的时间自学的，你可能会说，我也想学习啊，可是嘞，该学习啥嘞，不怕告诉你，互联网时代，最不缺的就是学习资源，最宝贵的是啥？ 你可能会说是时间，不，不是时间，而是你的注意力，懂了吧！ 那么，你说学习资源多，我咋不知道，那今天我就告诉你一个你必须知道的学习的地方，人称...
- 那些年，我们信了课本里的那些鬼话
- 教材永远都是有错误的，从小学到大学，我们不断的学习了很多错误知识。 斑羚飞渡 在我们学习的很多小学课文里，有很多是错误文章，或者说是假课文。像《斑羚飞渡》： 随着镰刀头羊的那声吼叫，整个斑羚群迅速分成两拨，老年斑羚为一拨，年轻斑羚为一拨。 就在这时，我看见，从那拨老斑羚里走出一只公斑羚来。公斑羚朝那拨年轻斑羚示意性地咩了一声，一只半大的斑羚应声走了出来。一老一少走到伤心崖，后退了几步，突...
- 一个程序在计算机中是如何运行的？超级干货！！！
- 强烈声明：本文很干，请自备茶水！???? 开门见山，咱不说废话！ 你有没有想过，你写的程序，是如何在计算机中运行的吗？比如我们搞Java的，肯定写过这段代码 public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World!"); } ...
- 【蘑菇街技术部年会】程序员与女神共舞，鼻血再次没止住。（文末内推）
- 蘑菇街技术部的年会，别开生面，一样全是美女。
- 那个在阿里养猪的工程师，5年了……
- 简介： 在阿里，走过1825天，没有趴下，依旧斗志满满，被称为“五年陈”。他们会被授予一枚戒指，过程就叫做“授戒仪式”。今天，咱们听听阿里的那些“五年陈”们的故事。 下一个五年，猪圈见！ 我就是那个在养猪场里敲代码的工程师，一年多前我和20位工程师去了四川的猪场，出发前总架构师慷慨激昂的说：同学们，中国的养猪产业将因为我们而改变。但到了猪场，发现根本不是那么回事：要个WIFI，没有；...
- 为什么程序猿都不愿意去外包？
- 分享外包的组织架构，盈利模式，亲身经历，以及根据一些外包朋友的反馈，写了这篇文章 ，希望对正在找工作的老铁有所帮助
- Java校招入职华为，半年后我跑路了
- 何来 我，一个双非本科弟弟，有幸在 19 届的秋招中得到前东家华为（以下简称 hw）的赏识，当时秋招签订就业协议，说是入了某 java bg，之后一系列组织架构调整原因等等让人无法理解的神操作，最终毕业前夕，被通知调往其他 bg 做嵌入式开发（纯 C 语言）。 由于已至于校招末尾，之前拿到的其他 offer 又无法再收回，一时感到无力回天，只得默默接受。 毕业后，直接入职开始了嵌入式苦旅，由于从未...
- 世界上有哪些代码量很少，但很牛逼很经典的算法或项目案例？
- 点击上方蓝字设为星标下面开始今天的学习～今天分享四个代码量很少，但很牛逼很经典的算法或项目案例。1、no code 项目地址：https://github.com/kelseyhight...
- 两年前不知如何编写代码的我，现在是一名人工智能工程师
- 全文共3526字，预计学习时长11分钟 图源：Unsplash 经常有小伙伴私信给小芯，我没有编程基础，不会写代码，如何进入AI行业呢？还能赶上AI浪潮吗？ 任何时候努力都不算晚。 下面，小芯就给大家讲一个朋友的真实故事，希望能给那些处于迷茫与徘徊中的小伙伴们一丝启发。（下文以第一人称叙述） 图源：Unsplash 正如Elsa所说，职业转换是...
- 强烈推荐10本程序员必读的书
- 很遗憾，这个春节注定是刻骨铭心的，新型冠状病毒让每个人的神经都是紧绷的。那些处在武汉的白衣天使们，尤其值得我们的尊敬。而我们这些窝在家里的程序员，能不外出就不外出，就是对社会做出的最大的贡献。 有些读者私下问我，窝了几天，有点颓丧，能否推荐几本书在家里看看。我花了一天的时间，挑选了 10 本我最喜欢的书，你可以挑选感兴趣的来读一读。读书不仅可以平复恐惧的压力，还可以对未来充满希望，毕竟苦难终将会...
- 作为一个程序员，内存的这些硬核知识你必须懂！
- 我们之前讲过CPU，也说了CPU和内存的那点事儿，今天咱就再来说说有关内存，作为一个程序员，你必须要懂的哪那些硬核知识！ 大白话聊一聊，很重要！ 先来大白话的跟大家聊一聊，我们这里说的内存啊，其实就是说的我们电脑里面的内存条，所以嘞，内存就是内存条，数据要放在这上面才能被cpu读取从而做运算，还有硬盘，就是电脑中的C盘啥的，一个程序需要运行的话需要向内存申请一块独立的内存空间，这个程序本身是存放在...
- 非典逼出了淘宝和京东，新冠病毒能够逼出什么？
- loonggg读完需要5分钟速读仅需 2 分钟大家好，我是你们的校长。我知道大家在家里都憋坏了，大家可能相对于封闭在家里“坐月子”，更希望能够早日上班。今天我带着大家换个思路来聊一个问题...
- 牛逼！一行代码居然能解决这么多曾经困扰我半天的算法题
- 春节假期这么长，干啥最好？当然是折腾一些算法题了，下面给大家讲几道一行代码就能解决的算法题，当然，我相信这些算法题你都做过，不过就算做过，也是可以看一看滴，毕竟，你当初大概率不是一行代码解决的。 学会了一行代码解决，以后遇到面试官问起的话，就可以装逼了。 一、2 的幂次方 问题描述：判断一个整数 n 是否为 2 的幂次方 对于这道题，常规操作是不断这把这个数除以 2，然后判断是否有余数，直到 ...
- 用前端5分钟写一个在线m3u8在线播放器
- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
- Spring框架|JdbcTemplate介绍
- 文章目录一、JdbcTemplate 概述二、创建对象的源码分析三、JdbcTemplate操作数据库 一、JdbcTemplate 概述 在之前的web学习中，学习了手动封装JDBCtemplate，其好处是通过(sql语句+参数)模板化了编程。而真正的JDBCtemplete类，是Spring框架为我们写好的。 它是 Spring 框架中提供的一个对象，是对原始 Jdbc API 对象的简单...
- 为什么说程序员做外包没前途？
- 之前做过不到3个月的外包，2020的第一天就被释放了，2019年还剩1天，我从外包公司离职了。我就谈谈我个人的看法吧。首先我们定义一下什么是有前途 稳定的工作环境 不错的收入 能够在项目中不断提升自己的技能（ps：非技术上的认知也算） 找下家的时候能找到一份工资更高的工作 如果你目前还年轻，但高不成低不就，只有外包offer，那请往下看。 外包公司你应该...
- B 站上有哪些很好的学习资源?
- 哇说起B站，在小九眼里就是宝藏般的存在，放年假宅在家时一天刷6、7个小时不在话下，更别提今年的跨年晚会，我简直是跪着看完的！！ 最早大家聚在在B站是为了追番，再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频，最近两年我和周围的朋友们已经把B站当作学习教室了，而且学习成本还免费，真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ﾉ 下面我们就来盘点一下B站上优质的学习资源： 综合类 Oeasy： 综合...
- 终于！疫情之下，第一批企业没能熬住面临倒闭，员工被遣散，没能等来春暖花开！
- 先来看一个图： 这个春节，我同所有人一样，不仅密切关注这次新型肺炎，还同时关注行业趋势和企业。在家憋了半个月，我选择给自己看书充电。因为在疫情之后，行业竞争会更加加剧，必须做好未雨绸缪，时刻保持充电。 看了今年的情况，突然想到大佬往年经典语录： 马云：未来无业可就，无工可打，无商可务 李彦宏：人工智能时代，有些专业将被淘汰，还没毕业就失业 马化腾：未来3年将大洗牌，迎21世界以来最大失业潮 王...
- 昂，我24岁了
- 24岁的程序员，还在未来迷茫，不知道能不能买得起房子
- 作为程序员的我，大学四年一直自学，全靠这些实用工具和学习网站！
- 我本人因为高中沉迷于爱情，导致学业荒废，后来高考，毫无疑问进入了一所普普通通的大学，实在惭愧???? 我又是那么好强，现在学历不行，没办法改变的事情了，所以，进入大学开始，我就下定决心，一定要让自己掌握更多的技能，尤其选择了计算机这个行业，一定要多学习技术。 在进入大学学习不久后，我就认清了一个现实：我这个大学的整体教学质量和学习风气，真的一言难尽，懂的人自然知道怎么回事？ 怎么办？我该如何更好的提升自...
- 新来个技术总监，禁止我们使用Lombok！
- 我有个学弟，在一家小型互联网公司做Java后端开发，最近他们公司新来了一个技术总监，这位技术总监对技术细节很看重，一来公司之后就推出了很多"政策"，比如定义了很多开发规范、日志规范、甚至是要求大家统一使用某一款IDE。 但是这些都不是我这个学弟和我吐槽的点，他真正和我吐槽的是，他很不能理解，这位新来的技术总监竟然禁止公司内部所有开发使用Lombok。但是又没给出十分明确的，可以让人信服的理由。 于...
- 疫情下的招聘季还会是金三银四吗？
- 想必大家都看过朋友圈流行的一个段子： 前天一觉醒来，假期还有⑤天。昨天一觉醒来，假期还有⑦天。今天一觉醒来，假期还有⑬天。真的不敢再睡了 今天，有个朋友跟我说： 一觉醒来，公司倒闭了。 昨天有些公司已经通知复工了，有些选择在线办工，也些同学也已进入公司码代码了。 能复工的同学应该庆幸，因为你们公司还能撑得下去。 对于大部分的打工族而言，休假比工作爽，反正啥活不干，工资照发。 而对于企...
