1. 弹出三个消息框
<script src="js/demo1.js"></script>//引入外部js文件
<script type="text/javascript">
alert('hello world');//弹出一个警告框
confirm('你好');//弹出一个确认框
prompt('请输入一个数字');//弹出一个提示框
</script>
2.变量
var a;//定义一个变量,并且命名为a
a=10;//赋值 变量的初始化
//变量的取值
console.log(a);//在控制台中输出日志
document.write(a);//在页面中输出
// 多变量定义
var a,b,c;
//变量不可以重复定义
var a=20;//在内存中开辟空间命名为a,并且将20存入a这块空间中
var a=30;
console.log(a);
//JS是一门弱类型语言,在变量定义的时候,不需要指定数据类型
//JavaScript是有数据类型,但是变量定义的时候,没有类型
//变量的赋值仅仅是一种值的传递
var a=10,b;
console.log(b);//undefined 未定义
console.log(a);//变量需要定义之后,才可以输出
// 变量未定义,直接赋值(可行)
a=20;
console.log(a);
//变量是独立的空间
var a=10;
var b=5;
console.log(a,b);
b=20;
a=30;
console.log(a,b);
//数据类型
var a=10;//数值类型
var str='hello world';//字符串类型
false(假) true(真);//布尔类型(boolean)
undefined //变量定义但未初始化
null //空 引用类型
//引用类型
Object Array(数组) Date(日期) Function (函数) RegExp(正则)
//检测变量数据类型
typeof 变量名;
//注意:typeof表达式本身的结果是一个字符串类型
"string" "number" "boolean" "undefined" "null"
var a=10;
console.log(typeof a);number
var a=10;
console.log(typeof a);
var b=typeof a;//将a的数据类型保存在变量b中
console.log(b);//"number"
console.log(typeof b);//先运算在输出
console.log(typeof typeof a);//string
var a;
console.log(a);//undefined
console.log(typeof a);//undefined
var a=null;
console.log(a);
console.log(typeof a);//object
console.log(typeof typeof a);//string
3.运算符
(1)算术运算符:
+ - * / %(取余)
一元运算符:自增:++ 自减:--
1.后置:先赋值,后运算
2.前置:先运算,后赋值
var a=10;
var b=20;
console.log(a+b);//30
console.log(a*b);//200
console.log(a/b);//0.5
console.log(a-b);//-10
console.log(a%b);//10
console.log(10%3);//1
//十进制、二进制、八进制、十六进制
//JavaScript小数运算有问题:精度损失
console.log(0.2*0.2);//0.04000000000000001
var a=0.2*0.2;
var b=a.toFixed(2);//保留小数点后两位数
console.log(b);
//科学计数法
var a1=0.000005;
var a11=5e-6;
var a2=300000000;
var a3=3e8;
console.log(a1);
console.log(a11);
console.log(a2);
console.log(a3);
var a=5;
var b=3;
var c=a+b+(a++);//5+3+5 //先赋值,后运算
console.log(a,b,c);//6 3 13
var a=5;
//先运算,后赋值
var c=++a;
var b=--a;
console.log(c);//6
console.log(b);//5
var a=3;
var b=5;
var c=(++a)+a+b;//4+4+5
console.log(a,b,c);//4 5 13
var a=2;
var b=4;
var c=(a++)+(b--)+(a+b)+(b++);//2+4+6+3
console.log(a,b,c);//a=3 b=4 c=15
//先进行加法,再赋值
var a=3;
console.log(a+=2);//5
console.log(a*=2);//10
console.log(a/=2);//5
console.log(a%2);//1
var s1='4';
var s2='10';
var a=10;
console.log(s1>s2);//true 比较ASCII码
console.log(s1>a);//false 比较的是数值
若逻辑运算符两边有操作数不为布尔类型,则运算结果不一定为布尔类型
布尔类型扩展:0,'',undefined ,null均为假,其他都为真
逻辑或:
1.若第一个操作数为真,则第二个操作数不执行(结果为第一个操作数)
2.若第一个操作数为假,则结果为第二个操作数
逻辑与:
1.若第一个操作数为假,则第二个操作数不执行
2.若第一个操作数为真,则结果为第二个操作数
var a=3;
var b=5;
var c=a>b&&a<b;//false
var c1=a<b&&a<=b;//true
var c2=a<b&&a>b;//false
var c3=a>b&&a>=b;//false
var c=a>b||a<b;//true
var c1=a<b||a<=b;//true
var c2=a<b||a>b;//true
var c3=a>b||a>=b;//false
var a=10;
var b=5;
var c=a>b?100:50;
console.log(c);
a==b?console.log('hello'):alert('world');
//数值类型
var a=10;
var b=5;
console.log(a+b);
//字符串
var a='hello';
var b=' 哈哈';
console.log(a+b);//字符串拼接
console.log(a-b);//NaN not a number
//布尔类型 布尔类型在参与数学运算时,true 1 false 0
var a=true;
var b=false;
console.log(a+b);//1
案例
(1)
var a=5;
var b=7;
var c=1.0+a/b;
var c1=c.toFixed(1);
document.write(c1);//1.7
(2)
var a=3;
var b=5;
var c=2;
a=a*=16+(b++)-(++c);
console.log(a,b,c);//54 6 3
(3)
var x=0,y=0,t;
t=x&&++y;
console.log(y);//0
(4)
var a;
a=25/3%3;
console.log(a);//2.333333333333334
(5)
var a=2;b=3;
c=a>b?a++:++b;
console.log(c);4
(6)
var a=1,b=4,c=3;
var d=a&&b+c||b-c;
console.log(d);7
(7)
var number=prompt('请输入数字');
if (number%2==0){
alert('偶数');
}else if (number%2!==0&&number==parseInt(number)){
alert('奇数');
}else if (number%2!==0&&number==parseFloat(number)){
alert('小数');
}else{
alert('非奇非偶');
}
(8)
var year=prompt('请输入年份');
if (year%4==0&&year%100!==0){
console.log('普通闰年');
}else if (year%400==0){
console.log('世纪闰年');
}else{
console.log('平年');
}
console.log(Math.PI);//圆周率
var num=Math.random();//随机数 [0,1)
//随机产生0-10之间的整数
var n1=Math.random();
n1*=10;
n1=parseInt(n1);//取整
console.log(n1);
//四舍五入 round
var a=Math.round(5.6);
var b=Math.round(5.49);
console.log(a,b);
var a=10;
var b=20;
var c=Math.max(a,b);//最大值
var c1=Math.min(a,b);//最小值
console.log(c,c1);
//a的3次幂
var a1 = 3;
var a1=Math.pow(a1,3);
console.log(a1);
案例1
//1.根据用户输入的数据,判断水仙花数(三位数),(153=1*1*1*1+5*5*5+3*3*3)每位数字的立方和等于等于该数即水仙花数如果是水仙花数,则输出“是”,否则输出“否”
var num = prompt('三位数');
if (num!=null) {
var a=parseInt(num/100);
var b=parseInt((num-a*100)/10);
var c=num-a*100-b*10;
console.log(a,b,c);
if(a*a*a+b*b*b+c*c*c==num){
alert('yes');
}
else{
alert('no');
}
}else{
alert('点击了取消按钮');
}
//2.会员卡四位数(开头不为0)求和,会员卡四位数求和大于20时将返利50元,否则不返利 根据用户输入的会员卡卡号(四位数),判断是否返利
var num=prompt('输入四位数');
var a=parseInt(num/1000);
var b=parseInt((num-a*1000)/100);
var c=parseInt((num-a*1000-b*100)/10);
var d=num-a*1000-b*100-c*10;
console.log(a,b,c,d);
if (num>=1000&&num<9999) {
if (a+b+c+d>20){
alert('返利50元');
}else{
alert('不返利');
}
}else{
alert('重新出入');
}
//3.工资所得税工资超过1000的部分需要缴纳个人所得税(税率0.05),根据用户输入的工资,输出税后工资
var num=prompt('请输入你的工资');
if (num>1000){
m=num-1000;
b=m*0.05;
num=num-b;
alert(num);
}else if(num<=1000&&num>0){
alert(num);
}else{
alert('重新输入');
}
<!-- //4.用户购买商品,三个商品中有一个超过50元,或者总价超过100元,即可以打八五折,否则不打折根据用户输入的商品价格,判断是否打折 -->
<script type="text/javascript">
var a=parseFloat(prompt('输入第一个商品价格'));
var b=parseFloat(prompt('输入第二个商品价格'));
var c=parseFloat(prompt('输入第三个商品价格'));
num=a+b+c
if (a>0&& b>0&&c>0) {
if(a>50||b>50||c>50){
alert('可打折');
}else if (num>100){
alert('可打折');
}else{
alert('不可打折');
}
}else{
alert('请输入数字');
}
<!-- 5.判断输入年份是不是闰年 -->
<script type="text/javascript">
var month=prompt('输出年份');
if (month%4==0&&month%100!==0){
alert('普通闰年');
}else if (month%400==0){
alert('世纪闰年');
}else{
alert('平年');
}
<!-- 6.求三个变量最大值(根据用户输入) -->
<script type="text/javascript">
var a=prompt('输入第一个数');
var b=prompt('输入第二个数');
var c=prompt('输入第三个数');
var d=Math.max(a,b,c);//最大值;
alert('最大值为:'+d);
/*
7.学校根据考勤成绩和期末成绩来决定学生是否可以毕业。
考勤成绩和期末成绩都在60分以上的学生可以顺利毕业
考勤和期末成绩都在60分以下,不能毕业,需要留级
考勤成绩小于60分,期末成绩大于60分,延迟毕业
考勤成绩大于60分,期末成绩小于60分,可补考
*/
var a=prompt('请输入考勤成绩');
var b=prompt('请输入期末成绩');
if (a>60&&b>60){
alert('顺利毕业');
}else if (a<60&&b<60){
alert('留级');
}else if (a<=60&&b>=60){
alert('延迟毕业');
}else if (a>60&&b<60){
alert('可补考');
}
//8.用户输入今天是星期几,判断如果是星期六,则活动为去唱歌如果是星期日,则活动为去植物园;如果是其他,则上班。
var date=prompt('请输入当天星期几');
if (date=='星期六') {
alert('唱歌');
}else if (date=='星期日') {
alert('去植物园');
}else if (date=='星期一') {
alert('上班');
}else if (date=='星期二') {
alert('上班');
}else if (date=='星期三') {
alert('上班');
}else if (date=='星期四') {
alert('上班');
}else if (date=='星期五') {
alert('上班');
}else{
alert('非法输入');
}
/*
9.
根据BMI(身体质量指数)显示一个人的体型。BMI是指身高体重的一个计算公式。
BMI = 体重 / 身高的平方;
-指数- -说明-
低于18.5 过轻
18.5~24.9999 正常
25~27.9999 过重
28~32 肥胖
高于32 非常肥胖
编程输入身高和体重,计算BMI, 输出身体状况。
*/
var w=parseInt(prompt('输入你的体重(斤)'))/2;
var a=parseInt(prompt('输入你的身高(cm)'))/100;
a=a*a;
console.log(w,a);
var bmi=w/a;
if (bmi>32){
alert('非常肥胖');
}else if (bmi>=28) {
alert('肥胖');
}else if (bmi>=25) {
alert('过重');
}else if (bmi>=18.5) {
alert('正常');
}else if (bmi<18.5&&bmi>0) {
alert('过轻');
}else{
alert('非法输入');
}
/*10.
假设你应聘Web前端技术开发岗位,如果你会html、css和JavaScript技术,你面试成功,欢迎加入公司,否则你面试不成功,
不能加入公司。
例:
请问你会html技术吗?(yes/no)
请问你会css技术吗?(yes/no)
请问你会JavaScript技术吗?(yes/no)
以上三问都会打为yes时,面试成功,否则失败
*/
var html=prompt('请问你会html技术吗?(yes/no)');
var css=prompt('请问你会css技术吗?(yes/no)');
var javascript=prompt('请问你会JavaScript技术吗?(yes/no)');
if (html=='yes'&&css=='yes'&&javascript=='yes') {
alert('面试成功');
}else if (html=='no'||css=='no'||javascript=='no') {
alert('面试失败');
}else{
alert('非法输入');
}
//11.联合国世界卫生组织对年龄的划分标准,44岁以下为青年,45-59岁为中年,60-89岁为老年人,90岁以上为长寿老年人,
//输入小明今年的年龄,输出他的年龄阶段。
var age=prompt('请输入你的年龄');
if (age>90) {
alert('长寿老人');
}else if (age>=60) {
alert('老年人');
}else if (age>=45) {
alert('中年');
}else if (age<=44&&age>0) {
alert('青年');
}else{
alert('非法输入');
}
//12.做一个周计划,周一、周二学习理念知识,周三周四到企业实践,周五总结经验,周六、周日休息和娱乐,取出当前日期(得到星期),
// 输出今天的计划内容
var date=prompt('输出周几');
if (date=='周一'||date=='周二') {
alert('学习理念知识');
}else if(date=='周三'||date=='周四'){
alert('企业实践')
}else if (date=='周五') {
alert('总结经验');
}else if (date=='周六'||date=='周日') {
alert('休息和娱乐');
}else{
alert('重新输出');
}
// 13.
// 输入月份,判断所属季节。12/1/2属于冬季,3/4/5属于春季,6/7/8属于夏季,9/10/11属于秋季
var month=prompt('请输入月份');
switch(month){
case '12':
case '1':
case '2':
alert('冬季');
break;
case '3':
case '4':
case '5':
alert('春季');
break;
case '6':
case '7':
case '8':
alert('夏季');
break;
case '9':
case '10':
case '11':
alert('秋季');
break;
default:
alert('非法输入')
break;
}
var month=prompt('请输入当前月份:例如12');
if (month==12||month==1||month==2){
document.write('冬季');
}else if (month==3||month==4||month==5){
document.write('春季');
}else if (month==6||month==7||month==8){
document.write('夏季');
}else if (month==9||month==10||month==11){
document.write('秋季');
}else{
document.write('非法输入');
}
/*14.请编写程序完成个人所得税计算。个税免征额3500元(工资薪金所得适用)
级数 全月应纳税所得额全月 税率(%) 速算扣除数
1 不超过1,500元 3 0
2 超过1,500元至4,500元的部分 10 105
3 超过4,500元至9,000元的部分 20 555
4 超过9,000元至35,000元的部分 25 1,005
5 超过35,000元至55,000元的部分 30 2,755
6 超过55,000元至80,000元的部分 35 5,505
7 超过80,000元的部分 45 13,505
例如:某人某月工资减去社保个人缴纳金额和住房公积金个人缴纳金额后为5500元,
个税计算:(5500-3500)*10%-105=95元
计算个税和到手工资*/
var money=prompt('请输入个人缴纳金额');
var a=(money-3500);
var b;//个税计算;
var c;//到手工资;
if (a<=1500&&a>0) {
b=a*0.03;
c=money-b;
document.write('个税为:'+ b );
document.write('到手工资为:'+ c );
}else if (a<=4500) {
b=a*0.1-105;
c=money-b;
document.write('个税为:'+ b );
document.write('到手工资为:'+ c );
}else if (a<=9000) {
b=a*0.2-555;
c=money-b;
document.write('个税为:'+ b );
document.write('到手工资为:'+ c );
}else if (a<=35000) {
b=a*0.25-1005;
c=money-b;
document.write('个税为:'+ b );
document.write('到手工资为:'+ c );
}else if (a<=55000) {
b=a*0.3-2755;
c=money-b;
document.write('个税为:'+ b );
document.write('到手工资为:'+ c );
}else if (a<=80000) {
b=a*0.35-5505;
c=money-b;
document.write('个税为:'+ b );
document.write('到手工资为:'+ c );
}else if (a>80000) {
b=a*0.45-13505;
c=money-b;
document.write('个税为:'+ b );
document.write('到手工资为:'+ c );
}else{
document.write('非法输入');
}
//15.编程输入整数a和b,若a或b大于100,则输出a,b的和与100的差,否则输出两数之和
var a=prompt('输入第一个整数');
var b=prompt('输入第二个整数');
a=parseInt(a);
b=parseInt(b);
var num;
if (a>100||b>100) {
num=(a+b)-100;
document.write('结果为:'+num);
}else{
num=(a+b)+100;
document.write('结果为:'+num);
}
//16.从键盘输入三角形的三边长,判断出这三边能否构成三角形
var a=prompt('输入一边长');
var b=prompt('输入二边长');
var c=prompt('输入三边长');
a=parseInt(a);
b=parseInt(b);
c=parseInt(c);
if ((a+b)>c&&(a+c)>b&&(b+c)>a) {
document.write('能构成三角形');
}else{
document.write('不能构成三角形');
}
日期
var date=new Date();//创建日期对象的实例
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
var time=year+'/'+month+'/'+day;
document.write(time);
实例1
<div id="inner"></div>
<script type="text/javascript">
//根据ID查找页面元素
var o=document.getElementById('inner');
//innerHTML代指标签内容
// o.innerHTML='Hello';
//获取时间
function getTime(){
var date=new Date();//创建日期对象的实例
// console.log(date);
//获取年份
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
//时分秒
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
//补零
if(hour<10){
hour='0'+hour;
}
if(minute<10){
minute='0'+minute;
}
if(second<10){
second='0'+second;
}
//星期
// var w=date.getDay();
var time=year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;
o.innerHTML=time;//将时间显示到div中
}
getTime();
setInterval(getTime,1000);//每隔一秒钟执行代码一次
实例2
<div id="box"></div>
<script type="text/javascript">
showtime();
function showtime(){
var date=new Date();
//获取年,月,日
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
//console.log(year,month,day);
//获取时,分,秒
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
hour = time1(hour);
minute = time1(minute);
second = time1(second);
//console.log(hour,minute,second);
var time=year+'/'+month+'/'+day+''+hour+':'+minute+':'+second;
document.getElementById('box').innerHTML=time;
setInterval(showtime,1000);//每秒刷新一次
function time1(tim){
if (tim<10) {
tim = '0'+tim;
}
return tim;
}
}
<script>
计算器
<input type="text" id="op1">
<select id="sel">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="op2">
<button id="btn">=</button>
<input type="text" id="op3">
<script type="text/javascript">
//查找页面元素
var oBtn=document.getElementById('btn');
var txt1=document.getElementById('op1');
var txt2=document.getElementById('op2');
var txt3=document.getElementById('op3');
var slt=document.getElementById('sel');
//添加点击事件 事件需要被触发,才可以执行
oBtn.onclick=function(){
//获取输入框的值 转换为数值类型
var t1=parseFloat(txt1.value);
var t2=parseFloat(txt2.value);
var endValue;//保存运算结果
//判断选择了什么符号
switch(slt.value){
case '+':
endValue=t1+t2;
break;
case '-':
endValue=t1-t2;
break;
case '*':
endValue=t1*t2;
break;
case '/':
endValue=t1/t2;
break;
default:
endValue=t1+t2;
break;
}
//将运算结果显示到输入框中
txt3.value=endValue;
};
</script>
石头剪刀布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
/*
石头剪刀布
分析:
玩家:
电脑:随机产生 石头剪刀布
石头 0
剪刀 1
布 2
输赢:
玩家赢: (person==石头&&computer==剪刀)||(person==剪刀&&computer==布)||(person==布&&computer==石头)
电脑赢:
平局:person==computer
穷举法:
*/
</script>
</head>
<body>
电脑出:<span id="cp"></span><br>
玩家出:<span id="p"></span><br>
结果:<span id="res"></span><br>
<script type="text/javascript">
//查找元素
var cp=document.getElementById('cp');
var p=document.getElementById('p');
var res=document.getElementById('res');
//玩家
var person=prompt('请输入您要出:(石头、剪刀、布)');
var computer;//电脑
//随机产生0/1/2
var num=parseInt(Math.random()*10);//产生0-10之间的整数
num=num%3;//随机产生0/1/2
console.log(num);
switch(num){
case 0:
computer='石头';
break;
case 1:
computer='剪刀';
break;
case 2:
computer='布';
break;
default:
computer='剪刀';
break;
}
//将玩家和电脑出的内容显示到屏幕上:
cp.innerHTML=computer;
p.innerHTML=person;
var result;//输赢结果
//判断输赢情况:
if((person=='石头'&&computer=='剪刀')||(person=='剪刀'&&computer=='布')||(person=='布'&&computer=='石头')){
result='玩家赢';
}else if(person==computer){
result='平局';
}else{
result='电脑赢';
}
res.innerHTML=result;//将输赢结果显示到页面中
</script>
</body>
</html>
循环
for(var i=0;i<100;i++){
document.write('hello world<br>');//输出一百行hello world
}
//求15以内奇数的和
var sum=0;//和
//遍历
for(var i=0;i<15;i++){
if(i%2!=0){
sum+=i;
}
}
document.write(sum)
//求20-100之间3的倍数的和
var sum=0;
for(var i=20;i<100;i++){
if(i%3==0){
sum+=i;
}
}
console.log(sum);
/*
每隔一秒钟在页面中输出一行‘hello world’
*/
setInterval("document.write('hello world')",1000);
45