HTML5学习小记五

1.将ul-li的展示图片横排显示,使用float:left;
2.几个常用数字验证的正则表达式

"^\\d+$"　　//非负整数（正整数 + 0）
"^[0-9]*[1-9][0-9]*$"　　//正整数
"^((-\\d+)|(0+))$"　　//非正整数（负整数 + 0）
"^-[0-9]*[1-9][0-9]*$"　　//负整数
"^-?\\d+$"　　　　//整数
"^\\d+("　　//非负浮点数（正浮点数 + 0）
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"　　//正浮点数
"^((-\\d+("　　//非正浮点数（负浮点数 + 0）
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"　　//负浮点数
"^(-?\\d+)("　　//浮点数
var r = /^\+?[1-9][0-9]*$/;　　//正整数
r.test(str);

3.删除前后空格 String.prototype.trim = function () { return this.replace(/(^[ |　])|([ |　]$)/g, ""); }
4.window.history.forward(1); 阻止页面后退；
5.一个简单的合并数组的方法

var mergeTo = [4,5,6];
var mergeFrom = [7,8,9];
Array.prototype.push.apply(mergeTo, mergeFrom);
mergeTo; // is: [4, 5, 6, 7, 8, 9]

6.当页面滑动到底部时,判断去加载的两个方法:
方法一

$(window).scroll(function() {

var scrollTop = $(this).scrollTop();//方法返回或元素的滚动条的垂直位置。

var scrollHeight = $(document).height();//整篇文章的高度

var windowHeight = $(this).height();

if(scrollTop + windowHeight >= scrollHeight) {

orderid = $("#orderidHidden").val();

getdata(usertype, notvip, orderid);//执行的请求方法
}
});

方法二

var divH = document.body.scrollHeight,top = document.body.scrollTop,windowH = window.screen.availHeight;
if ((top + windowH) >divH) {
console.log('此处执行加载的方法');
}
console.log('网页 全文高：' + document.body.scrollHeight + ' 网页被卷去的高： ' + document.body.scrollTop + ' 屏幕可用工作区高度:' + window.screen.availHeight);

7.用感叹号可以将非布尔值转化为布尔值;
8.双波浪号的作用(将内容转化为数字,或者小数取整);NUll转化为-1,
9.创建随机数:创建一个0-100以内的随机整数:var randNum = ~~(Math.random()*100);
10.一个重复的计时器,不断的改变frame,类似跑马灯效果:

<div id="tier" style="position:absolute;width:100px;height:100px;left:0px;top:10px;background:red;"></div>
    <script type="text/javascript">
        setTimeout(function()
        {
           var div = document.getElementById("timer"),
               left = parseInt(div.style.left) + 5;
              div.style.left = left + "px";

           if (left < 200){
               setTimeout(arguments.callee, 50);
           }

        }, 50);
    </script>

HTML5学习小记五

推荐阅读更多精彩内容