目录
1.九九乘法表
<script>
var str = "";
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
str = str + j + "*" + i + "=" + i * j + "\t";
}
str = str + "\n";
}
console.log(str);
</script>
----------------------------------------
2.计算两数运算结果
<body>
<input
name="btn"
type="button"
value="计算两数运算结果"
onclick="jisuan()"
/>
</body>
<script>
function jisuan() {
var result;
var num1 = prompt("请输入第一个数");
var num2 = prompt("请输入第二个数");
var operator = prompt("请输入运算符");
switch (operator) {
case "+":
result = parseInt(num1) + parseInt(num2);
break;
case "-":
result = parseInt(num1) - parseInt(num2);
break;
case "*":
result = parseInt(num1) * parseInt(num2);
break;
case "/":
if (num2 != 0) {
result = parseInt(num1) / parseInt(num2);
} else {
alert("输入错误!!!");
}
return;
default:
alert("输入的运算符错误!");
return;
}
alert("计算结果为" + num1 + operator + num2 + " = " + result);
}
</script>
----------------------------------------
3.点击按钮显示当前按钮下标
<body>
<button style="width: 50px; height: 50px" id="1">1</button>
<button style="width: 50px; height: 50px" id="2">2</button>
<button style="width: 50px; height: 50px" id="3">3</button>
<button style="width: 50px; height: 50px" id="4">4</button>
<button style="width: 50px; height: 50px" id="5">5</button>
</body>
<script>
onload = function () {
var arr = document.getElementsByTagName("button");
for (var i = 0; i < arr.length; i++) {
arr[i].onclick = function () {
alert(this.id);
};
}
};
</script>
----------------------------------------
4.平年闰年判断
<script>
var year = prompt("请输入年份");
if((year % 4 == 0 && year % 400!=0 ) || year % 400 == 0){
document.write(year+"年是闰年")
}else{
document.write(year+"年是平年")
}
</script>
----------------------------------------
5.页面跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>跳转</title>
</head>
<body>
<div>这是跳转界面</div>
<span id="da" style="color: red">5</span>秒后回到首页...
</body>
<script>
function aa() {
var da = parseInt(document.getElementById("da").innerHTML);
da--;
document.getElementById("da").innerHTML = da;
}
var mytime = setInterval("aa()", 1000);
function timeout() {
clearInterval(mytime);
location = "start.html";
}
setTimeout("timeout()",5000)
</script>
</html>
----------------------------------------
6.点击按钮获得相应的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul>
<li name="xxx" id="li01">孙悟空</li>
<li name="xxx">八戒</li>
<li>唐僧</li>
</ul>
<div id="concent"></div>
<button onclick="getLi()">点击获得一个Li</button>
<button onclick="getLis()">点击获得两个Li</button>
<button onclick="getLiByTagName()">点击获得所有li</button>
</body>
<script>
//-------------------------------
function getLi() {
//换名
var obj = document.getElementById("li01");
obj.innerHTML = "白骨精";
}
//-------------------------------
function getLis() {
//根据name属性 获取元素 返回数组
var objs = document.getElementsByName("xxx");
var arr = new Array();
for (var i = 0; i < objs.length; i++) {
var elementLi = objs[i];
arr.push(elementLi.innerHTML);
}
console.log(arr);
document.getElementById("concent").innerHTML = arr.join("-");
}
//------------------------------
function getLiByTagName() {
var objs = document.getElementsByTagName("li");
for (var i = 0; i < objs.length; i++) {
var elementLi = objs[i];
alert(elementLi.innerHTML);
}
}
</script>
</html>
----------------------------------------
7.时间操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>启动/暂停</title>
</head>
<body>
<div id="myclock"></div>
<br>
<button onclick="start()">启动/暂停</button>
<button onclick="tiaozhaun()">点击跳转</button>
</body>
<script>
var bool = true;
var mytime;
//
function start() {
if (bool) {
window.clearInterval(mytime);
bool = false;
} else {
mytime = setInterval("time()", 1000);
bool = false;
}
}
function time() {
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML =
"现在是:" +year +"年" +month +"月" +day +"日" +hh +":" +mm +":" +ss;
}
time();
mytime = setInterval("time()", 1000);
function tiaozhaun(){
location="跳转.html"
}
</script>
</html>
----------------------------------------
8.节点操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <ul id="xyj"> <li>猪八戒1</li> <li id="zbj">猪八戒2</li> <li>猪八戒3</li> </ul> <button onclick="getParent()">获得父级节点</button> <button onclick="getChildNodes()">获得所有子集</button> <button onclick="getNextNodes()">获得下一个子节点</button> <button onclick="addElementNode()">创建元素并插入</button> </body> <script type="text/javascript"> function addElementNode(){ var li = document.createElement("li"); li.innerText = "孙悟空"; li.style.color = "red"; document.getElementById("xyj").appendChild(li); } function getParent(){ document.getElementById("zbj").parentNode.style.color = "red"; } function getChildNodes(){ var arr = document.getElementById("xyj").childNodes; for(var i = 0;i<arr.length;i++) { if(arr[i].nodeType==1){ alert(arr[i].innerText); } } } function getNextNodes(){ var zbj = document.getElementById("zbj"); var nextNode = zbj.nextSibling||zbj.nextElementSibling; alert(nextNode.nodeType); } </script> </html>
----------------------------------------
9.表单验证1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="get" action="1111" onsubmit="return lgoinSubmit()">
<!--onfocus获得焦点 onblur失去焦点-->
用户名:<input type="text" onfocus="focusChecked(this)"
onblur="blurChecked(this,1)" id="uname"/><span id="uname_err" pl="用户名4到6位" ></span>
<br/>
密码:
<input type="password" onblur="blurChecked(this,2)"
onfocus="focusChecked(this)"
id="pwd"/><span id="pwd_err" pl="密码必须是6位" ></span>
<br/>
<input type="submit" value="登录" />
</form>
</body>
<script>
function focusChecked(obj){
obj.nextSibling.innerText = obj.nextSibling.getAttribute("pl");
obj.nextSibling.style.fontSize = "12px";
obj.nextSibling.style.color = "blue";
}
function blurChecked(obj,type){
var bool = true;
if(type==1){
if(obj.value.length>6||obj.value.length<4){
bool = false;
}
}else if(type==2){
if(obj.value.length!=6){
bool = false;
}
}
if(bool){
obj.nextSibling.innerText = "输入正确";
obj.nextSibling.style.fontSize = "12px";
obj.nextSibling.style.color = "green";
}else{
obj.nextSibling.innerText = "输入错误";
obj.nextSibling.style.fontSize = "12px";
obj.nextSibling.style.color = "red";
}
}
function lgoinSubmit(){
return false;
}
</script>
</html>
----------------------------------------
10.表单验证2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>dom</title>
</head>
<body>
用户名:
<input type="text" id="uname" />
<br />
性别:
<input type="radio" name="sex" id="sex" value="0" />女
<input type="radio" name="sex" id="sex" value="1" checked />男
<br />
爱好:
<input type="checkbox" name="hobby" value="0" />唱
<input type="checkbox" name="hobby" value="1" checked />跳
<input type="checkbox" name="hobby" value="2" />rap
<br />
国家:
<select id="city">
<option value="0">请选择</option>
<option value="1001">中国</option>
<option value="1002">日本</option>
<option value="1003">美国</option>
</select>
<br />
备注:
<textarea id="bz" placeholder="请输入备注">xxx</textarea>
<br />
<button onclick="loginSubmit()">提交</button>
<button onclick="defaultValue()">默认值</button>
</body>
<script>
function defaultValue(){
var uname = document.getElementById("uname");
uname.value = "哈哈哈";
var sexs = document.getElementsByName("sex");
for(var i = 0;i<sexs.length;i++){
if(sexs[i].value==2){
sexs[i].checked = true;
}
}
var city = document.getElementById("city");
city.value = 1003;
var bz = document.getElementById("bz");
bz.innerText = "张三";
}
function loginSubmit() {
// var uname = document.getElementById("uname");
// uname.value = "哈哈哈";
//获得单选框中的值
// var sexs = document.getElementsByName("sex");
// var sex;
// for (var i = 0; i < sexs.length; i++) {
// if (sexs[i].checked) {
// sex = sexs[i].value;
// }
// }
//获得复选框中的值
// var hobbys = document.getElementsByName("hobby");
// var arrHobbys = new Array();
// for (var i = 0; i <hobbys.length; i++) {
// if (hobbys[i].checked) {
// arrHobbys.push(hobbys[i].value);
// }
// }
// alert(arrHobbys.join(","));
//获取下拉框中的值
// var city=document.getElementsByName("city");
// if(city.value==0){
// document.getElementById("city_err").innerHTML = "请选择国家";
// }else{
// document.getElementById("city_err").innerHTML = "";
// }
//获得文本域的值
var bz =document.getElementById("bz");
alert(bz.value);
}
</script>
</html>
----------------------------------------