Web开发经验笔记-CFANZ编程社区

Web开发经验笔记

（1）hover盒子，放大+阴影效果

	/* css文件 */
 	transform: scale(1.05);
    box-shadow: 0px 0px 10px 5px #dddddd;

（2）修改select中文本内容，option文本内容距离左边框间距

	/* css文件 */
 	padding-left:20px

（3）ajax请求访问服务器图片被防爬虫设置干扰，可以拿到图片url但是无法让图片显示

	<!-- html文件 -->
 	 <meta name="referrer" content="never">

（4）css绘制三角形

	/*css文件*/
     width: 0px;
     border-bottom: 10px solid white;
     border-top: 10px solid transparent;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;

（5）让盒子固定在屏幕中心

	/*css文件*/
      position: fixed;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;

（6）css绘制1/4圆

	/*css文件*/
      width: 100px;
      height: 100px;
      border-radius: 0px 0px 0px 100px;

（7）css绘制半圆

	/*css文件*/
      width: 100px;
      height: 200px;
      border-radius: 100px 0px 0px 100px;

（8）画布绘制随机验证码，点击切换验证码

	<!-- html文件 -->
	<canvas width="80px" height="46px"></canvas>

// js文件
function randomCode(){
    var charArr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", 'g', "h", "j", "k", "l", "z", "x", "c",
    "v", "b", "n", "m", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "A", "S", "D", "F", "G", "H", "J", "K", "L", "Z", "X", "C", "V", "B", "N", "M"];
    var code='';
    for(var count = 1;count < 5; count++){
        code+=charArr[parseInt(Math.random()*charArr.length)];
    }
    return code;
}
function drawCode(code){
    var ctx = $("canvas").get(0).getContext("2d");
    for(var index=0;index<code.length;index++){
        var fontSize = parseInt(Math.random() * 2+20);
        var x = parseInt(Math.random()*(20-fontSize)+(index*20));
        var y = parseInt(Math.random()*(46-fontSize)+fontSize);
        ctx.fillStyle =  `rgb(${parseInt(Math.random() * 256)},${parseInt(Math.random() * 256)},${parseInt(Math.random() * 256)})`;
        ctx.font = fontSize+'px 楷体';
        ctx.fillText(code.charAt(index),x,y);
    } 
}

function clearCode(){
    var ctx =  $("canvas").get(0).getContext('2d');
    ctx.clearRect(0,0,$("canvas").get(0).width,$("canvas").get(0).height);
}
//生成验证码
$(function(){
	drawCode(randomCode());
	//点击切换验证码
	$("canvas").on("click",function(event){
    	clearCode()
    	drawCode(randomCode());
	})
})