【小记】--常用代码总结

我就是我 2023-06-02 13:58 12阅读 0赞

## 目录  [https://github.com/wenzi0github/javascript-css-common][https_github.com_wenzi0github_javascript-css-common] ##

1.  CSS初始化样式reset.css
2.  去除浮动clearfix
3.  js操作cookie
4.  css强制换行/自动换行/强制不换行
5.  table边界的样式
6.  div上下左右居中
7.  图片上下左右居中
8.  js字符串翻转
9.  iPad页面适配框架
10. google html5.js
11. js产生随机数字
12. table中的td对齐属性
13. radio-checkbox-select
14. requestAnimationFrame的兼容性处理
15. 获取鼠标移动的方向
16. 扩展String中的format
17. html字段转换函数
18. js产生随机字符串
19. 检测浏览器是否支持fixed
20. 解析url中的参数
21. 图片懒加载
22. jQuery回到顶部
23. 图片hover放大
24. 时间格式化
25. Object.assign兼容
26. 标题两边的小横杠
27. 如何获取当前所在周的起始和结束的日期

#### 1. CSS初始化样式reset.css ####

不同的浏览器对各个标签默认的样式是不一样的，而且有时候我们也不想使用浏览器给出的默认样式，我们就可以用reset.css去掉其默认样式

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5 tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }

#### 2. 去除浮动clearfix ####

通常我们在有浮动元素的情况下，会在同级目录下再创建一个`<div style="clear:both;"></div>`；不过这样会增加很多无用的代码。此时我们用`:after`这个伪元素来解决浮动的问题，如果当前层级有浮动元素，那么在其父级添加上clearfix类即可。

.clearfix:after { content: "\00A0"; display: block; visibility: hidden; width: 0; height: 0; clear: both; font-size: 0; line-height: 0; overflow: hidden; } .clearfix{ zoom:1}

#### 3. js操作cookie ####

#### 4. css强制换行/自动换行/强制不换行 ####

/* 强制不换行 */ div{ white-space:nowrap; } /* 自动换行 */ div{ word-wrap: break-word; word-break: normal; } /* 强制英文单词断行 */ div{ word-break:break-all; }

\#\#\#\#5. table边界的样式

table { border: 1px solid #000; padding: 0; border-collapse: collapse; table-layout: fixed; margin-top: 10px;} table td { height: 30px; border: 1px solid #000; background: #fff; font-size: 15px; padding: 3px 3px 3px 8px; color: #000; width: 160px;}

#### 6. div上下左右居中 ####

div{
      position:absolute; width:400px; height:300px; left:50%; top:50%; margin-left:-200px; margin-top:-150px; }

#### 7. 图片上下左右居中 ####

一种常用的方式是把外层的div设置为table-cell；然后让内部的元素上下左右居中。当然也还有一种方式，就是把img当做div，参考6中的代码进行设置。  
CSS代码如下：

.content{
      width: 400px; height: 400px; border: 1px solid #ccc; text-align: center; display:table-cell; vertical-align:middle; }

html代码如下：

#### 8. js字符串翻转 ####

js中没有直接对字符串进行反转的，需要我们先转换成数组，然后使用数组中的`reverse()`方法翻转，最后在把数组拼接回字符串。

var str = "abcdefg"; var revs = str.split("").reverse().join(""); console.log(revs);

#### 9. iPad页面适配框架 ####

这是一个适配iPad页面的大致框架，包括竖屏和横屏

iPad 适配
    /* ipad 竖屏 */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { body{ color:#000; } /* … */ } /* ipad 横屏 */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { body{ color:#000; } /* … */ }

#### 10. google html5.js ####

这是Google提供的js框架，使IE8及以下的浏览器支持html5新标签 [html5.js 链接][html5.js]

/*
     HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */ (function(l,f){ function m(){ var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); a.createElement=function(c){ return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){ b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>"; c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){ try{ var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){ f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!

转载于:https://www.cnblogs.com/zjt-blogs/p/11584571.html

[https_github.com_wenzi0github_javascript-css-common]: https://github.com/wenzi0github/javascript-css-common
[html5.js]: http://html5shim.googlecode.com/svn/trunk/html5.js