1.计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<script type="text/javascript">
window.onload = function(){
var oInput01 = document.getElementById('input01');
var oInput02 = document.getElementById('input02');
var oSelect = document.getElementById('select');
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var val01 = oInput01.value;
var val02 = oInput02.value;
//不做此判断会弹出“NaN”
if(val01=="" || val02==""){
alert('输入框不能为空！');
return;
}
if(isNaN(val01) || isNaN(val02)){
alert('请输入数字！');
return;
}
switch(oSelect.value){
case '0':
alert((parseFloat(val01)*100 + parseFloat(val02)*100)/100);
break;
case '1':
alert((parseFloat(val01)*100 - parseFloat(val02)*100)/100);
break;
case '2':
alert((parseFloat(val01)*100) * (parseFloat(val02)*100)/10000);
break;
case '3':
alert((parseFloat(val01)*100) / (parseFloat(val02)*100));
break;
}
}
}
</script>
</head>
<body>
<h1>计算器</h1>
<input type="text" name="" id="input01" />
<select id="select">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="text" name="" id="input02" />
<input type="button" name="" value="计算" id="btn" />
</body>
</html>
2.switch练习1-对于成绩大于等于60分的，输出'合格'。低于60分的，输出'不合格'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>合格</title>
<script type="text/javascript">
var score = +prompt('输入分数:')
if(score > 60){
alert('合格');
}else{
alert('不合格');
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>合格</title>
<script type="text/javascript">
var score = +prompt('输入分数');
switch(parseInt(score/10)){
case 10:
case 9:
case 8:
case 7:
case 6:
alert('合格');
break;
default:
alert('不合格');
break;
}
</script>
</head>
<body>
</body>
</html>
练习2-从键盘接收整数参数，如果该数为1-7，打印对应的星期，否则打印非法参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1~7</title>
<script type="text/javascript">
var week = +prompt('输入整数:');
switch(today){
case 1:
alert('星期一');
break
case 2:
alert('星期二');
break
case 3:
alert('星期三');
break
case 4:
alert('星期四');
break
case 5:
alert('星期五');
break
case 6:
alert('星期六');
break
case 7:
alert('星期日');
break
default:
alert('非法参数');
break
}
</script>
</head>
<body>
</body>
</html>
数组去重的方法
方式一, 借助ES6的Map, 因为Map不会出现重复的key, 后添加的key-value会把之前的覆盖
var arr = [1,2,3,4,3,3,2,5]
var map = new Map()
arr.forEach((value,index) => {
map.set(value,index)
})
var newArr = Array.form(map.keys())
console.log(newArr)
方式二
var arr = [1,2,3,4,3,3,2,5]
var newArr = []
arr.forEach((value,index) => {
if(newArr.indexOf(value) == -1){
newArr.push(value)
}
})
console.log(newArr)
字符串翻转的方法
1）使用字符串函数
//str=hello
function reverseString(str) {
var array = str.split('');//['h','e','l','l','o'];
array = array.reverse();// ['o','l','l','e','h'];
str = array.join('');//"olleh"
return str;
}
上面代码可以合并一行代码
//str=hello
function reverseString(str) {
return str.split('').reverse().join('');;
}
2）使用for循环
function reverseString(str) {
var newStr="";
for(var i=str.length-1;i>=0;i--){
newStr+=str[i];
}
return newStr;
}
使用逆序遍历字符串，从后面将字符串累加起来。
3）使用递归
function reverseString(str) {
if (str === "") {
return "";
} else {
return reverseString(str.substr(1)) + str.charAt(0);
}
}
reverseString("hello"); // => olleh
上面的方法还可以继续改良一下，改成三元操作符：
function reverseString(str) {
return (str === '') ? '' : reverseString(str.substr(1)) + str.charAt(0);
}
reverseString("hello"); // => olleh
定时器
在网页的特效制作中，经常要用到定时器，比如：间隔一定时间后页面自动跳转，或者间隔一定时间出现某种效果，像网页上的飞雪连天，或者背景颜色的定时改变等等。
若要页面定时跳转，简单的可以在head头部的meta标记中设定重定向就可以了。但我要说的是javascript中的定时器，它的功能是十分强大和有用的。
在javascript中有两个关于定时器的函数，它们是：
1.倒计定时器：timename=setTimeout("function();",delaytime);
2.循环定时器：timename=setInterval("function();",delaytime);
其中倒计定时器顾名思义，是设定一段时间后执行function()函数，而循环定时器则是每隔一段时间都执行function()函数一次。
倒计定时器一般用在一段时间后的触发的事件，比如页面的定时跳转，有一些站点就是在注册完成后自动跳转到登录页面，或者用于确定是“老客”还是“新客”，是老客则会点击确定的某个地方（由站长设定）而快速进入站点，如果是“新客”，就不知道特定的点击处，所以可以设定5秒或者10秒转入新客页面。
循环定时器则用于页面上的持续效果，比如背景用飞雪。
function()函数，可以是一个函数，也可以是几个函数，中间用;连接，还可以接入javawcript的语句。
delaytime则是设定间隔的时间，以毫秒为单位。
定时器的取消
有时候，我们想把一个定时器去掉，像循环定时器就是一直不停的运动的。
clearTimeout(timename)来清除setTimeout()定时器，参数timename为setTimeout()函数的返回值；
clearInterval(timename)来清除setInterval()定时器，参数timename为setInterval()函数的返回值。
变量的作用域
在 Javascript 中，任何变量都是某个特定对象的属性。
基本的变量作用域
先上例子：
var scope = 'global';
function checkScope(){
var scope = 'local';
console.log(scope); // local
}
checkScope();
console.log(scope); // global
上面的例子中，声明了全局变量 scope 和函数体内的局部变量 scope。在函数体内部，局部变量的优先级比通明的全局变量要高，如果一个局部变量的名字与一个全局变量相同，那么，在声明局部变量的函数体范围内，局部变量将覆盖同名的全局变量。
下面再看一个例子：
scope = 'global';
function checkScope(){
scope = 'local';
console.log(scope); // local
myScope = 'local';
console.log(myScope); // local
}
checkScope();
console.log(scope); // local
console.log(myScope); // local
在全局作用域中声明变量可以省略 var 关键字，但是如果在函数体内声明变量时不使用 var关键字，就会发生上面的现象。首先，函数体内的第一行语句，把全局变量中的 scope 变量的值改变了。而在声明myScope 变量时，由于没有使用 var 关键字，Javascript 就会在全局范围内声明这个变量。因此，在声明局部变量时使用var 关键字是个很好的习惯。
网友评论