2024年10月26日

企业网页推广出现移动端兼容问题怎么解决?分享几个实用的css代码

企业网页推广时出现网页兼容问题，不仅在pc端开发中会碰到，而且在APP开发当中也会经常碰到。

1、禁止图片点击放大

2024年10月26日

几道常考的前端面试题（前端经典面试题及答案）

盒子水平垂直居中有几种方式

1、绝对定位。盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;

2、table-cell布局。父级 display: table-cell; vertical-align: middle;  子级 margin: 0 auto;

3、定位 + transform ; 适用于 子盒子 宽高不定时； （这里是本人常用方法）
    
    position: relative / absolute;
    /*top和left偏移各为50%*/
       top: 50%;
       left: 50%;
    /*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
    transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 （至于何是3D加速 请看浏览器进程与线程篇）

4、flex 布局
    父级： 
        /*flex 布局*/
        display: flex;
        /*实现垂直居中*/
        align-items: center;
        /*实现水平居中*/
        justify-content: center;

再加一种水平方居中的方式 ：margin-left : 50% ; transform: translateX(-50%);

2024年10月26日

小猿圈分享-如何做一个听话的输入框

在我们程序员日常的工作当中，经常会遇到一些让人头疼的槽点，小编也是经常遇到，今天就给大家分享如何让输入框听话的技巧。

问题探究

1. ios中，输入框获得焦点时，页面输入框被遮盖，定位的元素位置错乱：

当页input存在于吸顶或者吸底元素中时，用户点击输入框，输入法弹出后，fiexd失效，页面中定位好的元素随屏幕滚动。

针对这个问题，我们一起来看下以下几种方案：

方案一： Web API 接口：scrollIntoView

2024年10月26日

网页出现禁止复制黏贴的内容如何破解

我们查询网页的时候，想复制网页上的部分内容，结果出现请先登陆或者是连提示也没有，有的复制加了个小尾巴，如何操作，且听早早道来

主要破解思路是:禁用js+取消user-select样式（css）

Chrome浏览器的话：打开浏览器按F12进入控制台，按F1进入Setting，勾选Disable JavaScript(禁止js)。

一般到这里就可以复制内容了，如果还是不行，可能开发者在元素上添加了user-select（禁止用户选中），同样是打开控制台点击左上角的箭头，选中该元素（要复制的内容），把user-select属性勾掉既可。

2024年10月26日

程序员-私活:修改网页元素，网页自动化处理

记录分享日常接单的体会， 关注我，了解程序员私活接单

最近在学习一些前端小程序、javascript等相关技术栈，难免碰到许多难题，查询CSDN是经常做的事情

相信老铁们也有这几个痛点

1、需关注博文后，才能查看全部文章内容

2024年10月26日

Cascadea for Mac(修改网站外观的CSS编辑器)v2.1激活版

如何改变网站的外观和感受？Cascadea Mac版是Macos上的一款修改网站外观的CSS编辑器，只支持Safari浏览器哦。Cascadea mac包含功能强大的CSS编辑器，用于编写或编辑自定义样式。Cascadea具有语法高亮，自动完成，代码折叠，美化以及支持在多个选项卡中打开样式的功能。

2024年10月26日

css禁止文字被选中（css禁止复制文字）

广东IT优就业

有时候，为了让用户有更好的体验，需要禁用掉文本选中功能

比如：使用a标签模拟按钮，如果不禁用掉文本选中功能，那么双击时会选中文字，用起来很不爽。

多数情况下，只需要使用CSS样式就可以实现这个功能啦：

user-select有四个值：

none：

2024年10月26日

Javascript常用工具类（js常用工具库）

就算现今是以框架为主流的前端，依然离不开JS，因为他是框架底层的一部分。我先上传代码截图（截图显示会更好看点），截图后面有带源码（源码方便大家复制）。

/**
 * 文件描述:js项目开发中的常用方法工具
 *
 */
/**
 * 全局常量
 */
var DEFAULT_LINE_KEY = 0;
var DIS_PRECISION_NUM = 3; //距离精度位数
var UntilCommon = {}; //公共函数对象
var MAX_KEYCODE_TIMELEN = 40;//输入间隔
/**
 * 功能:对Date的扩展，将 Date 转化为指定格式的String 
 * @param fmt 格式化字符串("yyyy-MM-dd hh:mm:ss.S")
 * @return 格式化后的日期字符串;
 */ 
Date.prototype.Format = function(fmt) 
{ 
var o = { 
"M+" : this.getMonth()+1, //月份 
"d+" : this.getDate(), //日 
"h+" : this.getHours(), //小时 
"m+" : this.getMinutes(), //分 
"s+" : this.getSeconds(), //秒 
"q+" : Math.floor((this.getMonth()+3)/3), //季度 
"S" : this.getMilliseconds() //毫秒 
}; 
if(/(y+)/.test(fmt)) 
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
for(var k in o) 
if(new RegExp("("+ k +")").test(fmt)) 
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 
return fmt; 
};
//
function getLocalTime(nS, len) { 
 return new Date(parseInt(nS)*len).Format("yyyy-MM-dd hh:mm:ss");
}
/**
 * 功能:String对象替转Date类型
 * @param strDate 被转字符串
 * @return 日期对象;
 * */
UntilCommon.StringToDate = function(strDate)
{
//因之前在数据库中的类型为2008-04-02 10:08:44,必须转化为2008/04/02 10:08:44格式才能实例化Date对象
var strTemp=strDate.toString();
strTemp = strTemp.replace(/-/g,"/");
var dDate = new Date(strTemp);
return dDate;
};
/**
 * 功能:增加String对象替换全部字符串方法
 * @param reallyDo 被替换字符串
 * @param replaceWith 替换成目标字符串
 * @param ignoreCase 是否忽略大小写
 * @return 替换完成字符串;
 */ 
String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {
 if (!RegExp.prototype.isPrototypeOf(reallyDo))
 {
 return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi": "g")), replaceWith);
 } 
 else 
 {
 return this.replace(reallyDo, replaceWith);
 }
};
/**
 * 
 */
UntilCommon.GetFileSuffix = function(filename){
var result = "";
try{
var start=filename.lastIndexOf(".")+1;
var end=filename.length;
 result=filename.substring(start,end);//后缀名
}catch(e){
result = "";
}
return result.toLowerCase();
};
/**
 * 功能: 获取浏览器类型
 * @return 浏览器类型名称;
 */
UntilCommon.getOs= function() 
{ 
 if(navigator.userAgent.indexOf("MSIE")>0) 
 { 
 return "MSIE"; 
 } 
 
 if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)
 { 
 return "Firefox"; 
 } 
 
 if(isSafari=navigator.userAgent.indexOf("Safari")>0) 
 { 
 return "Safari"; 
 } 
 
 if(isCamino=navigator.userAgent.indexOf("Camino")>0)
 { 
 return "Camino"; 
 } 
 
 if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0)
 { 
 return "Gecko"; 
 } 
 
};
/**
 * 功能: 获取IE版本
 * @return IE的版本号;
 */
UntilCommon.GetversionIE= function(){
var browser=navigator.appName; 
if(browser!="Microsoft Internet Explorer" )
{
return -1;
}
var b_version=navigator.appVersion;
var version=b_version.split(";"); 
var trim_Version=version[1].replace(/[ ]/g,""); 
if(trim_Version=="MSIE6.0") 
{ 
 return 6;
} 
else if(trim_Version=="MSIE7.0") 
{ 
return 7;
} 
else if(trim_Version=="MSIE8.0") 
{ 
return 8;
} 
else if(trim_Version=="MSIE9.0") 
{ 
return 9;
} 
else if(trim_Version=="MSIE10.0") 
{ 
return 10;
} 
return 11;
};
/**
 * 功能: 绑定页面大小改变执行函数
 * @param fn 回调函数
 */
UntilCommon.BindOnReSize=function (fn)
{
window.οnresize=fn;
};
/**
 * 功能: 关闭页面鼠标选中页面数据功能
 */ 
UntilCommon.disSelectBrowser = function()
{
var browserType = UntilCommon.getOs();
//防止出现点击蓝色区域 IE和谷歌支持，火狐在css设置 -moz-user-select: none;
if((browserType == "MSIE")||(browserType == "Safari"))//ie&chrome
{ 
 document.onselectstart=function(){return false;};
}
};
/**
 * 功能: 进入全屏
 */ 
UntilCommon.FullScreen = function () 
{
try{
 var docElm = document.documentElement;
 //W3C 
 if (docElm.requestFullscreen) 
 { 
 docElm.requestFullscreen(); 
 }
 //FireFox 
 else if (docElm.mozRequestFullScreen) 
 { 
 docElm.mozRequestFullScreen(); 
 }
 //Chrome等 
 else if (docElm.webkitRequestFullScreen) 
 { 
 docElm.webkitRequestFullScreen(); 
 }
 //IE11
 else if (elem.msRequestFullscreen) 
 {
 elem.msRequestFullscreen();
 }
}
catch(e)
{console.log(e);
 if (typeof window.ActiveXObject != "undefined") 
 {
 // for Internet Explorer
 var wscript = new ActiveXObject("WScript.Shell");
 if (wscript != null) 
 {
 wscript.SendKeys("{F11}");
 }
 }
}
 finally
{
 
}
};
/**
 * 功能: 取消全屏进入全屏
 */ 
UntilCommon.ExitFullScreen =function ()
{
try
{
var browserNum = UntilCommon.GetversionIE();
if( browserNum>-1 && browserNum< 10)
{
if (typeof window.ActiveXObject != "undefined")
{ 
var wscript = new ActiveXObject("WScript.Shell");
 if (wscript != null) 
 { 
 wscript.SendKeys("{F11}");
 }
}
}
else if (document.exitFullscreen) 
{ 
 document.exitFullscreen(); 
} 
else if (document.mozCancelFullScreen) 
{ 
 document.mozCancelFullScreen(); 
} 
else if (document.webkitCancelFullScreen) 
{ 
 document.webkitCancelFullScreen(); 
}
else if (document.msExitFullscreen) 
{ 
 document.msExitFullscreen();
}
}
catch(e)
{
if (typeof window.ActiveXObject != "undefined") 
{ 
// for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
 if (wscript != null) 
 { 
 wscript.SendKeys("{F11}");
 }
}
 }
 finally
 {
 
 }
};
/**
 * 功能: 在json对象添加objName
 * @param objName 对象名称
 * @param jsondata json对象
 * @return json对象;
 */ 
UntilCommon.JsonToObjJson = function(objName, jsondata)
{
var jsonNew = {};
 for(var key in jsondata)
 { 
 jsonNew[objName+"."+key] =jsondata[key];
 } 
return jsonNew;
};
//
UntilCommon.cloneObject = function(jsondata)
{
var jsonNew = {};
 for(var key in jsondata)
 { 
 jsonNew[key] =jsondata[key];
 } 
return jsonNew;
};
/**
 * 功能: json对象转换为String字符串
 * @param oJson json对象
 * @return json对象的字符内容;
 */ 
UntilCommon.Json2ToString =function (oJson)
{ 
if(JSON)
{
return JSON.stringify(oJson);
}
 var S = []; 
 var J = ""; 
 if (Object.prototype.toString.apply(oJson) === '[object Array]') 
 { 
 for (var i = 0; i < oJson.length; i++)
 {
 S.push(O2String(oJson[i]));
 }
 
 J = '[' + S.join(',') + ']'; 
 } 
 else if (Object.prototype.toString.apply(oJson) === '[object Date]') 
 { 
 J = "new Date(" + oJson.getTime() + ")"; 
 } 
 else if (Object.prototype.toString.apply(oJson) === '[object RegExp]' || Object.prototype.toString.apply(oJson) === '[object Function]')
 { 
 J = oJson.toString(); 
 } 
 else if (Object.prototype.toString.apply(oJson) === '[object Object]') 
 { 
 for (var i in oJson) 
 { 
 oJson[i] = typeof (oJson[i]) == 'string' ? '"' + oJson[i] + '"' : (typeof (oJson[i]) === 'object' ? O2String(oJson[i]) : oJson[i]); 
 S.push(i + ':' + oJson[i]); 
 } 
 J = '{' + S.join(',') + '}'; 
 } 
 return J; 
};
/**
 *功能: 用于下载网页数据并加载的本地
 *@param useURL 下载页面URL
 *@param callbackFn 下载完成回调函数
 */
UntilCommon.DomLoadHTML = function(useURL,callbackFn)
{
 $.ajax({
type : "POST",
url : useURL,
dataType : "text",
async:true,
contentType : "application/x-www-form-urlencoded;charset=UTF-8",
success :callbackFn
}); 
};
/**
 *功能: 刷新当前页面
 *@param bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")
 */ 
UntilCommon.reload= function(bForceGet )
{
bForceGet = typeof bForceGet == 'undefined' ? false : bForceGet;
location.reload(bForceGet); 
};
/**
 *功能: 获取系统窗口大小
 * @return size
 */ 
UntilCommon.GetSystemSize = function()
{
 var xWidth = $(document).width();
 var xHeight =$(document).height(); 
 //
// if(UntilCommon.GetversionIE() > 0)
// {
// xWidth = $(document).width()-3.3;
// xHeight =$(document).height()-3.3; 
// }
 return {'width':xWidth,'height':xHeight};
};
//屏幕分辨率
UntilCommon.GetScreenSize = function (){
return {'width':window.screen.width,'height':window.screen.height};
};
//屏幕可用工作区
UntilCommon.GetScreenAvailSize = function (){
return {'width':window.screen.availWidth,'height':window.screen.availHeight};
};
/** 
 *功能: 验证字符串的合法性
 * @param value 要验证的字符串的内容
 * @param name 中文名称
 * @param len 字符的最大长度
 * @param isNotNull 是否非空
 * @return true/false;
 */ 
UntilCommon.checkText= function (value, name, len, isNotNull)
{
//
if(isNotNull) 
{
if(UntilCommon.TrimText (value) == "") 
{
$.messager.alert('提示信息', name+"不能为空，请重新输入！", 'info');
return true;
}
}
//
if(value.length >len) 
{
$.messager.alert('提示信息', name+"不能超过"+len+"个字符，请重新输入！", "info");
return true;
}
else 
{
return false;
}
};
/**
 * 功能: 去除右空格
 * @param str 要处理的字符串
 * @return 处理后的字符串
 */ 
UntilCommon.rTrimText = function(str) 
{
var pattern = new RegExp("[\\s]+$","gi");
return str.replace(pattern,"");
};
/**
 * 功能: 去除左空格
 * @param str 要处理的字符串
 * @return 处理后的字符串
 */ 
UntilCommon.lTrimText = function (str) 
{
var pattern = new RegExp("^[\\s]+","gi");
return str.replace(pattern,"");
};
/**
 * 功能: 去除两边空格
 * @param str 要处理的字符串
 * @return 处理后的字符串
 */ 
UntilCommon.TrimText = function (str) 
{
return UntilCommon.rTrimText(UntilCommon.lTrimText(str));
};
/**
 * 功能: 禁止中文
 * @param textid 所要判断的对象
 */
UntilCommon.checktextnoZh = function (textid, charnum) 
{
var strTemp = textid.value.replace(/[\u4E00-\u9FA5\_]/g,'');
if(strTemp != textid.value){
textid.value=strTemp;
}
if(charnum != null && textid.value.length > charnum)
{
textid.value=textid.value.substr(0, charnum);
}
};
/**
 * 功能: 验证输入框为数字、字符、中文
 * @param textid 所要判断的对象
 */
UntilCommon.checktextZh =function (textid, charnum)
{
var strTemp =textid.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\_/]/g,'');
if(strTemp != textid.value){
textid.value=strTemp;
}
if(charnum != null && textid.value.length > charnum)
{
textid.value=textid.value.substr(0, charnum);
}
};
/**
 * 功能: 验证输入框为数字、英文、。、@
 * @param textid 所要判断的对象
 */
UntilCommon.checktextmail = function (textid, charnum) 
{
var strTemp =textid.value.replace(/[^\a-\z\A-\Z0-9\.\@]/g,'');
if(strTemp != textid.value){
textid.value=strTemp;
}
if(charnum != null && textid.value.length > charnum)
{
textid.value=textid.value.substr(0, charnum);
}
};
/**
 * 功能: 验证输入框为数字、英文、。、@
 * @param textid 所要判断的对象
 */
UntilCommon.checktextIP = function (textid, charnum) 
{
var strTemp =textid.value.replace(/[^\a-\z\A-\Z0-9\.\:]/g,'');
if(strTemp != textid.value){
textid.value=strTemp;
}
if(charnum != null && textid.value.length > charnum)
{
textid.value=textid.value.substr(0, charnum);
}
};
/**
 * 功能: 验证输入框为数字、英文
 * @param textid 所要判断的对象
 */
UntilCommon.checktextEn = function (textid, charnum) 
{
var strTemp =textid.value.replace(/[^\a-\z\A-\Z0-9\_]/g,'');
if(strTemp != textid.value){
textid.value=strTemp;
}
if(charnum != null && textid.value.length > charnum)
{
textid.value=textid.value.substr(0, charnum);
}
};
//
UntilCommon.checktextSize = function (textid, charnum) 
{
if(charnum != null && textid.value.length > charnum)
{
textid.value=textid.value.substr(0, charnum);
}
};
/**
 * 功能: 验证输入框为数字
 * @param textid 所要判断的对象
 */
UntilCommon.checktextNum = function (textid, charnum) 
{
var strTemp =textid.value.replace(/[^0-9]/g,'');
if(strTemp != textid.value){
textid.value=strTemp;
}
if(charnum != null && textid.value.length > charnum)
{
textid.value=textid.value.substr(0, charnum);
}
};
/**
 * 功能: 验证输入框为数字和.
 * @param textid 所要判断的对象
 */
UntilCommon.checktextFloat = function (textid, charnum) 
{
var strTemp =textid.value.replace(/[^0-9\.]/g,'');
if(strTemp != textid.value){
textid.value=strTemp;
}
if(charnum != null && textid.value.length > charnum)
{
textid.value=textid.value.substr(0, charnum);
}
};
/**
 * 功能: 显示提示消息
 * @param vtitle 提示框标题
 * @param vmsg 提示消息内容
 */
UntilCommon.showMessage = function(vtitle,vmsg)
{
$.messager.show({title:vtitle,msg:vmsg,timeout:5000,showType:'slide'});
};
/**
 * 功能: 显示加载信息
 * @param msg 加载信息内容
 */
UntilCommon.ShowDataLoadding = function (msg)
{
$('#showloagingMsg').html(msg);
$('#showloaging').show();
};
/**
 * 功能: 隐藏加载信息
 */
UntilCommon.HideDataLoadding = function ()
{
$('#showloaging').hide();
};
//判断输入键是否有效
UntilCommon.IsUseKeyCode =function(keycode){
if(keycode == 13 //回车
 ||(64<keycode && keycode< 91) //A~Z
 ||(47<keycode && keycode< 58) //0~9
 ||(95<keycode && keycode< 106) //小键盘 ~9
 ){
return true;
}
return false;
};
//获取系统常量信息
SystemData.browserType = UntilCommon.getOs();
SystemData.IsIE = SystemData.browserType =="MSIE";
SystemData.VersionIE = UntilCommon.GetversionIE();

2024年10月26日

纯CSS如何禁止用户复制网页的内容?

原文链接 ==>http://sylblog.xin/archives/70

前言

2024年10月26日

HTML怎么防止用户复制?（html怎么防止用户复制乱码）

在HTML中无法完全防止用户复制文本，因为HTML的主要目的是描述文档的结构和内容，而不是控制用户的行为。但是，你可以采取以下一些措施来降低用户复制的可能性：

禁用文本选择：

你可以使用CSS的user-select属性禁止用户选择文本。例如，可以使用以下代码来禁止选择文本：

四时宝库

程序员的知识宝库

企业网页推广出现移动端兼容问题怎么解决?分享几个实用的css代码

几道常考的前端面试题（前端经典面试题及答案）

盒子水平垂直居中有几种方式

小猿圈分享-如何做一个听话的输入框

网页出现禁止复制黏贴的内容如何破解

程序员-私活:修改网页元素，网页自动化处理

Cascadea for Mac(修改网站外观的CSS编辑器)v2.1激活版

css禁止文字被选中（css禁止复制文字）

Javascript常用工具类（js常用工具库）

纯CSS如何禁止用户复制网页的内容?

前言

HTML怎么防止用户复制?（html怎么防止用户复制乱码）