<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01-基本选择器.html</title>
<!-- 引入jQuery -->
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script>
$(function(){
var biti=document.getElementById("tittle");
$biti=$(biti);
$biti.click(function(){
alert("非常满意")
})
})
</script>
</head>
<body >
<h1 id="tittle">请对我们的服务做出评价<h1>
</body>
</html>
javascript时间函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function mi(minute){
return minute>10? minute:"0"+minute; //return要放在这一行才可以；
}
function showtime(){
var week= new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
var today=new Date();
var time=document.getElementById("time");
var year=today.getFullYear();
var month=today.getMonth()+1;
var day=today.getDate();
var hour=today.getHours();
var minute=mi(today.getMinutes());
var secndes=mi(today.getSeconds());
var xiqi=today.getDay();
time.innerHTML="现在是："+ year+"年"+month+"月"+day+"日"+"\n\n" +(hour > 12 ? hour - 12 : hour)+":"+minute+":"+secndes+(hour>12?"PM":"AM")+"\n\n"+week[xiqi];
}
setInterval("showtime()",1000);
</script>
</head>
<body οnlοad="showtime()">
<h3>你好欢迎访问贵美商城！</h3>
<h1 id="time"> </h1>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01-基本选择器.html</title>
<!-- 引入jQuery -->
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script>
$(function(){
$("h2").click(function(){
$("h2").css("background-color","blue");
$("ul").css("display","block")
$("span").css("color","red")
})
})
</script>
</head>
<body class="border">
<h2>如何使用叮当网购物？</h2>
<ul style="display:none">
<li><span>方法一</span>: 注册成为网站会员</li>
<li><span>方法二</span>使用合作企业账号登录、如新浪微博、QQ、人人网账户</li>
</ul>
</body>
</html>
查找包含某个字母的字符串
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/jscript">
var num=new Array("America","Greece","Britain","Canada","China","Egypt");
document.write("在以下字符中"+"</br>");
var sum=0;
for(i=0;i<num.length;i++){
var country=num[i];
if(country.toLowerCase().indexOf("a")!=-1){
sum++;
}
document.write(num[i]+"</br>");
}
document.write("共有"+sum+"个字符串中含有a或A");
</script>
</head>
<body>
</body>
</html>
点击复选框提示信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01-基本选择器.html</title>
<!-- 引入jQuery -->
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script>
$(function(){
var biti=document.getElementById("tittle");
$biti=$(biti);
$biti.click(function(){
if(biti.checked)
{alert("操作成功，感谢您的配合")}
})
})
</script>
</head>
<body >
<input id="tittle" type="checkbox" />接受服务条款
</body>
</html>
点击改变字体，属性属性值的另一种写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>联系</title>
<script src="js/jquery-1.8.3.js"></script>
<script>
$(function(){
$("h2").click(function(){
$(this).css({color:"red","font-size":"34px"})
$("p").css({"line-height":"0px"})
})
})
</script>
</head>
<body>
<h2>你是人间的四月天</h2>
<p>笑亮了四面风</p>
<p>轻灵的在春的光辉中跳着舞</p>
<p>你是四月天空的云彩</p>
<p>黄昏吹着春天的软</p>
<p>.......</p>
<a href="#">点击查看全部</a>
</body>
</html>
点击图片加上边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>联系</title>
<script src="js/jquery-1.8.3.js"></script>
<style type="text/css">
.class{
border:red 10px solid;
}
</style>
<script>
$(function(){
$("img").click(function(){
$(this).addClass("class");
})
})
</script>
</head>
<body>
<img src="冬天.jpg">
</body>
</html>
改变层级内容显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function changeh1(){
document.getElementById("h1").innerHTML="新浪";
}
function showinput(){
var a="";
var inputArry=document.getElementsByTagName("input");//ElementsByTagName标签名
for(var i=0;i<inputArry.length;i++){
a+=inputArry[i].value+"\n\n";
}
document.getElementById("showin").innerHTML=a;//替换div id为showin的内容
}
function showsession(){
var b="";
var sessionArry=document.getElementsByName("session");//getElementsByName必须要以name命名。
for(var i=0;i<sessionArry.length;i++){
b+=sessionArry[i].value+"\n\n";
}
document.getElementById("showsession").innerHTML=b;
}
</script>
</head>
<body>
<table>
<tr>
<td><h1 id="h1">搜狐</h1></td>
<td><input type="button" value="改变层内容" οnclick="changeh1()"/></td>
</tr>
<tr>
<td><input type="text" name="session" value="春"/></td>
<td><input type="text" name="session"value="夏"/></td>
</tr>
<tr>
<td><input type="text" name="session" value="秋"/></td>
<td><input type="text" name="session" value="冬"/></td>
</tr>
<tr>
<td><input type="button" value="显示input内容" οnclick="showinput()"/></td>
<td><input type="button" value="显示session内容" οnclick="showsession()"/></td>
</tr
></table>
<div id="showin"></div>
<div id="showsession"></div>
</body>
</html>
计算成绩程序（return只能在函数里面写？？）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/jscript">
function kaoshi(){
var sum=0;
var num =prompt("请输考试科目的数量","");
var testnum=parseInt(num);
if(isNaN(num)){
alert("您输入的不是数字");
return;
}
if(testnum==0){
alert("您输入的 数字为0，要求输入为非零");
return;
}
if(testnum<0){
alert("您输入的 数字为负数，要求输入的数字不能小于0");
return;
}
for(i=1;i<=testnum;i++){
var score=prompt("请输入第"+i+"门的成绩","");
score=parseInt(score);
if( score<0){
alert("成绩不能为负数");
return;
}
sum+=score;
}
alert("三门课的总成绩为："+sum);
}
</script>
</head>
<body>
<input type="button" value="计算成绩" οnclick="kaoshi()"></input>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/jscript">
function order(){
var flag=confirm("您购买的商品信息如下：\n商品名称：诺基亚n95;\n商品数量:1件\n商品单价：2200\n运费：20元；\n费用总计：2400元\n请确认以上信息是否有误？")
if(flag==true)
alert("订单提交");
else
alert("提交取消");
}
</script>
</head>
<body>
<table width="100%" border="1px">
<tr>
<td colspan="5" align="center">简易购物车</td>
</tr>
<tr>
<td align="center">商品名称</td>
<td align="center">数量（件）</td>
<td align="center">单价（元）</td>
<td align="center">运费（元）</td>
<td align="center">合计（元）</td>
</tr>
<tr>
<td align="center">诺基亚n95</td>
<td align="center">1</td>
<td align="center">2200</td>
<td align="center">20</td>
<td align="center">2400</td>
</tr>
<tr>
<td colspan="5" align="center"> <input type="button" value="提交订单" οnclick="order()"></td>
</tr>
</table>
</body>
</html>
