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-06-07 16:39

js获取剪贴板内容【仅兼容ie】

<html>
<head>
    <title>读取剪贴板内容</title>

    <script type="text/javascript">
        function getClipboard() {
            if (window.clipboardData) {
                return (window.clipboardData.getData('Text'));
            }
            else if (window.netscape) {
                netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
                var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
                if (!clip) return;
                var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
                if (!trans) return;
                trans.addDataFlavor('text/unicode');
                clip.getData(trans, clip.kGlobalClipboard);
                var str = new Object();
                var len = new Object();
                try {
                    trans.getTransferData('text/unicode', str, len);
                }
                catch (error) {
                    return null;
                }
                if (str) {
                    if (Components.interfaces.nsISupportsWString) str = str.value.QueryInterface(Components.interfaces.nsISupportsWString);
                    else if (Components.interfaces.nsISupportsString) str = str.value.QueryInterface(Components.interfaces.nsISupportsString);
                    else str = null;
                }
                if (str) {
                    return (str.data.substring(0, len.value / 2));
                }
            }
            return null;
        }
        function readClipboardData() {
            var str = getClipboard();
            var len = str.split("\n");//获取行数

            document.getElementById("txtContent").value = str;
        }

    </script>

</head>
<body>
    <input type="button" value="读取剪贴板内容" onclick="readClipboardData();" />
    <br />
    <textarea rows="20" cols="60" id="txtContent"></textarea>
</body>
</html>

#⁰

广西南宁市 2017-06-08 11:36

图片替换onerror

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>onerror</title>
</head>
<body>
<p>这是没写图片路径的</p>
<img src=""  alt="加载失败">
<p>这是替代处理的</p>
<img src="" onerror="nofind()" alt="加载失败">
<script type="text/javascript">
	function nofind(){

var img=event.srcElement;

img.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1496852181750&di=eb61cfabeed9ba05aa50803fa8d6bc3c&imgtype=0&src=http%3A%2F%2Fmvimg1.meitudata.com%2F56251eda8fc951992.jpg";

img.onerror=null; //控制不要一直跳动，如果不置空则在替代图片不存在时会一直执行，最后报错，死循环

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

#⁰

广西南宁市 2017-06-08 11:38

伪元素几种用法

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>伪元素</title>
</head>
<body>
<style>
	.trangle {
		content: " ";
		width: 0;
		height: 0;
		border: 10px solid transparent;
		border-top-color: #333;
	}
</style>
<h3>三角形下拉箭头</h3>
<div class="trangle"></div>
<style>
	.dialog {
		position: relative;
		width: 150px;
		height: 36px;
		border: black 1px solid;
		border-radius: 5px;
		background: rgba(245, 245, 245, 1)
	}
	
	.dialog:before, .dialog:after {
		content: "";
		position: absolute;
		top: 8px;
		width: 0;
		height: 0;
		border: 6px transparent solid;
	}
	
	.dialog:before {
		left: -12px;
		border-right-color: rgba(0, 0, 0, 1);
	}
	
	.dialog:after {
		left: -11px;
		border-right-color: rgba(245, 245, 245, 1);
	}
</style>
<h3>对话框的三角形</h3>
<div class="dialog"></div>
<style>
	.mask-box {
		width: 300px;
		height: 200px;
		margin-top: 20px;
		padding: 20px;
		background: url(http://sjbz.fd.zol-img.com.cn/t_s320x510c/g5/M00/00/04/ChMkJ1fJWJyIQQ3LAAZwxw7cwswAAU-KQJ6sCQABnDf642.jpg) #FB5E23;
	}
	
	.mask-box .mask {
		position: relative;
		width: 100%;
		height: 100%;
	}
	
	.mask-box .mask:before {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, .5);
	}
	
	.mask-box .mask span {
		display: block;
		position: inherit;
		z-index: 1;
		padding-top: 90px;
		text-align: center;
		font-weight: 900;
	}
</style>
<h3>遮罩层</h3>
<div class="mask-box">
	<div class="mask">
		<span>遮罩层效果</span>
	</div>
</div>
<style>
	.effect {
		position: relative;
		display: inline-block;
		margin-left: 30px;
		padding: 10px;
		font-size: 30px;
	}
	
	.effect:hover::before, .effect:hover::after {
		position: absolute;
	}
	
	.effect:hover::before {
		content: "\5B";
		left: -20px;
	}
	
	.effect:hover::after {
		content: "\5D";
		right: -20px;
	}
</style>
<h3>符号-动态效果</h3>
<div class="effect">鼠标悬停看效果</div>
</body>
</html>

#⁰

广西南宁市 2017-06-08 11:42

给一个div绑定两个动画效果
我所需要的效果是 —— 下拉刷新时的旋转图标，旋转一周由无到有，再继续无限旋转。
也就是给它绑定两个动画，一是图标旋转，透明度由0变为1，二是图标无限旋转。

下面是代码（为了避免图片引入，旋转图标用了其他代替）：

<!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>
<body>
  <div>
    <span>></span>
  </div>
</body>
<style>
  /*这些是基础样式*/
div span {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  margin: 10% auto;
  border-radius: 50%;
  font-size: 20px;
  color: #ffffff;
  background: #8CCC66;
}
  /*下面是动画样式*/
div span {
  animation-name:animation1, animation2;    /*绑定到选择器的动画名称*/
  animation-duration:1s, 1s;                /*完成动画所花费的时间*/
  animation-timing-function:linear, linear; /*动画的速度曲线*/
  animation-delay:0, 1s;                    /*动画开始之前的延迟*/
  animation-iteration-count:1, infinite;    /*动画应该播放的次数 infinite是无限循环*/
}
@-webkit-keyframes animation1 {
  0%{-webkit-transform:rotate(0);opacity: 0;}
  50%{-webkit-transform:rotate(180deg);opacity: .3;}
  100%{-webkit-transform:rotate(360deg);opacity: 1;}
}
@keyframes animation1 {
  0%{transform:rotate(0);opacity: 0;}
  50%{transform:rotate(180deg);opacity: .3;}
  100%{transform:rotate(360deg);opacity: 1;}
}
@-webkit-keyframes animation2 {
  0%{-webkit-transform:rotate(0)}
  50%{-webkit-transform:rotate(180deg)}
  100%{-webkit-transform:rotate(360deg)}
}
@keyframes animation2 {
  0%{transform:rotate(0)}
  50%{transform:rotate(180deg)}
  100%{transform:rotate(360deg)}
}
</style>
</html>

#⁰

广西南宁市 2017-06-13 10:04

不确定高度的内容能相对左邻右舍和父元素垂直居中提供一个思路

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>不确定高度的内容能相对左邻右舍和父元素垂直居中提供一个思路</title>
		<style type="text/css">
			.section{
				width: 100%;
				overflow: hidden;
				font-size: 0;  /*这里为0是因为子元素inline-block 之间可能有空格*/
				background-color: #eee;
			}
			.picture{
				width: 33.333%;
				vertical-align: middle;
				display: inline-block;  /*float 就是block布局 vertical-align不起作用*/
			}
			.picture img{
				width: 100%;
			}
			.text{
				width: 33.333%;
				vertical-align: middle; /*两个都要加*/
				display: inline-block;
				padding: 0 20px;
                box-sizing: border-box;
				background-color: #ccc;
			}
			.text h2{
				font-size: 20px;
				line-height: 48px;
				margin: 0;
			}
			.text p{
				font-size: 14px;
				line-height: 22px;
				margin: 0;  /*谷歌的-webkit-margin-after 和 -webkit-margin-before很友（tao）好（yan）呀*/
			}
		</style>
	</head>

	<body>
		<div class="section">
			<div class="picture"><img src="http://sucai.epweike.com/uploadfile/2014/0210/thumb_500_332_20140126114608129.jpg" alt="" /></div>
			<div class="text">
				<h2>DIV CLASS=TEXT</h2>
				<p>这里是一个<strong>字数长度不确定</strong>的段落，到底有多少个字我也不知道，有几行我也不清楚，高度是随意的，但是我依然希望他能相对于图片垂直剧中，随时修改文字都可以。但是高度还是不要大于左右两个图片的高度吧，否则也没意义呀。ps：图片来源于网络</p>
			</div>
<!--左右都有-->
<div class="picture"><img src="http://sucai.epweike.com/uploadfile/2014/0210/thumb_500_332_20140126114608129.jpg" alt="" /></div>
		</div>
	</body>

</html>

#⁰

广西南宁市 2017-06-13 10:10

原生js尝试一个循环绑定和dataset方法输出index

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>原生js尝试一个循环绑定和dataset方法输出index</title>
		<style type="text/css">
			li {
				background-color: #ddd;
				padding: 8px;
				margin: 18px 0;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<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>       
			<li>第7个li</li>
		</ul>
		<script>
			var cc = document.getElementsByTagName('li');
			for(var i = 0; i < cc.length; i++) {
				cc[i].dataset.user = i;  //添加index
				cc[i].onclick = function(){  //循环绑定click
					alert("Index: "+this.dataset.user);
				}
			}
		</script>
	</body>

</html>

#⁰

广西南宁市 2017-06-13 10:21

原生js，获取url ？号 #号后的对应键值对

<!DOCTYPE html>
<html>
<head>
	<title>获取url？#号后面键值对</title>
</head>
<body>
<script type="text/javascript">
	 getUrlParam=function (name) {
           var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
           var r = window.location.search.substr(1).match(reg);
            if (r != null) {
            	return unescape(r[2])
            }else{
            	return null;
            }
             
        }
    getUrlHash= function (name) {
           var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
           var r = window.location.hash.substr(1).match(reg);
            if (r != null) {
            	return unescape(r[2])
            }else{
            	return null;
            }
            
        }  
    
    alert(getUrlParam("mod"));//xx要获取的键名
    alert(getUrlHash("xx"));
</script>
</body>
</html>

#⁰

广西南宁市 2017-06-13 15:32

html input的file文件输入框onchange事件触发一次失效解决方法
最近在做一个图片上传的功能，出现提交一次后，file输入框的change事件无法再次触发的bug，就是说提交一次后必须刷新才能再次提交，这就坑了~

于是想办法解决它~

在网上找了一些资料，找到这几种方法：

1、替换掉原来的input框
2、remove原来的input框，然后在添加进新的一样的input框

我测试了之后发现可以用下面的方法解决这个问题：
第一步：上传完成后替换掉原来的input框
第二步：重新绑定onchange事件

<script>
        $(document).ready(function () {
            /* jquery handleError版本兼容 */
            jQuery.extend({
                handleError: function (s, xhr, status, e) {
                    if (s.error) {
                        s.error.call(s.context || s, xhr, status, e);
                    }
                    if (s.global) {
                        (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
                    }
                },
                httpData: function (xhr, type, s) {
                    var ct = xhr.getResponseHeader("content-type"),
                        xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0,
                        data = xml ? xhr.responseXML : xhr.responseText;
                    if (xml && data.documentElement.tagName == "parsererror")
                        throw "parsererror";
                    if (s && s.dataFilter)
                        data = s.dataFilter(data, type);
                    if (typeof data === "string") {
                        if (type == "script")
                            jQuery.globalEval(data);
                        if (type == "json")
                            data = window["eval"]("(" + data + ")");
                    }
                    return data;
                }
            });

            /* file输入框变化时调用上传图片函数 */
            $(".myFile").change(function(){
                var objId = $.trim($(this).attr('id'));
                myUpload(objId);
            });
            /* 上传函数 */
            function myUpload(objId)
            {
                var _obj = $('#'+objId);
                var objVal = $.trim(_obj.val());
                if(!objVal){
                    alert('你还未选择图片！');
                    return false;
                }
                $.ajaxFileUpload({
                    type: "post",
                    url: "upload.do",
                    secureuri:false,
                    fileElementId:objId,
                    dataType: "json",
                    success: function(result) {
                        if (result.code == "1") {
                            alert("上传文件成功！");
                        }
                    },
                    complete: function(xmlHttpRequest) {
                        _obj.replaceWith('<input type="file" class="myFile" id="'+objId+'" name="'+objId+'" style="display:none;"/>');
                        $("#"+objId).on("change", function(){
                            myUpload(objId);
                        });
                    },
                    error: function(data, status, e) {
                        alert("文件上传失败!");
                    }
                });
                return false;
            }
        });
    </script>

<script>
$(document).ready(function () {
/* jquery handleError版本兼容 */
jQuery.extend({
handleError: function (s, xhr, status, e) {
if (s.error) {
s.error.call(s.context || s, xhr, status, e);
}
if (s.global) {
(s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
}
},
httpData: function (xhr, type, s) {
var ct = xhr.getResponseHeader("content-type"),
xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0,
data = xml ? xhr.responseXML : xhr.responseText;
if (xml && data.documentElement.tagName == "parsererror")
throw "parsererror";
if (s && s.dataFilter)
data = s.dataFilter(data, type);
if (typeof data === "string") {
if (type == "script")
jQuery.globalEval(data);
if (type == "json")
data = window["eval"]("(" + data + ")");
}
return data;
}
});

/* file输入框变化时调用上传图片函数 */
$(".myFile").change(function(){
var objId = $.trim($(this).attr('id'));
myUpload(objId);
});
/* 上传函数 */
function myUpload(objId)
{
var _obj = $('#'+objId);
var objVal = $.trim(_obj.val());
if(!objVal){
alert('你还未选择图片！');
return false;
}
$.ajaxFileUpload({
type: "post",
url: "upload.do",
secureuri:false,
fileElementId:objId,
dataType: "json",
success: function(result) {
if (result.code == "1") {
alert("上传文件成功！");
}
},
complete: function(xmlHttpRequest) {
_obj.replaceWith('<input type="file" class="myFile" id="'+objId+'" name="'+objId+'" style="display:none;"/>');
$("#"+objId).on("change", function(){
myUpload(objId);
});
},
error: function(data, status, e) {
alert("文件上传失败!");
}
});
return false;
}
});
</script>

#⁰

广西南宁市 2017-06-15 14:32

console.log()可以取代alert()或document.write()，在网页脚本中使用console.log()时，会在浏览器控制台打印出信息。
console.dir()可以显示一个对象所有的属性和方法。

#⁰

广西南宁市 2017-06-23 09:55

两边线条中间文字css垂直居中水平线中部文字效果布局两边等距离宽线

<strong class="line-thru">或</strong>
<style>.line-thru {
	display: block;
	font-size: .875em;
	margin-bottom: 1em;
	position: relative;
	text-align: center;
	width: 100%;
	z-index: 1;
}

.line-thru:before {
	width: 40px;
	height: 10px;
	background-color: #fff;
	content: '';
	margin: -5px 0 0 -20px;
	left: 50%;
	position: absolute;
	top: 50%;
	z-index: -1;
}

.line-thru:after {
	border-bottom: 1px solid #dfe0e6;
	content: '';
	display: block;
	position: absolute;
	top: 49%;
	width: 100%;
	z-index: -2;
}</style>

#⁰

广西南宁市 2017-06-30 14:41

边框颜色跟着字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
 
        .border {width: 1000px;margin: 100px auto;}
        .border li{width: 100px;height: 100px;display: inline-block;margin: 10px;line-height: 100px;text-align: center;position: relative;    -webkit-transform: scale(1); transform: scale(1);}
        .border li::before {
            position: absolute;
            z-index: -1;
            top: -1px;
            right: 0;
            bottom: 1px;
            left: 0;
            content: '';
            opacity: .5;
            border: 2px solid;
            border-radius: 3px;
        }
        .red{color:red;}
        .blue{color:blue;}
        .orange{color:orange;}

    </style>
</head>
<body>
    <div class="border">
        <li class="red">红色</li>
        <li class="blue">蓝色</li>
        <li class="orange">橘色</li>
    </div>


</body>
</html>

#⁰

广西南宁市 2017-06-30 14:45

获取当前省市区

<script src="https://lizhenqiu.com/templates/default/jquery.min.js"></script><script>$.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js',
	function(){ 
	  alert(remote_ip_info.country);//国家  
	  alert(remote_ip_info.province);//省份  
	  alert(remote_ip_info.city);//城市  
});</script>

#⁰

广西南宁市 2017-06-30 14:54

WEB安全色
bootcss官网有个这个页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>web安全色</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html,
    body {
      width: 100%;
      height: 100%;
      font-size: 12px;
      background-color: #efefef;
    }
    h1 {
      height: 100px;
      line-height: 100px;
      font-size: 36px;
      text-align: center;
    }
    .color-list {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      width: 1000px;
      margin: 0 auto;
      justify-content: space-between;
      align-items: space-between;
      flex-wrap: wrap;
      overflow-y: auto;
    }
    .color-item {
      width: 150px;
      height: 190px;
      margin-bottom: 20px;
      border-radius: 8px;
      border: 1px solid #ccc;
      box-shadow: 3px 2px 3px #ccc;
    }
    .color-block {
      width: 148px;
      height: 130px;
      border-radius: 5px;
      border-bottom: 1px solid #ccc;
    }
    .color-code {
      height: 36px;
      line-height: 18px;
      padding-left: 10px;
      margin-top: 10px;
    }
    .color-code strong {
      margin-right: 14px;
    }
  </style>
</head>
<body>
  <h1>WEB安全色DEMO</h1>
  <div class="color-list" id="color-list"></div>
  <script>
    window.onload = () => {

      let format = (num) => ('0' + num.toString(16)).slice(-2)

      let arr = [0, 0, 0],
          dom = []

      while (arr[0] <= 5) {

        let arr2 = arr.map((ele) =>  ele * 51)

        let hex = '#' + arr2.map((ele) => format(ele)).join('').toUpperCase(),
            rgb = arr2.join(', ')

          arr[2]++
        if (arr[2] > 5) {

          arr[2] = 0
          arr[1]++

          if (arr[1] > 5) {

            arr[0]++
            arr[1] = 0
          }
        }
        dom.push(`<div class="color-item">
                  <div class="color-block" style="background-color: ${hex};"></div>
                  <div class="color-code">
                  <p><strong>HEX:</strong><span>${hex}</span></p>
                  <p><strong>RGB:</strong><span>${rgb}</span></p>
                  </div></div>`)
      }
      document.querySelector('#color-list').innerHTML = dom.join('')

      setInterval(() => document.querySelector('h1').style.color = '#' + Math.random().toString(16).slice(2, 8), 233)
    }
  </script>
</body>
</html>

#⁰

广西南宁市 2017-06-30 15:02

css奇技淫巧
在百分比布局中, 使用纯css实现的按照元素寬度的一定比例來設定高度的小技巧(比如寬度占屏幕20%,高度是寬度的100%, 调整宽度,高度会等比缩放),
如果你知道更好的技巧实现它, 欢迎下方留言哦

<!DOCTYPE HTML>
<html>
<head>
<style>
.father {
    width: 20%;  /*改一下宽度试试看*/

}
.daughter {
    width: 100%; height: 0;
    padding-top: 100%;
    background: #ff7500;;
}
</style>
</head>
<body>

<div class = "father">
    <div class = "daughter"></div>    
</div>

广西南宁市2017-06-30 15:02:22

因为padding和margin的百分比是按照宽度来计算的。

广西南宁市2017-06-30 15:02:45

再加个transform,写九宫格要用的到

#⁰

广西南宁市 2017-07-10 17:29

css背景图不跟着内容走

.bg-img1 {
    background-image: url(../images/ghfa-bj.jpg);
    background-size: cover !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#⁰

广西南宁市 2017-08-08 15:50

广西南宁市2017-08-08 15:50:30

#⁰

广西南宁市 2017-08-12 14:42

css 设置文字垂直显示
1. writing-mode（设置对象书写方向）

　　语法：writing-mode : lr-tb、tb-rl
　　参数：lr-tb：从左向右，从上往下 　tb-rl：从上往下，从右向左 
　　示例：div { writing-mode: tb-rl; }

2. text-align（设置对象中文本的对齐方式）

　　语法：text-align : left、right、center、justify 
　　参数：left：左对齐　　right：右对齐　　center：居中　　justify：两端对齐 
　　示例：div { text-align : center; }

示例代码

<style>.div { writing-mode: tb-rl; } </style>
<div class="div">fdsafasdfads设置css文字居中</div>

广西南宁市2017-08-12 14:44:27

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>竖列排版实例 在线演示 www.divcss5.com</title> 
<style> 
body{width: 20px;text-align:center; line-height:22px} 
/* CSS注释说明：设置css文字居中，css行高为22px间隔 */ 
</style> 
</head> 
<body> 
我<br>是<br>竖<br>列<br>排<br>版 
</body> 
</html>

广西南宁市2017-08-12 14:44:54

<ul>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>

#⁰

广西南宁市 2017-08-30 17:51

Input的size与maxlength属性的区别

maxlength="5",则input输入框中只能够输入5个字符
size="5"，表示input输入框只显示5个可见的字符，但你可以输入'无数'多字符内容
即：size属性规定输入字段的宽度(此处即是Name2文本框只显示5个字符大小的宽度)，
由于 size 属性是一个可视化的设计属性，我们应使用 CSS 中的width来代替它。 
CSS 语法：<input style="width:100px"/>
具体是:用JavaScript来修改该属性. 
刚开始在Javascript里面是死活取不出该属性的值,没办法,去网上搜搜吧.没仔细看,就是感觉我跟他们写的没有什么差别啊,我就不信了,还弄不好它?可是就是弄不好 
最后,仔细看了网上的一个,发现还真有点问题,我没有大写,书写的时候全是小写字母. 
readonly <====> readOnly 
改成后者以后,还真的好了:)

广西南宁市2017-08-30 17:52:10

Select的onchange事件
我们用Select的onchange事件时,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件.select的onchange事件就是这样子的.你得有Change(改变),才能触发该事件....
掌握了它的特性后,相应的解决办法也很简单.

<select name=sel onchange="bao(this.options[this.options.selectedIndex].value)">
<option value="">请选择
<option value="1">Item 1
<option value="2">Item 2
<option value="3">Item 3
</select>
<script>
function bao(s)
{
    txt.value+=s;
    //选择后,让第一项被选中,这样,就有Change啦.
    document.all.sel.options[0].selected=true;
}
</script>
<textarea id=txt></textarea>

#⁰

广西南宁市 2017-08-31 17:00

swf新型版本浏览器，谷歌浏览器空白，flash兼容新版本浏览器

<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="100%" height="100%" align="center">
<param name="movie" value="../Public/flash/jinti.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent"> <!--这里代码可使Flash背景透明 -->
<embed src="../Public/flash/jinti.swf" width="100%" height="100%"
align="center" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash">
</embed>
</object>

广西南宁市2017-08-31 17:15:27

HTML插入SWF

#⁰

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

漂亮的css文字效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css文字效果</title>
<style type="text/css">
* {
    padding: 0;
    margin: 0;
    text-align: center;
}
body {
    padding-bottom: 200px;
}
div {
    font-size: 36px;
}
.header-item {
    line-height: 4;
}
.box1 {
    color: rgba(0, 0, 0, .3);
}
.box2 {
    text-shadow: 0 0 5px red;
    -webkit-text-fill-color : transparent;
}
.box3 {
    -webkit-text-stroke: 1px red;
    -webkit-text-fill-color : transparent;
}
.box4 {
    background: linear-gradient( to bottom, white, black);
    -webkit-text-fill-color : transparent;
    -webkit-background-clip : text;
}
.box5 {
    height: 300px;
    width: 1280px;
    margin: 0 auto;
    font-size: 70px;
    font-weight: 700;
    background: url(https://lizhenqiu.com/86f740e5196bec328ee09cca4dd9c827.jpg) no-repeat center;
    /*文字样式*/
    text-align: center;
    /*图片文字样式*/
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.box6 { 
    color:#fefefe;
    text-shadow:  
    0px 1px 0px #c0c0c0,  
    0px 2px 0px #b0b0b0,  
    0px 3px 0px #a0a0a0,  
    0px 4px 0px #909090,  
    0px 5px 10px rgba(0, 0, 0, .9);  
}
.box7 {
    color:#fefefe;   
    text-shadow:  
    1px -1px 0 #767676,   
    -1px 2px 1px #737272,   
    -2px 4px 1px #767474,   
    -3px 6px 1px #787777,   
    -4px 8px 1px #7b7a7a,   
    -5px 10px 1px #7f7d7d,   
    -6px 12px 1px #828181,   
    -7px 14px 1px #868585,   
    -8px 16px 1px #8b8a89,   
    -9px 18px 1px #8f8e8d,   
    -10px 20px 1px #949392,   
    -11px 22px 1px #999897,   
    -12px 24px 1px #9e9c9c,   
    -13px 26px 1px #a3a1a1,   
    -14px 28px 1px #a8a6a6,   
    -15px 30px 1px #adabab,   
    -16px 32px 1px #b2b1b0,   
    -17px 34px 1px #b7b6b5,  
    -18px 36px 1px #bcbbba,   
    -19px 38px 1px #c1bfbf,   
    -20px 40px 1px #c6c4c4,   
    -21px 42px 1px #cbc9c8,   
    -22px 44px 1px #cfcdcd;  
}
.box8 {
    background-color: #333;  
  background-image:  
      -webkit-linear-gradient(bottom left, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0%);
  background-image:  
      -o-linear-gradient(bottom left, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0%);
  background-image:  
      linear-gradient(to top right, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0%);;  
    background-size: .05em .05em;  
  -webkit-background-clip: text;  
  -webkit-text-fill-color: transparent;  
  -webkit-text-stroke: 2px #111;  
}
</style>
</head>
<body>
<p class="header-item">1.透明文字</p>
<div class="box1">我叫吕胖胖</div>

<p class="header-item">2.模糊文字</p>
<div class="box2">我叫吕肥肥</div>

<p class="header-item">3.镂空文字</p>
<div class="box3">我是吕胖胖，我有个弟弟叫吕肥肥</div>

<p class="header-item">4.渐变文字</p>
<div class="box4">我是吕肥肥，我有个哥哥叫吕胖胖</div>

<p class="header-item">5.图片背景文字</p>
<div class="box5">我们来自快乐的胖肥家族</div>

<p class="header-item">6.立体文字</p>
<div class="box6">胖哥，我们下楼找小美玩吧！</div>

<p class="header-item">7.长阴影文字</p>
<div class="box7">肥弟，你就不怕大熊揍你吗？</div>
    
</body>
</html>

#⁰

第 10 / 14 页 当前展示 181 - 200 条，共 279 条评论

Comment Form 留下评论

正在回复 #0

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

正在上传...

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

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