一些非常有用的html,css,javascript代码片段(持久更新)
1.判断设备是否联网
if (navigator.onLine) {
//some code
}else{
//others code
}
2.获取url的指定参数
function getString(parameter) {
var url = window.location.href;//获取url
var model = "([?&])" + parameter + "=([^&]*)";//定义了这样一个模式
var oModel = new RegExp(model);//把这个模式定义成一个对象
if (oModel.test(url)) {//用test方法测试这个对象看是true还是false；
return RegExp["$2"]; //$2为RegExp对象的一个属性 与正则表达式匹配的第二个子匹配;
}
else {
return null;
}
}
//调用上面的代码
//若一个url如下
url="http://www.leinov.com/blog?id=20&type=1";
var Id=getString(id);
var Type=getString(type);
alert(Id); //
alert(Type); //
3.阻止点击事件执行两次
(这是在用iScroll时候遇到的问题 可能iScroll本身的原因 点击某个元素调用函数了两次，阻止的原理就是让他在一定时间间隔内不要再执行)
var timeTag = null; //设置一个全局的时间点
function oneTime() {
if (timeTag == null) {
timeTag = new Date().getTime(); //获取当前时间
} else {
var timeTag2 = new Date().getTime();
if (timeTag2 - timeTag < 1000) {
timeTag = timeTag2;
return;
} else {
timeTag = timeTag2;
}
}
//你需要执行的代码
}
4.手机横竖屏监听
function changeDirection() {
if (window.orientation == 180 || window.orientation == 0) {
//do something or chage the style
}
if (window.orientation == 90 || window.orientation == -90) {
//do something or chage the style
}
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", changeDirection, false);//监听这个事件
5.获取window对象的所有属性
var count=0;//技术器
for(var property in window){
document.write(property);
document.write('<br/>');
count++;
}
alert(count);
6.使用getComputedStyle方法获取元素样式
一般情况下我我们要获取一个元素的样式（宽，高等），都是要先设置元素的样式，但getComputedStyle你可以不用设置也可以获取，他会计算元素的样式并返回
<html>
<script>
window.onload=function(){
getComStyle("pic","width");
} function getComStyle(id, style) {
var node = document.getElementById(id);
var theStyle; if (window.getComputedStyle) { //如果window有getComputedStyle这个属性
var styleObj = window.getComputedStyle(node, null); //第二个参数是获取伪元素的样式 设置null就是不获取 styleObj是一个包含各种样式属性的对象
theStyle = styleObj.getPropertyValue(style); //getPropertyValue获取元素css指定的属性值
} else { //ie
theStyle = node.currentStyle;
}
return theStyle;
}
</script>
<body>
<div id="pic"></div>
</body>
</html>
7.div水平垂直居中页面显示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div网页居中显示</title>
<style>
*{ margin:0; padding: 0;}
.center{position: absolute; width: 300px; height: 200px; margin-left: -150px; margin-top: -100px; left: 50%; top:50%; background: #4DAE8B}
</style>
</head> <body>
<div class="center"></div>
</body>
</html>
8.ios在页面里打开app
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/> <title>在网页里打开app</title>
</head>
<body>
<!--在网页里点击下面的链接 如果手机上装有这些app可以直接打开-->
<h1>在网页中打开app</h1>
<h2><a id="openapp1" href="weixin:">打开微信</a></h2>
<h2><a id="openapp2" href="baidumusic:">打开百度音乐</a></h2>
<h2><a id="openapp3" href="changba:">打开唱吧</a></h2>
<h2><a id="openapp4" href="xiami:">打开虾米</a></h2>
<h2><a id="openapp5" href="duomi:">打开多米</a></h2>
<h2><a id="openapp6" href="qqmusic:">打开qq音乐</a></h2>
<h2><a id="openapp7" href="weibo:">打开微博</a></h2>
</body>
</html>
9.理解 !function(){}()
//2014-9-5
// 匿名函数立即执行
(function() {
console.log(0);
})(); //这种写法大家应该很熟悉但有时候也会遇到下面这种写法 ! function() {
console.log(0);
}();
//这是什么意思呢 其实效果跟上面一样 也是立即执行一个匿名函数
//！的目的是告诉解释器它后面是个表达式
//前面也可以是+，—,~
(function() {})() == ! function() {}();
10.久违的table
//2014-9-25
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<table border=1 >
<tr>
<td >11</td>
<td >12</td>
<td rowspan=3>竖3</td>
</tr>
<tr>
<td>21</td>
<td >22</td>
</tr>
<tr>
<td >31</td>
<td >32</td>
</tr>
<tr>
<td >41</td>
<td colSpan=2>横2</td>
</tr>
<tr>
<td >51</td>
<td colSpan=2>横2</td>
</tr>
</table>
</body>
</html>
11.fixed居中固定
//2014-11-1 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
<title>fixed居中显示</title>
<style>
*{margin:0; padding: 0;}
div{max-width:980px; height:70px; position:fixed; margin:0 auto; left:0; right:0; background: #454648;}
section{ height: 2000px;}
</style>
</head>
<body>
<div></div>
<section></section>
</body>
</html>
12 浏览器支持css属性检测
var div=document.createElement("div");
for(prototype in div.style){
document.write(prototype+"<br>");
}
13阻止默认事件
<a class="a" href="http://www.leinov.com">leinov</a>
<script>
var a=document.querySelector("a");
a.onclick=function(event){
event.preventDefault();
}
</script>
14 clientY,pageY
$(document).mousedown(function(e){
console.log("clientY:"+e.clientY+" 和 pageY:"+e.pageY);
})
//clientX,clentY 是相对于window而言的 浏览器的窗口有多大 他们的最大值就有多大 pageX,pageY是相对于文档的 文档有多宽多高 最大值就有多大
15 图片水平垂直居中
//2014-12-1
img {display:block}
.wrap {display:-webkit-box; -webkit-box-align:center; -webkit-box-pack:center;}
16 判断数据类型
//2014-12-16
<script>
var a=[];
var theType=Object.prototype.toString.call(a);
alert(theType); // [object Array]
</script>
17 只支持移动设备检测
var device=('ontouchstart' in window)|| window.DocumentTouch && document instanceof DocumentTouch;
//在pc上返回undefined 在移动设备返回true
18 强制换行和禁止换行
//强制换行
word-break: break-all //按字母换行
word-break: break-word //按单词换行
//上面两种只适用于英文
word-breaK: pre-wrap //按中文换行 //禁止换行
white-space:nowrap
//单行多余内容用省略号表示 display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
//多行多余内容用省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
19 行内元素垂直对其方式
vertical-align 属性设置元素的垂直对齐方式。
可能的值
值 描述
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
20.删除数据某一项
//删除数组某一项 2015-4-22
Array.prototype.removeByValue = function(val) {
for(var i=; i<this.length; i++) {
if(this[i] == val) {
this.splice(i, );
break;
}
}
}
//调用
var arr=["a","b","c"];
arr.removeByValue("a");
21.文本居中显示
<style >
.centrol{
height: 300px;
/*display flex方式*/
display: -webkit-flex;
display:flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center; /*display box方式*/
display:box;
display:-webkit-box;
display:-moz-box;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-align:center;
-moz-box-align:center;
}
</style> <div class="centrol">看我居中显示耶</div>
22.伸缩盒
ul{ width: 100%;
display:box;
display:-webkit-box;
display:-moz-box;
display: -webkit-flex;
display:flex;
}
ul li{
-webkit-flex:1;
flex:1;
-webkit-box-flex:1;
box-flex:1;
}
23.css3媒体查询设备
iphone5：
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
}
24.移动端模拟hover
15-8-3
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
<script type="text/javascript" src="../../statics/js/zepto.js"></script> <style type="text/css">
*{ margin: 0; padding: 0;}
html,body{
-webkit-touch-callout: none; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.hover{ width: 90%;margin: auto; height: 300px; background: #ff6666; -webkit-transition:all 0.1s;}
.hover.touch{ background: #e4e4e4; }
</style>
</head>
<body> <div class='hover'></div>
<script type="text/javascript">
var hover = $(".hover"); hover[0].addEventListener('touchstart',function(){ $(this).addClass('touch');},false);
hover[0].addEventListener('touchend',function(){ $(this).removeClass('touch');},false); </script>
</body>
</html>
25,三列一换行输出
for(i=0;i<;i++){
var ul ="";
if(i%3==0) {
ul = "<ul>";
}
ul+="<li>"+(i+1)+"</li>";
if((i+1)%3==0) ul+="</ul>";
console.log(ul);
}
26,一维数组,二维数组求和
function sumMatrix1(matrix: number[]){
let sum = 0;
for(let i=0;i<matrix.length;i++){
sum +=matrix[i];
}
return sum;
}
var sum1 = sumMatrix1([3,4,5,34,3,2,11]);
console.log(sum1);
function sumMatrix2(matrix: number[][]) {
let sum = 0;
for (let i = 0; i < matrix.length; i++) {
var currentRow = matrix[i];
for (let i = 0; i < currentRow.length; i++) {
sum += currentRow[i];
}
}
return sum;
}
var sum2 = sumMatrix2(arr)
console.log(sum2);
27字符串截取
"北京市".charAt("北京市".length-1); //市
"北京市".slice(0,"北京市".length-1); //北京
一些非常有用的html,css,javascript代码片段(持久更新)的更多相关文章
- 精心收集的 48 个 JavaScript 代码片段，仅需 30 秒就可理解！
原文:https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates 作者:Chalaran ...
- 精心收集的 48 个 JavaScript 代码片段，仅需 30 秒就可理解
原文:Chalarangelo 译文:IT168 https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with ...
- 精心收集的48个JavaScript代码片段，仅需30秒就可理解
源文链接 :https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates 该项目来自于 G ...
- Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...
- [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...
- 超级有用的9个PHP代码片段
在开发网站.app或博客时,代码片段可以真正地为你节省时间.今天,我们就来分享一下我收集的一些超级有用的PHP代码片段.一起来看一看吧! 1.创建数据URI 数据URI在嵌入图像到HTML / CSS ...
- 超实用的 JavaScript 代码片段（ ES6+ 编写）
Array 数组 Array concatenation (数组拼接) 使用 Array.concat() ,通过在 args 中附加任何数组 和/或 值来拼接一个数组. const ArrayCon ...
- HTML/CSS/Javascript代码在线压缩、格式化(美化)工具
CSS 格式化 ProCSSor - http://procssor.com/ CSS 压缩 CSS Compressor - http://www.cssdrive.com/index.php/ ...
- 让你的eclipse实现写JAVA代码，HTML,CSS,JAVASCRIPT代码提示
1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 改动Auto Activation triggers for java的值为:zj ...
随机推荐
- JDBC连接数据库代码
//连接是需要导包 http://pan.baidu.com/s/1o6nyuOa /*配合数据库建立表 create database day14 character set utf8 collat ...
- 常用汉字的Unicode码表
\u96d5\u864e\u7684\u4e00\u4e86\u662f\u6211\u4e0d\u5728\u4eba\u4eec\u6709\u6765\u4ed6\u8fd9\u4e0a\u77 ...
- crawler spec
使用说明 0.写在前面 1.本程序完成的抓取网页并保存其文件的工作. 2.目前的版本还需将工程文件导入eclipse中运行. 3.加载主类MyCrawler生成可执行文件. 4.程序主界面: 1 准备 ...
- Week1 Team Homework #1: Study the projects done by previous student groups
我们研究了学长的项目:百度3D地图API的调用.下面是我们对该项目的一些看法: 优点: 界面清晰 各类之间调用及其他关系容易理清. 缺点: 前段html代码过于冗杂,很多(div)块间的层次关系不 ...
- java url中文参数乱码问题
http://www.blogjava.net/jerry-zhaoj/archive/2009/07/16/286993.html 转 JAVA 中URL链接中文参数乱码的处理方法JAVA 中URL ...
- mysql myisam
.frm .myd .myi insert delayted show variables like '%delayed%' lock read, write, read local pointer ...
- java mail实现Email的发送,完整代码
java mail实现Email的发送,完整代码 1.对应用程序配置邮件会话 首先, 导入jar <dependencies> <dependency> <groupId ...
- 【锋利的JQuery-学习笔记】输入框提示语-隐藏/显示
html <div class="search"> <input type="text" id="inputSearch" ...
- 弱弱的玩下Javascript
前言 好久没有更新博客了,也蛮少捣弄javascript,今儿看到一个题目,关于给你一个面板,你可以随意的在上面画矩形,可以移动和删除任意一个你创建的矩形,心血来潮搞着玩哈,实现起来挺简单的,但这代码 ...
- Zabbix 安装及微信短信提醒
Zabbix简介 Zabbix 近几年得到了各大互联网公司的认可,当然第一点归功与它强大的监控功能,第二点免费开源也得到了广大用户的青睐.Zabbix 能将操作系统中的绝大部分指标进行监控,比如(CP ...