js动态添加元素。
$(document).ready(function(){
function Object(){
this.key_name="test1";
this.text="11";
}
getList();
addbutton();
function getList() {
$.getJSON("data.json", function (res) {
let str = "";
$.each(res, function (i, obj) {
str = "<span class='title'>" + obj.user + "</span>" + "<br/>" + "<span class='text'>" + obj.text + "</span>";
$(".list").append("<ul><li class='borderShadow'>" + str + "</li></ul>");
});
animateLis();
});
}
function addbutton(){
$(".container").append("<input id='btnAdd' type='button' value='我也要吐槽'/>");
$("#btnAdd").text("我也要吐槽");
}
function savePostToStorage(value){
var num = new Object();
num.key_name = localStorage.getItem("userName");
num.text = value;
localStorage.setItem(num.text,num.key_name);
alert("上传完成");
}
$(document).on("click","#btnAdd",function(e){
if($("#btnAdd").text()==='我也要吐槽'){
$("#btnAdd").attr('value','吐槽完毕');
$("#btnAdd").text("写的是真的冗余");
$(".form").show();
}else{
$(".form").hide();
$("#btnAdd").text('我也要吐槽');
$("#btnAdd").attr('value','我也要吐槽');
savePostToStorage($("#post_text").val());
addPostToPage();
$("#post_text").val("");
}
});
function addPostToPage(){
str = "<span class='title'>" + localStorage.getItem("userName") + "</span>" + "<br/>" + "<span class='text'>" + localStorage.getItem("userText") + "</span>";
$(".list").append("<ul style='display: block'><li >" + str + "</li></ul>");
}
function animateLis(){ /*此处遍历ul并按序输出*/
var time=0;
$('.list ul').each(function (i){
$(".list ul").eq(i).delay(time).fadeIn(500);
time+=1000;
});
$("#btnAdd").delay(time).animate({opacity:1});
}
});
关于web服务器的事
要是不用服务器,用户名始终是null
首先要下一个wampserver,并且启动之后要是绿色的,不是绿色的自己百度下,每个人问题都不一样我也不知道。
变成绿色后左键单击会有一个www directory,把整个工程的文件夹放进去
然后在浏览器里输入地址 http://127.0.0.1/(你文件夹所在位置)
举个例子 这里我要输入的网址就是 http://127.0.0.1/class/ex7/index.html