J.chong

用戶驗證：即時提醒

_username1.onblur = function () {
  ajax('get', 'guestbook/index.php', 'm=index&a=verifyUserName&username=' + this.value, function (data) {
    var d = JSON.parse(data) //數據先轉為objec對像
    verifyUserNameMsg.innerHTML = d.message;
    if (d.code != 0) { //後端定義狀態碼
      verifyUserNameMsg.style.color = 'red'
    } 
    else {
      verifyUserNameMsg.style.color = 'green'
    }
  })
}

用戶註冊：

var password1 = document.getElementById('password1')
var btnReg = document.getElementById('btnReg')
btnReg.onclick = function () {
  ajax('post', 'guestbook/index.php', 'm=index&a=reg&username=' + encodeURI(_username1.value) + '&password=' + password1.value, function (data) {
    var d = JSON.parse(data)
    alert(d.message)
  })
}

更新狀態：

function udpateUserStatus() {
  var uid = getCookie('uid')
  var username = getCookie('username')
  if (uid) {
    _user.style.display = 'block'
    _userinfo.innerHTML = username
    _red.style.display = 'none'
    _login.style.display = 'none'
  } else {
    _user.style.display = 'none'
    _userinfo.innerHTML = username
    _red.style.display = 'block'
    _login.style.display = 'block'
  }
}

//getCookie封裝
function getCookie(key) {
  var arr1 = document.cookie.split('; ')
  for (var i = 0; i < arr1.length; i++) {
    var arr2 = arr1[i].split('=')
    if (arr2[0] == key) {
      return arr2[1]
    }
  }
}

退出：

_logout.onclick = function () {
  ajax('post', 'guestbook/index.php', 'm=index&a=logout', function (data) {
    var d = JSON.parse(data)
    alert(d.message)
    if (!d.code) {
      udpateUserStatus()
    }
  })
  return false
}

發送留言:

btnPost.onclick = function () {
  ajax('post', 'guestbook/index.php', 'm=index&a=send&content=' + encodeURI(content.value), function (data) {
    var d = JSON.parse(data)
    console.log(d);
    if (!d.code) {
      createList(d.data, true)
      udpateUserStatus()
    }
  })
}

顯示留言 ：

function showlist() {
  ajax('post', 'guestbook/index.php', 'm=index&a=getList&n=10&page=' + ipage, function (data) {
    var d = JSON.parse(data)
    console.log(d);
    var data = d.data //注意此處判斷；
    if (data) {
      for (var i = 0; i < data.list.length; i++) {
        createList(data.list[i])
      }
    } else {
      if (ipage == 1) {
        _list.innerHTML = '现在还没有留言，快来抢沙发！'
      }
      showMore.style.display = 'none'
    }
  })
}

創建元素添加到頁面:

function createList(data, insert) {
  var dl = document.createElement('dl')
  var dt = document.createElement('dt')
  var strong = document.createElement('strong')
  strong.innerHTML = data.username;
  dt.appendChild(strong)
  var dd1 = document.createElement('dd')
  dd1.innerHTML = data.content
  var dd2 = document.createElement('dd')
  dd2.className = 't'
  var a1 = document.createElement('a')
  a1.href = 'javascript:;'
  a1.innerHTML = '顶(<span>' + data.support + '</span>)'
  var a2 = document.createElement('a')
  a2.href = 'javascript:;'
  a2.innerHTML = '踩(<span>' + data.oppose + '</span>)'
  dd2.appendChild(a2)
  dd2.appendChild(a1)
  dl.appendChild(dt)
  dl.appendChild(dd1)
  dl.appendChild(dd2)
  if (insert && _list.children[0]) {     //如果有第一條，則插入，否則添加；最新總是顯示第一位
    _list.insertBefore(dl, _list.children[0])
  } else {
    _list.appendChild(dl)
  }
}

顯示更多

var showMore = document.getElementById('showMore')
showMore.onclick = function () {
  ipage++
  showlist()
}

comment_ajax.rar

1、首先，分四列，固定好，每次把div都加进li里，每次加都选最短列li加；

<ul id="ul1">
    <li></li>  <!-- 一定要有这四个初始li -->
    <li></li>
    <li></li>
    <li></li>
</ul>

2、写好后端php接收，得到格式如：

[
    {
        "id": "539529",
        "title": "",
        "referer": "https://www.tumblr.com/dashboard",
        "url": "http://www.wookmark.com/image/539529",
        ......
    },
    {
        "id": "539543",
        "title": "Épinglé par Scot Woodman sur Bionic Digitism | Pinterest",
......
]

3、操作需转换为Object对象 var data = JSON.parse(data)，再调用ajax函数

ajax('get', 'getPics.php', 'cpage=' + ipage, function (data) {
  var data = JSON.parse(data)
  //后续无数据
  if (!data.length) {
    return;
  }
  for (var i = 0; i < data.length; i++) {
    //获取每次最短li的下标，可能的值为:0,1,2,3
    var _index = getShort()
    var _div = document.createElement('div')
    var _img = document.createElement('img')
    _img.src = data[i].preview;
    //修正scroll时图片未加载li总高度计算问题
    _img.style.height = data[i].height * (200 / data[i].width) + 'px'
    //比例、
    var _h3 = document.createElement('h3')
    _div.appendChild(_img)
    _div.appendChild(_h3)
    _h3.innerHTML = data[i].title;
    _li[_index].appendChild(_div) //每次都往最短的li里扔东西
  }
  b = true; //加载完开门
  //获取高度最短的li
})

所以计算每次最短li方法：

function getShort() {
  //找最短列li
  var index = 0;
  var ih = _li[index].offsetHeight;
  for (var i = 1; i < ilen; i++) {
    if (_li[i].offsetHeight < ih) { //每次小于第index个，
      index = i;  //则给index赋值
      ih = _li[i].offsetHeight; //重新赋值
    }
  }
  return index; //最后return回去
}

//思路：如数组[5,6,1,4,3]
目的：找出最小值的位置；
位置：0,1,2,3,4
i = 0;iv = 5; index = 0
i = 1;iv = 6;[6>5]  index = 0[不变]
i = 2;iv = 1;[1<5]  index = 2
i = 3;iv = 4;[4>1]  index = 2[不变]
i = 4;iv = 3;[3>1]  index = 2[不变]
所以返回index = 2;

当滚动条拉到最后一个li时，触发onscroll事件；条件是：li的top值+本身高度 < 当前视窗 + 滚动条距离；

技巧：先设开关b，打开状态时b，当获取时b = false关，什么时候开，请求结束时再开，所以每次ajax加载完时b = true再打开

window.onscroll = function () {
  var _index = getShort()
  var oli = _li[_index]
  var scrolltop = document.body.scrollTop || document.documentElement.scrollTop;
  if (getTop(oli) + oli.offsetHeight < document.documentElement.clientHeight + scrolltop) {
    if (b) {
      ipage++
      getList()
      b = false; //关门
    }
  }
}

当前元素的到顶部的距离 ：

function getTop(obj) {
  var itop = 0;
  while (obj) {
    itop += obj.offsetTop;
    obj = obj.offsetParent
  }
  return itop;
}

運行