Article Detail

常用html、demo代码

暗网网址导航hidden wikihttp://zqktlwi4fecvo6ri.onion HTML特殊字符编码对照表 console.log(allnum)...

HTML 阅读 2804.6万 14 分钟阅读 2015-10-15 14:45

暗网网址导航hidden wiki

http://zqktlwi4fecvo6ri.onion

HTML特殊字符编码对照表

console.log(allnum);
javascript:;
vertical-align:middle;
strconv=yes+js
echo str_ireplace("WORLD","Shanghai","Hello world!");//不区分大小写
<a href="javascript:scroll(0,0)">返回顶部</a>
jquery多个节点绑定同一个事件
$('#begin,#end') 用逗号隔开

target="_blank"
index.php?g=Admin&m=Login
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
 location.href = url;

autocomplete="off"
<form name="input" action="html_form_action.asp" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="提交" />
<input type="button" value="提交">
</form>

$.ajax({
	type: "POST",
	url:'/index.php?g=User&m=Post&a=Message&ajax=ajax',
	data:$('#myform').serialize(),
	error: function(request) {
		alert("提交失败");
	},
	success: function(data) {
		if(data>0){
			alert('留言提交成功！');
			location.reload();
		}else alert("提交失败");
		
	}
});

function ajaxpost(tel,pass){
    $.ajax( {
        url:"/index.php/Home/Register/is_login.html", 
        type: "post", 
        data:"tel="+tel+"&pass="+pass,
        //dataType: "json",
        //cache: false,
        //async: false,
        beforeSend: function(){
         // Handle the beforeSend event
        },
        success: function(data){
            
        }
    });
}

 <a href="javascript:scroll(0,0)">顶部</a> <a href="#copy">底部</a>

<meta charset="UTF-8" />

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="icon" href="/favicon.ico">
<meta name="keywords" content="常用代码">
<meta name="description" content="isWTF's blog!!">
</head>

<body>

</body>

</html>

$.ajax( {
	url: '/index.php?s=/addon/WeiSite/WeiSite/ForgetPassword/tel/'+shoujihao+'/codeddd/'+codeddd+'.html', //这里是静态页的地址
	type: "GET", //静态页用get方法，否则服务器会抛出405错误
	//dataType: "json",
	//cache: false,
	//async: false,
	beforeSend: function(){
	 // Handle the beforeSend event
	},
	success: function(data){
		//var result = $(data).find("另一个html页面的指定的一部分").html();
	}
});

<link rel="apple-touch-icon" size="72x72" href="/icon-ipad.png" />
<link rel="apple-touch-icon" size="114x114" href="/icon-iphone4.png" />
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<meta name="keywords" content="常用代码">
<meta name="description" content="isWTF's blog!!">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />

I('post.id',0,'intval'); // 用intval过滤$_POST['id']
I('get.title','','strip_tags'); // 用strip_tags过滤$_GET['title']

移动端UC /QQ 浏览器的部分私有Meta 属性
下面就说下移动端UC /QQ 浏览器的部分私有Meta 属性，都来自其开发者文档（UC开发者中心，左下一doc文档，QQ浏览器）。

UC 浏览器的部分私有Meta 属性
设置屏幕方向为横屏还是竖屏
<meta name="screen-orientation" content="portrait|landscape">
设置是否全屏，yes表示强制浏览器全屏
<meta name="full-screen" content="yes">
缩放不出滚动条
<meta name="viewport" content="uc-fitscreen=no|yes"/>
设置no后用户缩放与标准浏览器缩放一直，设置为yes后，用户缩放金放到图片和文字，不出现横向滚动条。
排版
<meta name="layoutmode" content="fitscreen|standard" />
  fitscreen模式简化页面处理，适合页面阅读节省流量，standard模式和标准浏览器一致；一旦设置layoutmode meta后，用户使用浏览器提供的的排版模式选项将会无效。
夜间模式
<meta name="nightmode" content="enable|disable"/>
nightmode的值设置为disable后，即使用户使用浏览器的夜间模式，页面的表现也仍然是非夜间模式。
强制图片显示
<meta name="imagemode" content="force"/>
 UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode， 不影响子页面。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个
<img src="..." show="force">
应用模式
<meta name="browsermode" content="application"/>
使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。

QQ 浏览器x5内核定制标签说明
设置屏幕方向
<meta name="x5-orientation" content="portrait|landscape" />
设置全屏
<meta name="x5-fullscreen" content="true" />
设置屏幕模式
<meta name="x5-page-mode" content="app" />

对于控制全屏的meta 标签，UC 跟QQ 处理的方式稍有不同：区别在于处理系统状态栏，UC 是直接覆盖系统状态栏，而QQ 仍然保留之。

$("p").css("color","red");
//同时设置字体大小和背景色   
$("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"});
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

header('Content-Type:text/html;charset=utf-8'); //避免输出乱码 

<img  title="点击刷新" src="cache/yzm.php" align="absbottom" onclick="this.src='cache/yzm.php?'+Math.random();" />

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

<link rel="stylesheet" href="http://lizhenqiu.com/templates/default/style.css" type="text/css" media="screen">

<script type="text/javascript">jQuery(".slideTxtBox").slide(); </script>

Yourphp手册
简单文本编辑器

data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;font-family:georgia;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;"> lizhenqiu.com

Chrome提供了一个简单的方法。首先，按“F12”打开控制台，然后输入：

document.designMode = "on"

添加到收藏夹URL填写下面的即可在当前页面点击收藏夹编辑页面

javascript:(function(){document.designMode = "on" })();

接下来，你就可以编辑屏幕上的文本内容了。

编辑器

data:text/html, <html contenteditable>

如果你想找回不小心关闭的Tab页面，只需要同时按下“Control"（Mac用户请按“Command”）、“Shift"和“T”。

js随机数

function getRandom(n){
        return Math.floor(Math.random()*n+1)
        }

top.location.href 和 localtion.href 有什么不同

top.location.href=”url”

在顶层页面打开url（跳出框架）

self.location.href=”url”

仅在本页面打开url地址

parent.location.href=”url”

在父窗口打开Url地址

this.location.href=”url”

用法和self的用法一致
if (top.location == self.location) 判断当前location 是否为顶层来禁止frame引用　如果页面当中有自定义的frame的话，也可以将parent self top换为自定义frame的名称效果就是在自定义frame窗口打开url地址

实际中可能这样使用

if(top !== self){             top.location.href = location.href;         }

禁止frame引用
以下是从网上找到的一个例子，不是很直观，我加了上面那三行代码，可以先去掉，再加上，看一下效果，就很清楚了以下是top.htm 代码

<script language=javascript> function rs(){

        if(top !== self){             top.location.href = location.href;         }   parent.left.location.href="top.htm" parent.bot.location.href="top.htm" } < /script> < input type=button name=name value="ksdj" onclick=rs();>

以下是一个随意文件名的htm文件:

<FRAMESET COLS="150,*"> < FRAME SRC="left.htm" name=left> < FRAMESET ROWS="150,*"> < FRAME SRC="top.htm" name=top> < FRAME SRC="bot.htm" name=bot> < /FRAMESET> < /FRAMESET>

你自己试试,我想你要的可能就是这样的效果!

top表示主窗口，location表示当前窗口，如果你的文件只有一个框架，没有iframe和frmaeset，那么是完全一致的，没有区别。

top.location是在顶层frame中打开新页
window.location是在当前frame中打开新页
parent.location 在当前窗口的父窗口打开Url地址

<select id="isAudit" name="isAudit"> 
<option value="2">全部</option> 
<option value="1" selected = "selected">通过</option> 
<option value="0">未通过</option> 
</select>

修改ID增加ID属性，修改class同理
$('.div').attr('id','newid');

如果是给标签添加class样式可以这样
$('#div').addClass('css类名');

strtotime("-1 week")， strtotime("-n days");可以很方便的获取当前日期的前n天、周、月的时间戳

舒适网页配色方案
 px像素转换rem单位工具

Comments 评论区

广西南宁市 2017-09-11 17:21

魔性催眠图形
canvas的ellipse是个很棒的方法，可惜只有chrome和Opera支持
把ellipse中参数随便改改就会出现神奇的效果

<!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-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body{overflow:hidden}
</style>
<body>
  <canvas></canvas>
</body>
</html>
<script>
    var canvas=document.querySelector('canvas'),
        ctx=canvas.getContext('2d');

    canvas.width=window.innerWidth;
    canvas.height=window.innerWidth;

    ctx.lineWidth=1;
    ctx.strokeStyle='black';
    var time=0;

    function draw(){
        time+=0.01;
        ctx.clearRect(0,0,window.innerWidth,window.innerHeight);
        ctx.beginPath();
        for(i=120;i--;)
            ctx.ellipse(window.innerWidth/2,window.innerHeight/2,i*2,100*Math.sin(time+i/50)+100,2*Math.sin(time/4)+i*2,time,6+time)
        ctx.stroke();
        requestAnimationFrame(arguments.callee);
    }

    draw();
</script>

#⁰

广西南宁市 2017-09-18 16:24

js判断当前页面是否激活标签
JS判断用户是否正在浏览当前网页标签

<script>
	//网页当前状态判断
	var hidden, state, visibilityChange,otitle; 
	if (typeof document.hidden !== "undefined") {
		hidden = "hidden";
		visibilityChange = "visibilitychange";
		state = "visibilityState";
	} else if (typeof document.mozHidden !== "undefined") {
		hidden = "mozHidden";
		visibilityChange = "mozvisibilitychange";
		state = "mozVisibilityState";
	} else if (typeof document.msHidden !== "undefined") {
		hidden = "msHidden";
		visibilityChange = "msvisibilitychange";
		state = "msVisibilityState";
	} else if (typeof document.webkitHidden !== "undefined") {
		hidden = "webkitHidden";
		visibilityChange = "webkitvisibilitychange";
		state = "webkitVisibilityState";
	}
	otitle=document.title;
	// 添加监听器，在title里显示状态变化
	document.addEventListener(visibilityChange, function() {
		//document.title = document[state];
		//console.log(document.visibilityState);
		if(document.visibilityState=='hidden') document.title = '(；°○° ) (x___x) 被离开';//(昏倒) // 被离开 // '+otitle;
		else document.title = otitle;
	}, false);
	//初始化页面状态
	//document.title = document[state];
	
		/*var hiddenProperty = 'hidden' in document ? 'hidden' :    
			'webkitHidden' in document ? 'webkitHidden' :    
			'mozHidden' in document ? 'mozHidden' :    
			null;
		var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
		var onVisibilityChange = function(){
			if (!document[hiddenProperty]) {    
			   // console.log('页面非激活');
			   
			}else{
				document.title ='页面非激活';
				//console.log('页面激活')
			}
		}
		document.addEventListener(visibilityChangeEvent, onVisibilityChange);*/


</script>

#⁰

广西南宁市 2017-09-18 16:58

谷歌浏览器更新到最新版本后发现一些js特效动画代码无效了，比如返回顶部

$("body").animate({"scrollTop":top})

修改为，将html和body这两者都加上就可以了

$("html,body").animate({"scrollTop":top})

#⁰

广西南宁市 2017-09-19 10:18

chrome table + svg，刷新一闪一闪的
解决方法，给svg高度和字体大小一致

<style>	
	embed{font-size: 25px;height: 25px;}
</style>

广西南宁市2017-09-19 10:21:00

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

    table{
        height: 50px;
        background: #000;
        color: white;
        font-size: 25px;
    }
</style><style>	
	embed{font-size: 25px;height: 25px;line-height:25px;}
</style>
<body>

    <table width="100%">
        <tr>
            <th>
                <embed src="http://23.105.205.22/search.svg" type="image/svg+xml" />
            </th>
        </tr>
    </table>


</body>
</html>

#⁰

广西南宁市 2017-09-19 11:51

div设置overflow-y:scroll时怎么阻止body页面的滚动？
js body滚动冒泡
js滚动冒泡

对局部需要滚动条的元素，尝试使用这个css属性：
-webkit-overflow-scrolling: touch;

两种方法，1.设置body：fixed.2.设置body height:100%,设置body的子元素div高度100%，overflow：hidden

#⁰

广西南宁市 2017-09-26 09:08

常见的兼容问题及解决方法

1.        行内元素或行内块元素在代码换行写时会出现左右的间隙，解决方法如下
  1)        将代码写在一行上
  2)        给父元素设置font-size：0，注意，子元素的字体大小需要单独设置
  3)        给元素设置浮动
2.        当图片被放置于块元素中时，图片下方有间隙，解决方法如下
  1)        给图片设置display:block;
  2)        给图片设置vertical-align：top、middle、bottom
  3)        给父元素设置font-size：0
  4)        给图片设置浮动，同时清除父元素的塌陷
  5)        给父元素加height
3.        该图片加超链接后，在IE浏览器下面图片有边框，解决方法如下
  1)        给图片设置border：none
4.        给图片加超链接，然后设置鼠标移过超链接时显示边框的效果，但是发现边框只显示一半，解决办法如下
  1)        给超链接设置display：block，同时要解决图片下方有缝隙的问题
5.        行内块元素上下错位问题，解决方法如下
  1)        给行内块元素设置vertical-align：top、middle、bottom
  2)        将元素浮动
6.        在不同浏览器下面元素的默认的margin和padding的值不相同，解决方法如下
  1)        *{margin:0;padding:0}
7.        上下的两个元素，默认的间距为较大的margin值，但是如果两个元素设置了浮动，那么这两个元素的间距就是margin之和
8.        父子关系的两个元素，如果给子元素设置float：left，且给子元素设置margin-left，那么在IE6下面margin-left加倍，解决方法如下
  1)        给子元素设置：display：inline
9.        父子关系的两个元素，如果给父元素设置了text-align：center，那么在IE7及以下版本中，子元素会水平居中显示，但是在谷歌和火狐及IE高版本浏览器中子元素是不居中显示的，如果要子元素居中显示，解决方法如下：
  1)        子元素设置margin：0   auto
10.        父子关系的两个元素，当给子元素设置margin-top时，父元素会同步下移，即子元素的margin-top实际上加到了父元素身上，解决方法如下：
  1)        给子元素加margin-top的同时，给父元素加边框
  2)        给子元素加margin-top的同时，给父元素加paddint-top：0.1px；
  3)        给子元素加margin-top的同时，给父元素设置浮动
  4)        不给子元素加margin-top，给父元素加padding-top
11.        两个兄弟元素，如果第一个元素设置了浮动，那么在IE6下面两个元素会在一行显示，且中间会有3px间隙，解决方法如下：
  1)        给第二个元素也设置浮动
12.        一个元素如果没有设置height，那么这个元素的高度为自适应高度，此时如果没有内容，元素的高度会为0，如果有内容，那么元素的高度会被撑开。如果想做出如下效果：没有内容，元素有一个最小的高度，有内容元素的高度有内容撑开，可以给元素加min-height（该属性的作用就是给元素设置最小高度），但是需要注意的问题是IE6中不识别min-height，解决方法如下：
  1)        给元素设置如下属性div{height:auto!important;height:200px;min-height:200px}，属性说明
        height：auto！important，该属性的作用是让div的高度在所有浏览器中都是自适应高度，即高度有内容撑开
        height：200px，该属性的作用是让IE6浏览器中有最小高度，因为IE6不识别min-height，所以只能用height，不用担心属性值覆盖问题，因为上一条属性中有！important
        min-height：200px，该属性的作用是解决除IE6之外的所有浏览器的最小高度问题
13.        元素中内容垂直居中无法使用vertical-align：middle，解决方法如下
  1)        给元素设置行高和高度相同的效果
14.        文本和文本框在垂直方向上没有居中对齐（次现象出现IE8及以前的浏览器），解决方法如下
  1)        给文本框设置vertical-align：middle，注意的是，该方法只解决了文本框和提示文字的垂直关系，但是文本框里面的内容的垂直对齐方式并没有解决（即在IE低版本中文本框中的内容靠上显示），解决方法是给文本框设置行高和高度相同
15.        cursor：hand属性在谷歌、火狐、IE高版本中不以手的形式显示，解决方法如下
  1)        用cursor：pointer替换cursor：hand
16.        当通过给li设置高度调节li的显示效果时，在IE低版本中会发现排版错位问题，解决方法如下
  1)        不要给li设置height，可以通过给li设置line-height的方法来调节li的高度
17.        IE6不允许将:hover加在非超链接元素上，解决方法如下
  1)        适当的用超链接将内容包含起来，然后给超链接设置:hover效果
18.        清除浮动时使用.clearFloat类，IE6下面不起作用，原因是clearFloat所在元素没有宽度，解决方法：
  1)        给父元素一个固定宽度
  2)        给父元素加zoom:1
19.        清除浮动时使用overflow：hidden，IE6下面不起作用，原因是父元素没有固定宽度，解决方法
  1)        给父元素加一个固定宽度
  2)        给父元素加zoom:1

#⁰

广西南宁市 2017-09-26 09:09

PHP 生成毫秒时间戳
PHP的time()函数生成当前时间的秒数，但是在一些情况下我们需要获取当前服务器时间和GMT(格林威治时间)1970年1月0时0分0秒的毫秒数，与Java中的currentTimeMilis()函数一样，觉得以下的函数最合适，特记录下来。

public function getCurrentMilis() {

　　　　$mill_time = microtime();
　　　　$timeInfo = explode(' ', $mill_time);
　　　　$milis_time = sprintf('%d%03d',$timeInfo[1],$timeInfo[0] * 1000);

　　　　return $time;

　　}

#⁰

广西南宁市 2017-09-29 15:53

php表单常用正则表达式

function is_email($str){ 
//检验email 
return preg_match("/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/", $str); 
} 

function is_url($str){ 
//检验网址 
return preg_match("/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"]) 

*$/", $str); 
} 

function is_qq($str){ 

//检验qq 
return preg_match("/^[1-9]\d{4,8}$/", $str); 
} 

function is_zip($str){ 

//检验邮编 
return preg_match("/^[1-9]\d{5}$/", $str); 
} 

function is_idcard($str){ 

//检验身份证 
return preg_match("/^\d{15}(\d{2}[A-Za-z0-9])?$/", $str); 
} 

function is_chinese($str){ 

检验是否是中文 
return ereg("^[".chr(0xa1)."-".chr(0xff)."]+$",$str); 
} 

function is_english($str){ 

//检验是否是英文 
return preg_match("/^[A-Za-z]+$/", $str); 
} 

function is_mobile($str){ 

//检验是否是手机 
return preg_match("/^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/", $str); 
} 

function is_phone($str){ 

//建云那是否是电话 
return preg_match("/^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/", 

$str); 
} 

function is_safe($str){ 
return (preg_match("/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|. 

{0,5})$|\s/", $str) != 0); 
} 
}

广西南宁市2017-09-29 15:54:23

php 多维数组排序
*php版本5.5以上

$data = array_column($row, 'id');//id、排序的字段名， $row 带排序数组
array_multisort($data, SORT_DESC, $row);//SORT_DESC 倒序  SORT_ASC 升序

#⁰

广西南宁市 2017-10-11 17:48

图片延迟加载、懒加载原理及代码实现

<img class="lazy" alt="" data-src="http://wd.geilicdn.com/vshop.jpg" />
<script>
$(window).scroll(function() {//窗口滚动的时候（鼠标滚轮的时候。。）
  $('img').each(function() {//把以下的方法作用到每一个img标签，可自行加限定条件
    var $imgSrc = $(this).attr('data-src');//获取每张图片对应地址
    var $imgTop = $(this).offset().top;//获取每张图片对应距离document顶部的高度
    var scrollT = $(window).scrollTop();//获取滚轮滚动的距离
    var halfDoc = $(window).height();//获取浏览器窗口可视高度
    var ifElse = (scrollT+halfDoc)>=$imgTop;//如果滚动距离加上窗口可视高度大于该图片距离document顶部的高度
    var _this=this;//保存this的作用域以便于在其它作用域上使用这个作用域
    if(ifElse){//如果条件成立
      setTimeout(function(){$(_this).attr('src',$imgSrc);},1000);//把图片的src地址改成data-src的值（前面已经获取了）
    }
  })//end object 'img'
})//end object window
</script>

#⁰

广西南宁市 2017-10-16 09:55

js 获取当前年月日时分秒星期

$("#aa").click(function () {
var date = new Date();
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.date = date.getDate();
this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()];
this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
var currentTime = "现在是:" + this.year + "年" + this.month + "月" + this.date + "日 " + this.hour + ":" + this.minute + ":" + this.second + " " + this.day;
alert(currentTime);
});

#⁰

Administrator 2017-10-18 17:03

【html】实现网页加载图片先显示模糊后清楚清晰的图
打开一些网上的相册，在加载照片的时候，如果网速比较慢加载慢的话，它会先显示一个类似模糊有点小马赛克的质量比较差的照片，然后慢慢的变为清晰的照片，这样避免了用户在浏览照片的时候页面一片空白的情况，在html中 IMG 有个 lowsrc 属性

img lowsrc="" width="300" height="200" border="0" id="image_operate_13311415863667283"

把图片的缩略图放在lowsrc里面，这样的话因为缩略图是缩小的，按照原图片的比例显示就会有马赛克！
src里填写原图片！
这样的话，原图片比较大，下载的慢，lowsrc的缩略图小加载快，所以会先显示被拉伸的缩略图，等大图下载完成后会显示原图，这样有个时间差，就是出现先由马赛克，然后变清晰的效果！
注意，测试的时候最好在远程服务器上，这样效果比较明显，本机的话，下载太快了，可能感觉不出来！

#⁰

Administrator 2017-10-19 17:10

<a href="tel:400-888-6633">拨打电话<a>
<a href="sms:19956321564">发送短信<a>
<a href="mailto:mail@mail.com">发送邮件<a>

广西河池市宜州市2018-03-03 15:55:32

IE edge浏览器强制修改了电话样式，办法解决

<meta content="telephone=no" name="format-detection">

加个meta标签就可以
去掉Egde浏览器对电话号码的默认样式
win10 edge 关闭电话号码识别
Microsoft Edge 浏览器会把某些IP地址强制识别为电话号码

#⁰

Administrator 2017-10-19 17:11

判断用户设备

var u = navigator.userAgent.toLowerCase();;
        if (u.indexOf('android') > -1 || u.indexOf('linux') > -1) { 
              //安卓手机
        } else if (u.indexOf('iphone') > -1) {
             //苹果手机
        } else if (u.indexOf('windows phone') > -1) {
             //winphone手机
        }

Administrator2017-10-19 17:12:01

关于使用overflow：hidden，在ios下卡顿的问题解决

在css 属性上添加 -webkit-overflow-scrolling: touch;

Administrator2017-10-19 17:12:59

单行文本溢出显示省略号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .one{
            width: 300px;
            overflow: hidden;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;  }
    </style>
</head>
<body>
    <div class="one">
        哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,
    </div>
</body>
</html>

多行文本溢出显示省略号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .one{
            width: 300px;
            display: -webkit-box;   
            -webkit-box-orient: vertical;   
            -webkit-line-clamp: 2;   
            overflow: hidden;  
        }
    </style>
</head>
<body>
    <div class="one">
        哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,
    </div>
</body>
</html>

#⁰

广西南宁市 2017-10-25 15:29

让textarea不可拖拽
禁止textarea不可拖拽改变大小
禁止文本域textarea可拖拽的方法
让textarea没有黄框（浏览器默认输入框边框）且不能拖拽

textarea{outline:none;resize:none;}

#⁰

广西南宁市 2017-10-28 10:50

html 使表格随着内容自动适应宽度

td  
{  
 white-space: nowrap;  
}

广西南宁市2017-10-28 10:50:48

解决此问题的方法是：在定义表格时，追加style="table-layout:fixed;"，这样做可以使半角连续字符强制换行，不至于撑破列宽。需要注意的是，使用此参数后，不要轻易在tr(行)或td(列)中加入height属性，会使table不再被内容撑出适合的高度。

<table width="95%" border="1" cellpadding="2" cellspacing="1" style="table-layout:fixed;">

广西南宁市2017-10-28 10:51:07

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

#⁰

广西南宁市 2017-10-28 10:51

巧用notepad++正则表达式，批量修改删除超链接

<a href=".*?">

#⁰

广西南宁市 2017-10-28 11:32

iphone浏览器不支持blur事件解决办法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" href="images/appicon.png">
<title>Website</title>
<style type="text/css">
#box {
	width: 80%;
	height: 120px;
	background: orange;
}
#box.visited {
	width: 100%;
	background: red;
}
#box.lose {
	width: 80%;
	background: orange;
}
</style>
</head>

<body>

<input id="input" name="" value="" type="">
<div id="box"></div>

<script type="text/javascript">

/*获取元素*/
var box = document.getElementById("box");

/*获取焦点 失去焦点*/
function objBlur(id, time) {
	if (typeof id != "string") throw new Error("objBlur()参数错误");
	var obj = document.getElementById(id),
		time = time || 300,
		docTouchend = function(event) {
			if (event.target != obj) {
                console.log(event.target);
				setTimeout(function() {
					obj.blur();
					if (box) { //失去焦点->给box添加id为"lose"
						box.className = "lose";
					}
					document.removeEventListener("touchend", docTouchend, false); //失去焦点->隐藏键盘
				}, time);
			}
		};
	if (obj) {
		obj.addEventListener("focus", function() {
			if (box) { //获取焦点->给box添加id为"visited"
				box.className = "visited";
			} //获取焦点->显示键盘
			document.addEventListener("touchend", docTouchend, false);
		}, false);
	} else {
		throw new Error("objBlur()没有找到元素");
	}
}

/*判断移动设备*/
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
	var input = new objBlur("input");
	input = null;
}

</script>
</body>
</html>

#⁰

广西南宁市 2017-10-28 11:32

javascript addEventListener中的 e.target和this的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="box">
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
    </ul>
</div>
<script>
    var oDiv= document.getElementById('box');

    oDiv.addEventListener('click',function (e){
        //event.target表示发生点击事件的元素
        //this 始终指向绑定事件的元素也就是div   和even.currentTarget相等
        var l = e.target;
        if (l) {
            alert(l.innerHTML);
        }
    })

</script>
</body>
</html>

#⁰

广西南宁市 2017-10-28 11:34

document load 与document ready的区别
页面加载完成有两种事件
1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
2.$(document).ready()是当DOM文档树加载完成后执行一个函数（不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件

#⁰

广西南宁市 2017-10-28 11:38

利用indexOf()方法进行数组去重的实例

    var arr = ['32','23','4','12','4','35','64','4','35','64']//原数组
    var newarr = []//定义一个新数组
    for (var i = 0; i < arr.length; i++) {
      if (newarr.indexOf(arr[i])==-1) { //在新数组中查找有没有这个数，如果等于-1说明没找到
        newarr.push(arr[i])        
      }
    }
    document.write(newarr);

#⁰

第 11 / 14 页 当前展示 201 - 220 条，共 279 条评论

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。