1、JS的使用
<title>JS的使用</title>
</head>
<script type="text/javascript" src="hello.js"></script>
<script type="text/javascript">
function f2(){
alert("嵌入式使用JS")
}
</script>
<body>
<input type="button" value="按钮1"
onclick="alert('事件定义式使用JS')"/>
<input type="button" value="按钮2" onclick="f2();"/>
<input type="button" value="按钮3" onclick="f3();"/>
2、计算平方
<title>计算平方</title>
<script type="text/javascript">
function cal() {
var num_obj=document.getElementById("num");//获取ID
var result_obj=document.getElementById("result")
var num=num_obj.value;
if (num_obj==""|| isNaN(num)) {
result_obj.innerHTML="请输入数字";
}else{
var n=parseInt(num);
result_obj.innerHTML=n*n;
}
}
</script>
</head>
<!-- 1、判断页面文本框中录入的文本是否为数值 -->
<!-- 2、如果输入的文本不能转换为数字,则提示重新输入-->
<!-- 3、如果输入的文本为数值,则计算其平方 -->
<h1>计算平方</h1>
<p>
<input type="text" id="num"/>
<input type="button" value="平方" onclick="cal();"/>
=<span id="result"></span>
</p>
3、猜数字,比较大小
<title>猜数字,比较大小</title>
<script type="text/javascript">
var init_num=parseInt(Math.random()*1000)+1;
console.log(init_num);
function guess() {
var num=document.getElementById("num").value;
var result=document.getElementById("result");
if(num==""|| isNaN(num)||num>1000||num<1){
result.innerHTML="必须输入1~~1000的数字";
}else{
if(num>init_num){
result.innerHTML="大了";
}else if(num<init_num){
result.innerHTML="小了";
}else{
result.innerHTML="猜对了";
}
}
}
</script>
</head>
<h1>猜数字</h1>
<!-- 1、判断页面文本框中录入的文本是否为数值 -->
<!-- 2、如果输入的文本不能转换为数字,则提示重新输入-->
<!-- 3、如果输入的文本为数值,则与内置的数字进行比较,并提示“大了小了” -->
<p>
<input type="text" id="num"/>
<input type="button" value="开始猜" onclick="guess();"/>
<span id="result" ></span>
</p>
4、阶乘
<title>阶乘</title>
<script type="text/javascript">
function cal() {
var num_obj=document.getElementById("num");
var result_obj=document.getElementById("result"); //获得对象
var num=num_obj.value;
if(num==""||isNaN(num)||num<1||num>100){
result_obj.innerHTML="必须输入1~100的数字";
}
//方法1、else {
// var n=parseInt(num);
// var sum=1;
// for(var i=1;i<=num;i++){
// sum *=i;
// }
//方法2
else{
var n=parseInt(num);
var sum=1;
//for(var i=n;i>0;i--)
for(var i=n;i;i--){
sum *=i;
}
result_obj.innerHTML=sum;
}
}
</script>
</head>
<h1>阶乘</h1>
<!-- 1、判断页面文本框中录入的文本是否为数值(1~100)的数 -->
<!-- 2、如果输入的文本为数值,则计算该整数的阶乘 -->
<p>
<input type="text" id="num"/>
<input type="button" value="阶乘为" onclick="cal();"/>
=<span id="result" ></span>
</p>
5、登录
<title>登录</title>
<style type="text/css">
/* 元素选择器 */
body {
font-family: "微软雅黑", '文泉泽正黑'
}
/*<!-- 类选择器-->*/
form {
width: 400px;
margin: 150px auto;
border: 1px solid #ccc;
}
/*<!-- 组合选择器-->*/
.form h1 {
text-align: center;
margin: 0;
padding: 5px;
border: 1 px solid #ccc;
}
.form p {
margin: 0;
padding: 20px;
border: 1px solid #ccc;
}
.form div {
text-align: center;
margin: 0;
padding: 10px;
border: 1px solid #ccc;
}
.form div input {
width: 60px;
height: 30px;
}
.error_msg {
color: #f00;
border: 1px solid #f00;
}
</style>
<script type="text/javascript">
function check_name() {
var name=document.getElementById("name").value;
var name_msg=document.getElementById("name_msg");
var reg=/^\w{3,20}$/;//正则表达式 测试是用test测试
if(reg.test(name)){
name_msg.className="";
return true;
}else {
name_msg.className="error_msg";
return false;
}
}
function check_pwd() {
var pwd=document.getElementById("pwd").value;
var pwd_msg=document.getElementById("pwd_msg");
var reg=/^\w{3,20}$/;//正则表达式 测试是用test测试
if(reg.test(pwd)){
pwd_msg.className="";
return true;
}else {
pwd_msg.className="error_msg";
return false;
}
}
</script>
</head>
<div class="form">
<form action="http://www.baidu.com" onsubmit="return(check_name()+check_pwd())==2">
<h1>登录</h1>
<p>
<label>账号:</label> <input type="text" id="name"
onblur="check_name();"> <span id="name_msg">3~20个字符</span>
</p>
<p>
<label>密码:</label> <input type="password" id="pwd" onblur="check_pwd();">
<span id="pwd_msg">3~20个字符</span>
</p>
<div>
<input type="submit" value="登录">
</div>
</form>
</div>
6、模拟方法的重载
<title>模拟方法的重载</title>
<script type="text/javascript">
/*
*方法
* 修饰词 返回值类型 方法名 参数类型 方法体
* 方法的签名
* arguments 参数 数组 内置 对参数的容器 实现方法的重载
*/
function sum() {
var sum=0;
for(var i=0;i<arguments.length;i++){
sum += arguments[i];
}
return sum;
}
function f1(){
var s=sum(1,2,3);
alert(s);
}
function f2(){
var s=sum(1,2,3,4,5,6);
alert(s);
}
</script>
</head>
<body>
<h1>模拟方法重载</h1>
<input type="button" value="1~3的和" onclick="f1();">
<input type="button" value="1~6的和" onclick="f2();">
7、简单计算器
<title>简单的计算器</title>
<script type="text/javascript">
function cal() {
var input=document.getElementById("input").value;
var out=document.getElementById("out");
try{
//var result=eval(input);
var result=eval("("+input+")");
out.innerHTML=result;
}catch (e) {
console.log(e);
out.innerHTML="表达式出错";
}
}
</script>
</head>
<body>
<h1>简单的计算器</h1>
<p>
<input type="text" id="input">
<input type="button" value="计算" onclick="cal();">
=<span id="out"></span>
</p>
8、时钟的停止和启动
<title>时钟的停止和启动</title>
<script type="text/javascript">
var timer;
function start(){
timer=setInterval(function () { //计时器
var now=new Date();
var time=now.toLocaleTimeString();//本地时间
var c=document.getElementById("clock");
c.innerHTML=time;
},1000);
}
function stop(){
clearInterval(timer); //局部的
}
</script>
</head>
<body>
<h1>动态时钟</h1>
<p>当前时间:<span id="clock"></span></p>
<p>
<input type="button" value="启动" onclick="start();">
<input type="button" value="停止" onclick="stop();">
</p>