Day13
javascript
简单实现图片的轮播
上代码:
//js代码本人写在头文件中。
<script type="text/javascript">
var picsArr = new Array();
picsArr[0] = "images/lunbotu/fang1.jpg";//将图片放入一个数组中
picsArr[1] = "images/lunbotu/fang2.jpg";
picsArr[2] = "images/lunbotu/fang3.jpg";
var index = 0;//图片位置
var timer = 0;//自动时间
window.onload = showPic;
function showNext() {
//1.定时 2.点击下一页
clearTimeout(timer);
showPic().fadeIn(100);
}
function showPic() {//下一页
if(index<picsArr.length-1){
index++;
}else{
index = 0;
}
document.getElementById("pic").src = picsArr[index]; //找到id=pic时将其中src属性换成写的。
timer = setTimeout("showPic()",2000);
}
function showPre() {
showPuc()
}
function showPuc() {//上一页
if(index>0){
index--;
}else{
index = picsArr.length-1;
}
document.getElementById("pic").src = picsArr[index];
}
</script>
//网页代码
<div class="width1190">
<ul id="adv">
<li style="display: block;"><img src="images/lunbotu/fang1.jpg" alt="" id="pic"></li>
<img src="images/lunbotu/l.png" id="prev" alt="" οnclick="showPre()">
<img src="images/lunbotu/r.png" id="next" alt="" οnclick="showNext()">
</ul>
</div>
javascript登录实现
<script type="text/javascript">
function postLogin() {
//1.获得表单里的值
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
var params='username='+username+'&password='+password;
alert(params);
var requset=new XMLHttpRequest();//2.创建XMLHttpRequest对象
requset.open("post","${pageContext.request.contextPath}/user/Login2.do",true);//3.发送请求
requset.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//post写法必须写的固定写法
requset.send(params);
//4.监听状态的改变
requset.onreadystatechange = function (){
if(requset.readyState==4&&requset.status==200){//满足这样的条件就表明请求发送成功了
var aaa=requset.responseText;
if(aaa=="success")
alert('登录成功')
else
alert('登录失败')
alert(params);
}
}
}
</script>
最后在提交的按钮里加一个onclick的监听就可以实现上面的代码了
AjAX以及jQuery实现登录
是异步的js和xml
同步:同时只能干一件事情
异步:可以同时做很多事情
例:烧水的时候可以写作业,水开了在泡茶,泡好茶接着写作业
需要监听,通知水开了
post:性对安全,传输的数据量大长度没有限制,参数写在http的包体中
get:效率高,参数写在URL里面,长度有限制,相对不安全
<script type="text/javascript">
function postlogin() {
var username = $('#username').val();//获取值
var password = $('#password').val();
$.ajax({
type:"post",
url:"${pageContext.request.contextPath}/user/Login2.do",
data:{
username:username,
password:password,
},
success:function (data) {
if(data=="success111")
alert('成功');
else
alert('失败');
},
error:function () {
alert('连接失败');
}
});
}
</script>