html css js的一些整理

css常用效果http://www.qdfuns.com/notes/47654/f26eaa6148a3de8e8055bb6327b82055.html

div span 垂直居中使用vertical-align: middle
vertical-align对一些特定显示样式（例如单元格显示方式：table-cell）的元素才会起作用。所以要实现上下垂直居中对齐，可以采用如下样式
display:table-cell; /按照单元格的样式显示元素/
vertical-align:middle; /垂直居中对齐/
上面的设置方式相比设置line-height属性，可以兼容文字有多行的情形。

<div>
    <span>测试测试，即便是多行，我也还是垂直居中对齐的。</span>
</div>

设置css样式

div{ width:200px; height:115px;display:table-cell;vertical-align: middle;}

给input的placeholder设置颜色

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

jquery Date()操作获取时间日期星期等

var myDate = new Date();  
    myDate.getYear();        //获取当前年份(2位)  
    myDate.getFullYear();    //获取完整的年份(4位,1970-????)  
    myDate.getMonth();       //获取当前月份(0-11,0代表1月)  
    myDate.getDate();        //获取当前日(1-31)  
    myDate.getDay();         //获取当前星期X(0-6,0代表星期天)  
    myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)  
    myDate.getHours();       //获取当前小时数(0-23)  
    myDate.getMinutes();     //获取当前分钟数(0-59)  
    myDate.getSeconds();     //获取当前秒数(0-59)  
    myDate.getMilliseconds();    //获取当前毫秒数(0-999)  
    myDate.toLocaleDateString();     //获取当前日期  
    var mytime=myDate.toLocaleTimeString();     //获取当前时间  
    myDate.toLocaleString( );        //获取日期与时间

全选反选不选

html:
<input type="button" value="全选" id="sele"/>
<input type="button" value="不选" id="setinterval"/>
<input type="button" value="反选" id="clear"/>
<div id="checkboxs">
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
</div>
js:
<script>
window.onload=function(){
  var sele=document.getElementById('sele');//获取全选
  var unsele=document.getElementById('setinterval');//获取不选
  var clear=document.getElementById('clear');//获取反选
  var checkbox=document.getElementById('checkboxs');//获取div
  var checked=checkbox.getElementsByTagName('input');//获取div下的input
//全选
   sele.onclick=function(){
    for(i=0;i<checked.length;i++){
    checked[i].checked=true
          }
     }
//不选
    unsele.onclick=function(){
      for(i=0;i<checked.length;i++){
       checked[i].checked=false
          }
      }
//反选
    clear.onclick=function(){
       for(i=0;i<checked.length;i++){
        if(checked[i].checked==true){
        checked[i].checked=false
         } 
   else{
     checked[i].checked=true
       }
       }
      }
}
</script>

实现思想：设置tabindex 和 z-index一样；

<div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur='alert("失去焦点");' style="border:1px solid #ccc;width:200px;height:200px;outline=0;"> </div>

定义TAB属性后，元素是默认会加上焦点虚线的，那么在IE中可以通过hidefocus="true"去除！其他浏览器通过outline=0进行去除！

jquery去空格

html:
<div>         lots of spaces before and after        </div>
<pre id="original"></pre>
<pre id="trimmed"></pre>
jquery:
$(function () { 
	$( "#original" ).html( $('div').text());   //原文本
	$( "#trimmed" ).html( $.trim( $('div').text())); //去空格的文本
})

实现textarea文本域的高度自适应（ie8以下不支持）

html：
<pre class="input" id="pre"></pre>
<textarea class="input hide" id="textarea"></textarea>
css
.input {
    padding: 10px;
    width: 300px;
    min-height: 150px;
    border: 1px solid #ccc;
    resize: none;
    font-size: 20px;
    line-height:30px;
    overflow: hidden;
    word-wrap: break-word;
}
.hide {
    position: absolute;
    z-index: -100;
    visibility: hidden;
}
js：
var textarea = document.getElementById('textarea');
var pre = document.getElementById('pre');
textarea.oninput = function() {
    pre.textContent = textarea.value;
    textarea.style.height = pre.offsetHeight + 'px';
}

滚动条宽度为0即滚动条消失
实现思想：设置滚动条宽度为0 或者滚动条隐藏

::-webkit-scrollbar  
{  
    width: 0px;  
}

隐藏滚动条
html,body{
            overflow-x:hidden;
            _overflow-x:hidden;
            overflow-y:hidden;
            }

点击上下按钮实现div滚动条效果
实现思想：div设置超出滚动的时候，对div滚动条的一个操作当点击相应按钮时。执行函数事项滚定效果
滚动条操作：获取滚动条距离div顶部距离 scrollTop();获取滚动条距离div左侧距离scrollLeft();

$('.down').click(function(){
      $('.main').animate({scrollTop:$('.main').scrollTop()+200});
})
$('.up').click(function(){
     $('.main').animate({scrollTop:$('.main').scrollTop()-200});
})

子父页面操作
主要运用情况：

1.子页面调用父页面函数：parent.fn()  //fn() 父页面函数   
2.子页面获取父页面变量：parent.varname  //varname 父页面变量名
3.父页面调用子页面函数：iframename.window.fn()  //iframename   iframe属性name值   fn()子页面函数
4.父页面获取子页面变量：document.getElementById('iframeId').contentDocument.getElementsByTagName('table'); //contentDocument后可以使用document相关方法 
var tet = document.getElementById('iframeId').contentWindow.document.getElementById("text_inputId"); 
alert(tet.value)

按钮点击效果
移动端、PC端按钮点击时，要有变化。
效果可以用css 伪类来实现：

a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/

其他伪类：

:link 链接没有被访问时
:visited链接被访问过后
:hover鼠标悬浮在链接上时
:focus用于元素成为焦点，这个经常用在表单元素上
:first-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child()选择某个元素的一个或多个特定的子元素；  odd奇数、even偶数
:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()选择指定的元素；
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；
:only-child选择的元素是它的父元素的唯一一个了元素；
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty选择的元素里面没有任何内容

CSS自定义字体，让你的字体运用随心所欲！
步骤：

1、下载所需字体。字体下载站提供的字体一般为.TTF格式。
2、字体转格式。为了确保在主流浏览器中都能正常显示该字体，需要提供3种字体格式。我们可以拿下载下来的.TTF文件去转换得到另外两种格式的字体。字体文件格式的转换可以通过网站FontsQuirrel或 onlinefontconverter提供的在线字体转换服务获取。
.TTF或.OTF 适用于Firefox 3.5、Safari、Opera
.EOT 适用于Internet Explorer 4.0+
.SVG 适用于Chrome、IPhone
3、使用@font-face定义字体。如果你是在fontsquirrel.com进行的字体转换，那么连定义字体的步骤都可以免了。转换以后他会提供一个下载包，里面包含需要的字体格式和定义好字体样式的CSS文件stylesheet.css，还有一个供查看字体的demo.html文件。把字体和stylesheet.css拷贝到你的CSS文件夹目录里面就可以调用了。如何生成的样式不能满足你的要求，可以自己修改。
4、在html里面调用CSS。
附： CSS字体声明：
@font-face {
font-family: ‘fontNameRegular’;
src: url(’fontName.eot’);
src: local(’fontName Regular’),
local(’fontName’),
url(’fontName.woff’) format(’woff’),
url(’fontName.ttf’) format(’truetype’),
url(’fontName.svg#fontName’) format(’svg’);
}
/*其中fontName替换为你的字体名称*/
在页面中需要的地方使用该字体：
p { font: 13px fontNameRegular, Arial, sans-serif; }
h1{font-family: fontNameRegular}

html css js的一些整理

猜你喜欢