#875
展开↯#876
作者：广西南宁市
为 iPhoneX 而生的小效果
就是兼容不好，只有webkit内核支持。
就是兼容不好，只有webkit内核支持。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
::-webkit-scrollbar{
width: 0;
height: 0;
}
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
background: #000;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
ul{
list-style: none;
}
li{
padding: .5em;
box-shadow: inset 0 0 10px #eee;
}
.wrap{
position: relative;
margin: 0 auto;
width: 800px;
height: 500px;
overflow: auto;
background: #fff;
box-shadow: 0 0 15px #fff;
}
.po{
position: absolute;
left: 0;
top: 155px;
width: 30px;
height: 190px;
background: #000;
border-radius: 0 100% 100% 0/0 100% 100% 0;
}
.fl{
float: left;
width: 40px;
shape-outside: polygon(0 150px, 20px 152px, 30px 155px, 40px 170px, 40px 330px, 30px 345px, 20px 348px, 0 350px);
}
</style>
</head>
<body>
<div class="wrap">
<div class="po"></div>
<div class="fl"></div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>
<script type="text/javascript">
var wrap = document.querySelector('.wrap');
var ul = document.querySelector('.wrap ul');
var fl = document.querySelector('.wrap .fl');
var po = document.querySelector('.wrap .po');
fl.style.height = ul.scrollHeight + 'px';
wrap.onscroll = function(e){
var s = wrap.scrollTop;
fl.style.shapeOutside = 'polygon(0 '+(150+s)+'px, 20px '+(152+s)+'px, 30px '+(155+s)+'px, 40px '+(170+s)+'px, 40px '+(330+s)+'px, 30px '+(345+s)+'px, 20px '+(348+s)+'px, 0 '+(350+s)+'px)';
po.style.top = 155 + s +'px';
}
</script>
</body>
</html>Run code
Cut to clipboard
文章：利用CSS属性环绕布局Shapes绘制各个形状图形形状文本文字环绕特效 发表时间：2017-10-28, 16:42:57
#878
作者：广西南宁市
div等标签获取焦点绑定keypress等事件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
.box{
width: 300px;
padding: 30px 20px;
background-color: #f4d5e8;
margin: 50px;
font-size: 24px;
color: #ccc;
text-align: center;
}
#box2{
color: #4c9579;
background-color: #d5f4e8;
}
.box:focus{
border: solid 1px #d5e8f4;
box-shadow: 0 0 5px 2px #d5e8f4;
}
</style>
</head>
<body>
<div class="box" id="box1">我不能获得焦点</div>
<div class="box" id="box2" tabindex="1">点我可以获得焦点。因为我有【tabindex】属性</div>
<script>
document.getElementById('box2').onfocus = function(){
this.innerHTML = "现在请敲击键盘！！";
}
document.getElementById('box2').onblur = function(){
this.innerHTML = "点我可以获得焦点。因为我有【tabindex】属性";
}
//能获得焦点的div才可以使用keypress等键盘事件
document.getElementById('box2').onkeypress = function(e){
this.innerHTML = "只有获得焦点，才能用keypress等事件。您按的是【"+e.key+"】。";
}
//没有焦点的div等普通dom元素 就算绑定也没用！
document.getElementById('box1').onkeypress = function(e){
alert('就算绑定了也没用！！');
}
</script>
</body>
</html>Run code
Cut to clipboard
文章：让输入框获取焦点 JS 发表时间：2017-10-28, 14:44:07
#879
作者：广西南宁市
table border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<style>
table{border-collapse:collapse;border:1px solid #ddd;}
th,td{border:1px solid #ddd;}
</style>
</head>
<body>
<table>
<tr><th>132</th><td>132</td></tr>
<tr><th>132</th><td>132</td></tr>
</table>
</body>
</html>Run code
Cut to clipboard
文章：实现表格每行随鼠标的移动改变颜色 发表时间：2017-10-28, 14:43:13
#880
作者：广西南宁市
canvas放大镜
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#cvs{
border: 1px solid red;
box-shadow: 10px 10px 10px gray;
}
</style>
</head>
<body>
<canvas id="cvs" width="1000" height="600"></canvas>
<script type="text/javascript">
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
// 创建图片
var img = new Image();
img.src = "http://li.img.pan.lizhenqiu.com/f9fb4f79f59fad81f092f0d18265d759.jpg";
// 先将图片绘制到画布上
img.onload = function(){
ctx.beginPath();
// 从画布的原点开始绘制图片
ctx.drawImage(img,0,0);
// 添加鼠标事件
cvs.onmouseover = function(){
cvs.onmousemove = function(e){
//每次移动都要清除画布
ctx.clearRect(0,0,cvs.width,cvs.height);
// 再次将图片绘制到画布上
ctx.drawImage(img,0,0);
// 移动的时候开始不断获取鼠标位置
var ev = e||window.event;
// 获取鼠标相对于画布的位置
var x = ev.clientX - cvs.offsetLeft;
var y = ev.clientY - cvs.offsetTop;
// 开始绘制放大区域
ctx.drawImage(img,x-50,y-50,100,100,x-100,y-100,200,200);
}
}
cvs.onmouseout=function(){
ctx.clearRect(0,0,cvs.width,cvs.height);
}
}
</script>
</body>
</html>
Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-28, 14:41:05
#881
展开↯#882
作者：广西南宁市
简单自动打字机效果，打完清空从头开始
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<script type="text/javascript">
var count=0;
var newstr="";
var other = "|"
var odiv = document.getElementsByTagName('div')[0]
var timer = setInterval(function(){
var str = "哈哈哈哈哈哈哈哈哈哈哈哈嗝~哈哈哈哈哈哈哈哈哈哈哈哈哈嗝~";
newstr += str[count];
odiv.innerHTML = newstr + other;
count++;
if(count == str.length+1){
odiv.innerHTML = "";
newstr = "";
count=0;
timer;
}
},200)
</script>
</body>
</html>Run code
Cut to clipboard
文章：JS打字机效果 发表时间：2017-10-28, 11:40:55
#883
作者：广西南宁市
JavaScript事件委托实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</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>
<a>第一个a</a>
</ul>
</div>
<script>
var Obox = document.getElementById('box')
Obox.addEventListener('click',function (e){
var l = e.target
while(l.tagName !== 'LI'){
if(l === ul){
l = null
break;
}
l = l.parentNode
}
if (l) {
alert(l.innerHTML);
}
})
</script>
</body>
</html>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-28, 11:38:57
#884
作者：广西南宁市
数组排序的一个实例--冒泡排序法
var arr = [453,43,4,6,46,34,4,7,1,5]//原数组
for (var i = 0; i < arr.length-1; i++) {
for (var j = 0; j < arr.length-1-i; j++) {
if (arr[j]>arr[j+1]) {//判断如果j>j+1就交换位置
var temp = arr[j]
arr[j]=arr[j+1]
arr[j+1]=temp
}
}
}
document.write(arr);Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-28, 11:38:30
#885
作者：广西南宁市
利用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);
Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-28, 11:38:11
#886
作者：广西南宁市
document load 与document ready的区别
页面加载完成有两种事件
1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
2.$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件
页面加载完成有两种事件
1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
2.$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件
文章：常用html、demo代码 发表时间：2017-10-28, 11:34:09
#887
作者：广西南宁市
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>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-28, 11:32:42
#888
作者：广西南宁市
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>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-28, 11:32:03
#889
作者：广西南宁市
巧用notepad++正则表达式，批量修改删除超链接
<a href=".*?">Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-28, 10:51:56
#890
作者：广西南宁市
html 使表格随着内容自动适应宽度
td
{
white-space: nowrap;
} Run code
Cut to clipboard
<table width="95%" border="1" cellpadding="2" cellspacing="1" style="table-layout:fixed;">Run code
Cut to clipboard
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-28, 10:50:08
#891
作者：广西南宁市
手机点击一下按钮，按钮会一直处于hover状态，，怎么解决？
<?php
if($Applessss && !$getimg_now){
?>
document.body.addEventListener('touchend', function(){ }); //解决:hover伪类在移动端二次点击的问题
document.body.addEventListener('touchstart', function(){ });
<?php
}
?>Run code
Cut to clipboard
文章：解决:hover、before、after伪类在ios移动端需要二次点击的问题 发表时间：2017-10-26, 09:17:52
#893
作者：广西南宁市
移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel
1、Touch事件简介
pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如 iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分别对应了触屏开始、拖拽及完成触屏事件和取消。
当按下手指时，触发ontouchstart；
当移动手指时，触发ontouchmove；
当移走手指时，触发ontouchend。
当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。
2、Touch事件与Mouse事件的出发关系
在触屏操作后，手指提起的一刹那（即发生ontouchend后），系统会判断接收到事件的element的内容是否被改变，如果内容被改变，接下来的事 件都不会触发，如果没有改变，会按照mousedown，mouseup，click的顺序触发事件。特别需要提到的是，只有再触发一个触屏事件时，才会 触发上一个事件的mouseout事件。
3、gesture事件
Gesture事件，包括手指点击（click），轻拂 （flick），双击（double-click），手指的分开、闭合（scale）、转动（rotate）等一切手指能在屏幕上做的事情，它只在有两根 或多根手指放在屏幕上的时候触发，事件处理函数中会得到一个GestureEvent类型的参数，它包含了手指的scale（两根移动过程中分开的比例） 信息和rotation（两根手指间连线转动的角度）信息。这个事件是对touch事件的更高层的封装，和touch一样，它同样包括 gesturestart，gesturechange，gestureend。
gesture事件触发过程：
Step 1、第一根手指放下，触发touchstart
Step 2、第二根手指放下，触发gesturestart
Step 3、触发第二根手指的touchstart
Step 4、立即触发gesturechange
Step 5、手指移动，持续触发gesturechange，就像鼠标在屏幕上移动的时候不停触发mousemove一样
Step 6、第二根手指提起，触发gestureend，以后将不会再触发gesturechange
Step 7、触发第二根手指的touchend
Step 8、触发touchstart！注意，多根手指在屏幕上，提起一根，会刷新一次全局touch！重新触发第一根手指的touchstart
Step 9、提起第一根手指，触发touchend
1、Touch事件简介
pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如 iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分别对应了触屏开始、拖拽及完成触屏事件和取消。
当按下手指时，触发ontouchstart；
当移动手指时，触发ontouchmove；
当移走手指时，触发ontouchend。
当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。
2、Touch事件与Mouse事件的出发关系
在触屏操作后，手指提起的一刹那（即发生ontouchend后），系统会判断接收到事件的element的内容是否被改变，如果内容被改变，接下来的事 件都不会触发，如果没有改变，会按照mousedown，mouseup，click的顺序触发事件。特别需要提到的是，只有再触发一个触屏事件时，才会 触发上一个事件的mouseout事件。
3、gesture事件
Gesture事件，包括手指点击（click），轻拂 （flick），双击（double-click），手指的分开、闭合（scale）、转动（rotate）等一切手指能在屏幕上做的事情，它只在有两根 或多根手指放在屏幕上的时候触发，事件处理函数中会得到一个GestureEvent类型的参数，它包含了手指的scale（两根移动过程中分开的比例） 信息和rotation（两根手指间连线转动的角度）信息。这个事件是对touch事件的更高层的封装，和touch一样，它同样包括 gesturestart，gesturechange，gestureend。
gesture事件触发过程：
Step 1、第一根手指放下，触发touchstart
Step 2、第二根手指放下，触发gesturestart
Step 3、触发第二根手指的touchstart
Step 4、立即触发gesturechange
Step 5、手指移动，持续触发gesturechange，就像鼠标在屏幕上移动的时候不停触发mousemove一样
Step 6、第二根手指提起，触发gestureend，以后将不会再触发gesturechange
Step 7、触发第二根手指的touchend
Step 8、触发touchstart！注意，多根手指在屏幕上，提起一根，会刷新一次全局touch！重新触发第一根手指的touchstart
Step 9、提起第一根手指，触发touchend
文章：解决:hover、before、after伪类在ios移动端需要二次点击的问题 发表时间：2017-10-26, 09:15:58
最好写成 for(var i in json) 否则i就变成全局的了, 会污染整个window