步步为营-55-js练习
1:加法计算器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
//01-窗体加载
window.onload = function () {
//03-单击按钮触发事件
document.getElementById("btnAdd").onclick = function () {
//02-获取数据
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
document.getElementById("result").value = num1 + num2;
}
}
</script>
</head>
<body>
<input type="text" id="num1"/>
+
<input type="text" id="num2" />
=
<input type="text" id="result" /> <input type="button" id="btnAdd" value="相加" />
</body>
</html>
加法计算器
2:点击触发
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
window.onload= function() {
//获取所有的按钮
var btn = document.getElementsByName("btnCry");
for (var i = ; i < btn.length; i++) { btn[i].onclick = function() {
this.value = '呜呜';
} }
}
</script>
</head>
<body>
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
<input type="button" name="btnCry" value="哈哈" />
</body>
</html>
3: 小鸟飞
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
//01_设置图片编号
var index = ;
window.onload = function() {
//02-设置定时器,每个一段时间调用图片切换方法
setInterval(ImgChange,);
}
function ImgChange()
{
index ++;
if (index>) {
index = ;
}
//03-找到小鸟的图片
var birdfly = document.getElementById("BridFly");
//04-设置图片
birdfly.src = '../Img/bird' + index + '.png';
}
</script>
</head>
<body>
<img src="../Img/bird1.png" id="BridFly"/>
</body>
</html>
4: 文字跑马灯
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
/*02设置为绝对定位*/
#PMD {
position: absolute;
width: 100px;
background-color: blue;
}
</style>
<script>
//04 设置自增字段
var left = ;
var dire = ;
window.onload = function () {
//03设置定时器
setInterval(Move,);
}
//04设置move方法
function Move() {
//05获得div元素
var pmdDiv = document.getElementById("PMD");
//06设置其移动
left = left + *dire;
//07判断宽度
if (left + >= window.innerWidth) {
dire = -;
}
if (left <= ) {
dire = ;
}
pmdDiv.style.left = left + 'px';
}
</script>
</head>
<body>
<!--01设置存放跑马灯文字的div-->
<div id="PMD">跑马灯文字</div>
</body>
</html>
5:动态操作元素
放置三个按钮,分别添加图片.文本框.超链接.放置一个按钮,删除所有元素
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
window.onload = function() {
document.getElementById('btnImg').onclick = function() {
var img = document.createElement('img');
img.src = "../Img/bird1.png";
document.getElementById('addDynamic').appendChild(img);
};
document.getElementById('btnText').onclick = function() {
var text = document.createElement('input');
text.type = "text";
text.id='txtNew'
text.value = '新增';
document.getElementById('addDynamic').appendChild(text);
};
document.getElementById('btns').onclick = function() {
var a = document.createElement('a'); a.href = 'http://www.baidu.com';
//注意这条语句很重要
a.innerHTML = '百度';
//注意txtNew有且只能有一个
document.getElementById('addDynamic').insertBefore(a,txtNew);
};
document.getElementById('btnRemove').onclick = function () {
var childs = document.getElementById('addDynamic').childNodes;
for (var i = childs.length -;i>=; i--) {
document.getElementById('addDynamic').removeChild(childs[i]);
} };
}
</script>
</head>
<body>
<input type="button" id="btnImg" value="添加图片" />
<input type="button" id="btnText" value="添加文本框" />
<input type="button" id="btns" value="超链接" />
<input type="button" id="btnRemove" value="移除" /> <div id="addDynamic"></div>
</body>
</html>
6:评分功能
设置五个等级,当鼠标点击时给出星级.鼠标没有点击,显示上次得分.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
window.onload = function () {
var imgs = document.getElementsByTagName('img');
var clickId=; for (var i = ; i < imgs.length; i++)
{
//02-01 鼠标放置事件
imgs[i].onmouseover = function() {
var id = this.id;
for (var j = ; j < i; j++) {
if (j < id) {
imgs[j].src = "../Img/star2.png";
} else {
imgs[j].src = "../Img/star1.png";
}
}
}; //02-02 鼠标移开事件
imgs[i].onmouseout = function() {
for (var j = ; j < clickId; j++) {
imgs[j].src = "../Img/star2.png";
}
for (var j = clickId; clickId<imgs.length; j++) {
imgs[j].src = "../Img/star1.png";
}
}; //02-03 鼠标点击事件
imgs[i].onclick = function() {
clickId = parseInt(this.id); };
}
}
</script>
</head>
<body>
<!--01放置五个评分的图片-->
<img id="" name="imgScore" src="../Img/star1.png" />
<img id="" name='imgScore' src="../Img/star1.png" />
<img id="" name='imgScore' src="../Img/star1.png" />
<img id="" name='imgScore' src="../Img/star1.png" />
<img id="" name='imgScore' src="../Img/star1.png" />
</body>
</html>
7: 野人快跑
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
#imgsavage {
position: absolute;
width: 100px;
}
</style>
<script>
var left = ;
var dir = ;
window.onload = function () {
setInterval(imgChange, );
var imgIndex = ;
function imgChange() {
var imgsav = document.getElementById('imgsavage');
imgsav.src = "../Img/walk" + imgIndex + ".png";
imgsav.style.left = left + 'px';
imgIndex = imgIndex + ;
left = left + * dir;
if (imgIndex>) {
imgIndex = ;
}
if (left+ > window.innerWidth) {
dir = -;
}
if (left<=) {
dir = ;
}
}
}
</script>
</head>
<body>
<!--01首先定义一个div,用于放置野人图片-->
<!--<div id="savageImg"><img src="../Img/walk1.png" /></div>-->
<img id="imgsavage" src="../Img/walk1.png" />
</body>
</html>
野人快跑
8:按钮5秒后可用
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
var lastTime = ;
window.onload = function() {
setInterval(changText, );
}; function changText() {
lastTime --;
var btn = document.getElementById("btnLast");
btn.value = '按钮' + lastTime + '秒后可用';
if (lastTime <= ) {
btn.disabled = false;
btn.value = '按钮 可用';
}
btn.onclick = function() { alert("可用了"); }
}
</script>
</head>
<body>
<input id="btnLast" type="button" disabled="disabled" value="按钮5秒后可用"/>
</body>
</html>
9:超链接变红
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
window.onload = function() {
//01-动态创建超链接
for (var i = ; i < ; i++) {
var herf = document.createElement('a');
herf.href = "#";
herf.innerHTML = " "+i+" ";
herf.id = i;
document.getElementById('herfs').appendChild(herf);
}
var herfs = document.getElementsByTagName('a');
for (var i = ; i < herfs.length; i++) {
herfs[i].onclick = function() {
this.style.color = "red";
}
} }
</script>
</head>
<body>
<div id="herfs"></div>
</body>
</html>
10:透视图
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
.divStyle {
border: 1px solid;
position: absolute;
}
</style> <script>
window.onload = function() {
var divWidth = ;
for (var i = ; i < ; i++) {
var div = document.createElement('div');
divWidth = - ( * i); div.className = 'divStyle';
div.style.width = divWidth + 'px';
div.style.height = divWidth + 'px';
div.style.left = * i + 'px';
div.style.top = * i + 'px'; document.getElementById('divSet').appendChild(div);
}
}
</script>
</head>
<body>
<div id="divSet" style="width: 1000px; height: 1000px; border: 1px solid; "></div>
</body>
</html>
法一
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script> onload = function() {
var div = document.getElementById("div");
for (var i = ; i < ; i++) {
var tem = document.createElement("div");
tem.style.border = '1px solid red';
tem.style.margin = + 'px';
div.appendChild(tem);
div = tem;
}
}
</script>
</head>
<body>
<div id="div" style="width: 500px; height: 500px;"></div>
</body>
</html>
法二
11 根据json对象创建表格
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
.table {
border: 1px solid;
}
</style>
<script>
var list = [
{ id: , country: '中国', capital: '北京' },
{ id: , country: '美国', capital: '华盛顿' },
{ id: , country: '日本', capital: '东京' },
{ id: , country: '韩国', capital: '首尔' }
];
onload = function() {
var body = document.getElementsByTagName('body')[];
//创建表
var table = document.createElement('table');
table.className = 'table';
body.appendChild(table); //设置标题列
var thead = document.createElement('thead');
var temp = list[];
for (var key in temp) {
var th = document.createElement('th');
th.className = 'table';
th.innerHTML = key;
thead.appendChild(th);
};
//把行添加到表上
table.appendChild(thead);
//创建列,并填充数据
for (var i = ; i < list.length; i++) {
//遍历对象
var item = list[i];
//设置行
var tr = document.createElement('tr');
if (i% == ) {
tr.style.backgroundColor = "red";
}; for (var key in temp) {
//设置列td1
var td1 = document.createElement('td');
td1.innerHTML = item[key];
td1.className = 'table';
//把列添加到行上
tr.appendChild(td1); }; //把行添加到表上
table.appendChild(tr);
}
}
</script>
</head>
<body> </body>
</html>
12 在11的基础上.鼠标滑过行,高亮显示,鼠标离开,恢复原状
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
.table {
border: 1px solid;
}
</style>
<script>
var list = [
{ id: , country: '中国', capital: '北京' },
{ id: , country: '美国', capital: '华盛顿' },
{ id: , country: '日本', capital: '东京' },
{ id: , country: '韩国', capital: '首尔' }
];
//01-加载事件
onload = function() {
var body = document.getElementsByTagName('body')[];
//创建表
var table = document.createElement('table');
table.className = 'table';
body.appendChild(table); //设置标题列
var thead = document.createElement('thead');
var temp = list[];
for (var key in temp) {
var th = document.createElement('th');
th.className = 'table';
th.innerHTML = key;
thead.appendChild(th);
};
//把行添加到表上
table.appendChild(thead);
//创建列,并填充数据
for (var i = ; i < list.length; i++) {
//遍历对象
var item = list[i];
//设置行
var tr = document.createElement('tr');
if (i% == ) {
tr.style.backgroundColor = "red";
}; for (var key in temp) {
//设置列td1
var td1 = document.createElement('td');
td1.innerHTML = item[key];
td1.className = 'table';
//把列添加到行上
tr.appendChild(td1); }; //把行添加到表上
table.appendChild(tr);
}
//02-鼠标移上---高亮显示
var trs = document.getElementsByTagName('tr');
for (var i = ; i < trs.length; i++) {
trs[i].onmouseover = function() {
this.style.backgroundColor = "yellow";
}
}
//03 鼠标移开---恢复到原来
var trs_Stute = document.getElementsByTagName('tr');
for (var i = ; i < trs_Stute.length; i++) {
if (i % == ) {
trs_Stute[i].onmouseout = function() {
this.style.backgroundColor = "red";
}
}
else {
trs_Stute[i].onmouseout = function () {
this.style.backgroundColor = "white";
}
}
} } </script>
</head>
<body> </body>
</html>
13 控制div的显示与隐藏
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style> </style>
<script>
window.onload = function() {
var btn = document.getElementById("btnDiv");
var div = document.getElementById('div');
btn.onclick = function () { if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none"; }
}
}
</script>
</head>
<body>
<div id="div" style="display:none"> 通过按钮控制div的显示于隐藏</div>
<input id="btnDiv" type="button" value="显示div/隐藏div"/>
</body>
</html>
14 图片跟着鼠标走
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
#imgIdle {
position: absolute;
width: 63px;
height: 75px;
}
</style>
<script>
//01 获取鼠标的位置
//01-01 鼠标移动 mouseover
//01-02 通过事件 event e 获取x y 坐标
onload = function () {
window.onmousemove = function (e) {
//02 获取对象
var img1 = document.getElementById("imgIdle");
//设置xy
img1.style.left = e.clientX - parseInt(img1.width) / + 'px';
img1.style.top = e.clientY - parseInt(img1.height) / + 'px';
}
} //02 指定图片的位置
</script>
</head>
<body>
<img id="imgIdle" src="../Img/idle.png" />
</body>
</html>
15 右下角显示元素id信息
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
#divID {
position: absolute;
width: 80px;
height: 80px;
border: 1px;
background: yellow;
display: none;
}
</style>
<script>
onload = function() { var childs = document.getElementsByName('items'); for (var i = ; i < childs.length; i++) {
childs[i].onmouseover= function() {
//调用方法--显示div
showDiv(this);
}
} function showDiv(obj) {
//获取div的坐标
var x = obj.offsetLeft + obj.offsetWidth;
var y = obj.offsetTop + obj.offsetHeight;
//获取div的显示
var div = document.getElementById('divID');
div.style.left = x + 'px';
div.style.top = y + 'px';
div.style.display = "block";
div.innerHTML = 'id = '+ obj.id;
}
}
</script>
</head>
<body>
<input name="items" id="button1" type="button" value="按钮1" />
<input name="items" id="text1" type="text" value="文本框" />
<input name="items" id="button2" style="height: 50px" type="button" value="按钮4" /> <div id="divID" ></div> </body>
</html>
16 看图识国家
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
#showInfo {
position: absolute;
width: 200px;
height: 200px;
background: green;
display: none;
}
.img {
width: 200px;
height: 200px;
}
</style>
<script>
var list = {
'zg': ['中国', '北京', '牡丹', '世界第二大经济体'],
'mg': ['美国', '华盛顿', '玫瑰', '白人与黑人一起劳动，却想到仇视'],
'rb': ['日本', '东京', '樱花', '世界文明的两样东西：忍者和动漫'],
'hg': ['韩国', '首尔', '无穷', '民族意识超强']
}; window.onload = function() {
var imgs = document.getElementsByTagName('img');
for (var i = ; i < imgs.length; i++) {
imgs[i].onmouseover = function (e) {
//01 获取国家id
var imgid = this.id;//ng
//02 根据id获取list中的国家信息
var msg = list[imgid];
//03构造描述字符串
var msgStr = '国家：' + msg[] + '<br>首都：' + msg[] + '<br>国花：' + msg[] + '<br>描述：' + msg[];
//获取div
var div = document.getElementById('showInfo');
//设置div
div.style.left = e.clientX + 'px';
div.style.top = e.clientY + 'px';
div.innerHTML = msgStr;
div.style.display = 'block';
}
}
}
</script>
</head>
<body>
<div>
<img class="img" name="img" id="hg" src="../Img/hg.jpg" />
<img class="img" name="img" id="mg" src="../Img/mg.jpg" />
<img class="img" name="img" id="rb" src="../Img/rb.jpg" />
<img class="img" name="img" id="zg" src="../Img/zg.jpg" />
</div>
<div id="showInfo"> </div>
</body>
</html>
17 正则表达式
两种写法
var regObj = new RegExp("\\d{5}");
var regObj = /\d/;
17.1 匹配
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
onload = function() {
document.getElementById('btnTest').onclick = function () {
//01 构建正则表达式
var repExp = /^\d{6}$/;
//02 获取用户输入的值
var txtMsg = document.getElementById('txtMsg').value;
//03 进行匹配
if (repExp.test(txtMsg)) {
alert('OK');
} else {
alert('no');
} }
}
</script>
</head>
<body>
<input type="text" id="txtMsg"/>
<input type="button" id="btnTest" value="匹配test"/>
</body>
</html>
匹配邮政编码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
onload = function() {
document.getElementById('btnTest').onclick = function () {
//01 构建正则表达式
var repExp = /^\w+@[a-z0-]+\..+$/;
//02 获取用户输入的值
var txtMsg = document.getElementById('txtMsg').value;
//03 进行匹配
if (repExp.test(txtMsg)) {
alert('OK');
} else {
alert('no');
} }
}
</script>
</head>
<body>
<input type="text" id="txtMsg"/>
<input type="button" id="btnTest" value="匹配test"/>
</body>
</html>
邮箱匹配
17.2 获取
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
onload = function() {
//匹配
document.getElementById('btnTest').onclick = function () {
//01 构建正则表达式
var repExp = /^\w+@[a-z0-]+\..+$/;
//02 获取用户输入的值
var txtMsg = document.getElementById('txtMsg').value;
//03 进行匹配
if (repExp.test(txtMsg)) {
alert('OK');
} else {
alert('no');
} }
//提取
document.getElementById('btnExec').onclick = function() {
var str = document.getElementById('txtMsg').value; //'火车票12306 电信10000 火警119';
var reg = /\d+/g;//匹配所有
// var reg = /\d+/;//只匹配第一个
while (true) {
var result = reg.exec(str);
if (result==null) {
break;
}
alert(result);
}
}
}
</script>
</head>
<body>
<input type="text" id="txtMsg"/>
<input type="button" id="btnTest" value="匹配test" />
<input type="button" id="btnExec" value="提取Exec"/>
</body>
</html>
提取
17.3 提取组
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
onload = function() {
//匹配
document.getElementById('btnTest').onclick = function () {
//01 构建正则表达式
var repExp = /^\w+@[a-z0-]+\..+$/;
//02 获取用户输入的值
var txtMsg = document.getElementById('txtMsg').value;
//03 进行匹配
if (repExp.test(txtMsg)) {
alert('OK');
} else {
alert('no');
} }
//提取
document.getElementById('btnExec').onclick = function() {
var str = document.getElementById('txtMsg').value; //'火车票12306 电信10000 火警119';
var reg = /\d+/g;//匹配所有
// var reg = /\d+/;//只匹配第一个
while (true) {
var result = reg.exec(str);
if (result==null) {
break;
}
alert(result);
}
}
//提取组--匹配第二个数字
document.getElementById('btnGropExec').onclick = function () {
var str = document.getElementById('txtMsg').value;
var reg = /\d(\d)\d*/g;
while (true) {
var result = reg.exec(str);
if (result == null) {
break;
}
alert(result);
}
}
}
</script>
</head>
<body>
<input type="text" id="txtMsg"/>
<input type="button" id="btnTest" value="匹配test" />
<input type="button" id="btnExec" value="提取Exec" />
<input type="button" id="btnGropExec" value="提取组Exec"/>
</body>
</html>
17.4 替换
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
onload = function() {
//匹配
document.getElementById('btnTest').onclick = function () {
//01 构建正则表达式
var repExp = /^\w+@[a-z0-]+\..+$/;
//02 获取用户输入的值
var txtMsg = document.getElementById('txtMsg').value;
//03 进行匹配
if (repExp.test(txtMsg)) {
alert('OK');
} else {
alert('no');
} }
//提取
document.getElementById('btnExec').onclick = function() {
var str = document.getElementById('txtMsg').value; //'火车票12306 电信10000 火警119';
var reg = /\d+/g;//匹配所有
// var reg = /\d+/;//只匹配第一个
while (true) {
var result = reg.exec(str);
if (result==null) {
break;
}
alert(result);
}
}
//提取组--匹配第二个数字
document.getElementById('btnGropExec').onclick = function () {
var str = document.getElementById('txtMsg').value;
var reg = /\d(\d)\d*/g;
while (true) {
var result = reg.exec(str);
if (result == null) {
break;
}
alert(result);
}
}
//替换
document.getElementById('btnReplace').onclick = function () {
var str = document.getElementById('txtMsg').value;
var reg = /\s+/g;
var result = str.replace(reg, '');
alert(result);
}
}
</script>
</head>
<body>
<input type="text" id="txtMsg"/>
<input type="button" id="btnTest" value="匹配test" />
<input type="button" id="btnExec" value="提取Exec" />
<input type="button" id="btnGropExec" value="提取组Exec"/>
<input type="button" id="btnReplace" value="替换" /> </body>
</html>
18 密码强度验证
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
onload = function() {
//失去焦点验证
document.getElementById("txtPwd").onblur = function () {
var msg = this.value;
//获取提示框
var msgResult = document.getElementById("resultMsg");
if (msg.length < ) {
msgResult.innerHTML = '弱爆了';
} else {
var pw = ;
if (/[a-zA-Z]+/.test(msg)) {
pw++;
}
if ( /[-]+/.test(msg) ) {
pw++;
}
if ( /[!@#$%^&*()]+/.test(msg)) {
pw++;
}
}
switch (pw) {
case :
msgResult.innerHTML = '弱';
break;
case :
msgResult.innerHTML = '中';
break;
case :
msgResult.innerHTML = '强';
break; }
}
}
</script>
</head>
<body>
<input type="text" id="txtPwd"/>
<span id="resultMsg"></span>
</body>
</html>
步步为营-55-js练习的更多相关文章
- 100多个基础常用JS函数和语法集合大全
网站特效离不开脚本,javascript是最常用的脚本语言,我们归纳一下常用的基础函数和语法: 1.输出语句:document.write(""); 2.JS中的注释为//3.传统 ...
- JS函数
1.document.write(""); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个浏 ...
- JS常用方法函数整理
1.document.write("");为输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...
- JS常用语句
JavaScript常用语句 1.document.write(""); 输出语句 2.JS中的注释为 // 3.传统的HTML文档顺序是: document-& ...
- 学完了js的知识，一起分享总结知识点
又一个知识点学完了,到了总结学习效果和知识总结的时间了.js这个编程语言相对于html和css的逻辑性要强一些,也比较不容易上手.概念性的知识点不难理解,就是实际的操作并不容易,需要通过学习和借鉴案列 ...
- JS常用方法函数
document.write("");为 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,bod ...
- js-分享107个js中的非常实用的小技巧（借鉴保存）
转载原文:http://***/Show.aspx?id=285 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:doc ...
- js中一些常用的基本函数
如何使用jquery刷新当前页面下面介绍全页面刷新方法:有时候可能会用到window.location.reload()刷新当前页面.parent.location.reload()刷新父亲对象(用于 ...
- js常用函数大全107个
1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...
- 常用原生JS函数和语法集合
luoyishan-2017-10-08 1. 输出语句:document.write(""); 2. JS中的注释为// 3. 传统的HTML文档顺序是:document-> ...
随机推荐
- 函数和常用模块【day05】：装饰器高潮（三）
本节内容 1.概述 2.装饰器定义 3.装饰器定义 4.带参数的生成器 一.概述 我们之前介绍了大幅片的内容,感觉跟装饰器半毛钱关系都没有,其实不然,我们分别详细阐述了高阶函数和内置函数,下面我们就来 ...
- 学习windows编程 day3 之窗口绘画二：边框绘制函数
#include <windows.h> LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM l ...
- python -- 题目不看别人的自己写然后比较
题目一 ''' 编写Python脚本,分析xx.log文件,按域名统计访问次数倒序输出 xx.log文件内容如下: https://www.sogo.com/ale.html https://www. ...
- CSS魔法（四）常用属性
元素的显示与隐藏 display.visibility.overflow 在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display.visibility 和 overflow ...
- IDAPython安装
转载:All Right (本人没有测试过) 关于IDAPython的安装教程网上的资料非常少,也不是很详细,我费了好长时间才装好,现在和大家分享一下. 注意事项 下面几点关系到安装是否成功 ID ...
- .NET Framework 系统版本支持表
.tg {border-collapse:collapse;border-spacing:0;border-color:#aabcfe;} .tg td{font-family:Arial, sans ...
- python - class类(归一化设计)
归一化设计 #继承同时具有两种含义 # 1.继承基类的方法,并且做出自己的改变或者扩展 # 2.声明某个子类兼容于某个基类,定义一个接口类,子类继承接口类,并且实现接口中定义的方法. # 实践中,继承 ...
- Spring+CXF整合来管理webservice(服务器启动发布webservice)
Spring+CXF整合来管理webservice 实现步骤: 1. 添加cxf.jar 包(集成了Spring.jar.servlet.jar ),spring.jar包 ,serv ...
- java中的基本数据类型一定存储在栈中吗？
首先说明,"java中的基本数据类型一定存储在栈中的吗?”这句话肯定是错误的. 下面让我们一起来分析一下原因: 基本数据类型是放在栈中还是放在堆中,这取决于基本类型在何处声明,下面对数据类型 ...
- 命令行command line 使用 http proxy的设置方法 Setting Up HTTP Proxy in Terminal
Step 1: Install Shadowsocks Client Shadowsocks is an open-source proxy project to help people visit ...