Web开发经验笔记

Posted 2022-02-05 Blockchain_KT

Web开发经验笔记

• • （1）hover盒子，放大+阴影效果
  • （2）修改select中文本内容，option文本内容距离左边框间距
  • （3）ajax请求访问服务器图片被防爬虫设置干扰，可以拿到图片url但是无法让图片显示
  • （4）css绘制三角形
  • （5）让盒子固定在屏幕中心
  • （6）css绘制1/4圆
  • （7）css绘制半圆
  • （8）画布绘制随机验证码，点击切换验证码
  • （9）css禁用样式

（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" id="login_vCode"></canvas>

// js文件
    var loginSelector = document.querySelector("#login_vCode");
    drawCode(loginSelector,randomCode());
    $(loginSelector).on("click",function()
        clearCode(loginSelector);
        drawCode(loginSelector,randomCode());
    )
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(selector,code)
    var ctx = selector.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(selector)
    var ctx = selector.getContext('2d');
    ctx.clearRect(0,0,selector.width,selector.height);

（9）css禁用样式

	cursor:not-allowed;