JavaScript 开发基础
本文最后更新于 2024-12-12，文章内容可能已经过时。
1.定义一个对象person,属性包括name,sex,age,weight,方法sayHello()。
要求：在网页页面显示这个对象的姓名，性别，年龄及体重
<script>
var person={
"name":'张三',
"sex":'男',
"age":19,
"weight":'99kg',
"sayHello":function(){
document.write("您好"+person.name);
}
}
document.write(person.name);
document.write('<br>');
document.write(person.sex);
document.write('<br>');
person.sayHello();
</script>2.要求学生输入成绩，对一个学生的考试成绩进行等级划分，分数在90-100为优秀，80-90为良好，70-80为中等，60-70为及格，小于60分为不及格。（可以用if或switch语句实现）
<title>成绩评定</title>
<script>
var score =prompt('请输入您的高数成绩：');
score=Number(score);
switch ( parseInt(score/10) ) {
case 10: // 90~100为优
case 9: document.write('优秀'); break;
case 8: document.write('良好'); break;
case 7: document.write('中等'); break;
case 6: document.write('及格'); break;
default:document.write('不及格');
}
</script>3.编写程序计算1--100中所有奇数的和。输出结果可以显示在控制台，也可以在页面。
// 方法一：
/* var sum=0,i=1;
while(i<=100){
if(i%2!=0){
sum+=i;
}
i++;
}
document.write('1至100中所有奇数的和为：'+sum); */
// 方法二：
var sum=0;
for(var i=1;i<=100;i+=2){
sum=sum+i;
}
document.write('1至100中所有奇数的和为：'+sum);4.在一个字符串中使用正则表达式查找"cat"，若找到在页面显示“匹配”，否则显示“不匹配”。
<script type="text/javascript">
var str = "my Dog,my cat,my mouse";//这是一个字符串，例：这就是要找人的队伍
var reg = /cat/i; //这里在定义正则表达式，例：这就是我要找的人“李明”
if(reg.test(str)==true)
document.write("匹配");
else
document.write("不匹配");
//结论：test()执行后，如果找到了返回true,没找到返加false
</script>5.使用正则表达式验证用户输入的出生年份是否在2000年至2024年之间，满足显示'您出生的年份在2000年至2024年，满足我们的要求！'，不满足显示'对不起，您不满足要求！
<script>
var year=Number(prompt('请输入您的出生年份'));// 存在income变量里的是字符串'5600'
var reg=/20[01]\d|202[0-4]/g;
if(reg.test(year)==true){
document.write('您出生的年份在2000年至2024年，满足我们的要求！');
}else{
document.write('对不起，您不满足要求！');
}
</script>6.请用户输入自己的薪水,如果薪水小于6000,则涨薪20%,如果不小于6000,则涨薪10%。并输出涨薪后的薪水
<script>
var income=Number(prompt('请输入您的工资'));
if(income<6000){
income+=income*0.2;
}else
{
income+=income*0.1;
}
alert('您涨工资了，现在的工资是：'+income)
</script>7.使用for语句实现从1累加到100,输出最终结果到页面
<script>
var sum=0;
for(var i=1;i<=100;i++){
sum=sum+i;
}
document.write('1至100中数的和为：'+sum);
</script>8.要求用户输入自己的薪水,如果薪水小于5000,则涨薪20%。
<script>
var income=Number(prompt('请输入您的工资'));
if(income<5000){
income+=income*0.2;
alert('您涨工资了，现在的工资是：'+income)
}
else{
alert('您的工资是：'+income)
}
</script>9.使用while循环,在页面输出1~20中,所有的偶数
<script>
var i=2;
while(i<=20){
document.write(i+'<br>');
i=i+2;
}
</script>10.创建一个对象,包含以下属性：学生的姓名、性别、身高、电话、入学成绩,在控制台查看输出结果
var person={
"name":'张三', // xingm:'张三',
"sex":'男', //xingb:'男',
"height":180,
"tel":13804127785,
"score":95
}
console.log(person);
11.要求利用JavaScript代码在HTML页面中输入自己的姓名，弹出对话框，内容是:hello+姓名
<script>
var name=prompt('请输入您的姓名');
alert('Hello '+name);
</script>12.编写程序求100--300中所有偶数的和。结果输出在页面
<script>
var sum=0;
for(var i=100;i<=300;i+=2){
sum=sum+i;
}
document.write('100至300中所有偶数的和为：'+sum);
</script>13.在页面输出当前的系统时间，输出格式 例如 09:40:5
<div id="time"></div>
<script>
setInterval(function () {
var d = new Date();//获取系统当前日期及时间
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var str = h + ":" + m + ":" + s;
document.getElementById('time').innerHTML = str;
}, 1000);
</script>14.要求当用户单击某个按钮时打开一个新的窗口
<body>
<script type="text/javascript">
function openNew()
{
window.open("","","width=600,height=500");//打开一个空窗口
}
</script>
<input type="button" value="打开新窗口" onclick="openNew()">
</body>15.将字符串str='I want to goto the seaside.I LIKE THE SEA.'中的所有大写字母“I”替换成“She”
<script>
var str='I want to goto the seaside.I LIKE THE SEA.';
document.write("原来的字符串是："+str);
reg=/I/g;
document.write('<br>替换后的字符串是：'+str.replace(reg,'She'));
</script>16.在页面中显示当前系统时间是星期几，例如显示“今天是 星期五”
<script>
var str=new Date();//先 定义一个data对象
var xq=str.getDay();//获取星期数
console.log(xq);//调试看结果对比
//xq=0;
switch(xq){
case 0:document.write('今天是 星期日');break;
case 1:document.writeln('今天是 星期一');break;
case 2:document.writeln('今天是 星期二');break;
case 3:document.writeln('今天是 星期三');break;
case 4:document.writeln('今天是 星期四');break;
case 5:document.writeln('今天是 星期五');break;
case 6:document.writeln('今天是 星期六');
}
</script>17.定义一个字符串'I-want-to-goto-the-seaside.'，使用字符'-'将它分割，并把分割结果显示在页面
<script>
var str='I-want-to-goto-the-seaside.';
var str2=str.split('-');
//split分割后原字符串没变,会产生一个新的数组
document.write(str2);
</script>18.定义一个函数，在页面循环输出"您好!"6次
<script>
function hello(){
for(var i=0;i<6;i++){
document.write('您好!<br>');
}
}
window.onload=hello();
</script>19.使用style动态改变选项卡样式（光标移入和移出分别显示bg2.gif和bg1.gif）
<script type="text/javascript">
var len = document.getElementsByTagName("li");
for (var i = 0; i < len.length; i++) {
len[i].onmouseover = function() {
this.style.backgroundImage = "url(images/bg2.gif)";
}
len[i].onmouseout = function() {
this.style.backgroundImage = "url(images/bg1.gif)";
}
}
</script>20.删除第一个列表项
<body>
<ul id="ul">
<li>JS</li>
<li>BOM</li>
<li>DOM</li>
</ul>
<script type="text/javascript">
function delOne(){
// 1.获取要删除内容的父元素
var ele=document.getElementById('ul');
// 2.获取要删除的子元素
var ch=document.getElementById('ul').children;
console.log(ch);
// 3.删除子元素
ele.removeChild(ch[0]);
}
</script>
<button onclick="delOne()">删除第一个列表项</button>
</body>21.要求用户输入两个数，用Math对象中的max求一下这两个数的最大数
<script type="text/javascript">
// 要求用户输入两个数，用Math对象中的max求一下这两个数的最大数
var num1=prompt('请输入第一个数');
var num2=prompt('请输入第二个数');
var res=Math.max(num1,num2);
document.write('两个数中的较大数是'+res);
</script>22.在H3标签中以12小时形式显示当前的系统时间
<script type="text/javascript">
var fmt;
var date=new Date();
var hour=date.getHours();
if(hour<12){
fmt="AM ";
}
else{
fmt="PM "; hour%=12;
}
if(hour<10) {hour="0"+hour;}
var minute=date.getMinutes();
if(minute<10)
minute="0"+minute;
var second=date.getSeconds();
if(second<10)
second="0"+second;
var time=fmt+hour+":"+minute+":"+second;
document.getElementById("time").innerHTML=time;
</script>23.假设一名同学的出生日期是2000.10.01，要求使用日期对象的方法求他的年龄，结果显示在id="show"的div中。
<script type="text/javascript">
var bir = new Date("10/1/2000");
var now = new Date();
var age = now.getFullYear() - bir.getFullYear();
document.getElementById("show").innerHTML = "你今年的年龄是：" + age;
</script>24.求6+12+18+24+...+1200，结果显示在网页页面中。
var sum1=0;
for(var i=6;i<=1200;i+=6 ){
sum1=sum1+i;
}
document.write('<br>6+12+18+24+...+1200='+sum1); 25.由用户输入行数，在网页页面中输出一个倒三角形。
document.write("<center>");
var t = prompt("请输入一个整数", "");
for(var i = t; i > 0; i--) {
for(var j = 0; j < i; j++) {
document.write("* ");
}
document.write("<br />");
}
document.write("</center>");
26.简易购物车：由用户输入商品的价格、数量和运费，单击“合计”按钮后，会在结果对话框显示总价格。
function cal() {
/*
简易购物车的计算方式：商品数量*单价+运费=合计
*/
var num = parseInt(document.getElementById("num").value); //获得商品数量
var price = parseFloat(document.getElementById("price").value); //获得商品单价
var cost = parseFloat(document.getElementById("cost").value); //获得运费
if (isNaN(num) || isNaN(price) || isNaN(cost)) {
alert("你输入的内容有误！");
return false;
} else {
var amount = num * price + cost;
document.getElementById("amount").value = amount; //计算费用并向文本框复制赋值
}
}27.要求对用户输入的出生日期中的月份进行有效性判断，如果不是1-12月在页面显示“您输入的月份格式不对”，否则在页面输出“您出生于**月”
var str1 = '2000-13-15';
var str2 = str1.split('-');
//split分割后原字符串没变,会产生一个新的数组
if(str2[1]>12||str2[1]<1){
document.write('<br>您输入的月份格式不对');
}
else {
document.write('<br>您出生于'+str2[1]+'月');
}28.在页面输出今天是几月几日
<script type="text/javascript">
var date = new Date();
var month = date.getMonth()+1;//获取月份
var day = date.getDate();//获取日期
document.write('今天是'+month+'月'+day+'日');
</script> 29.有一个字符串是'www.baidu.com'，要求把它用.分割成三个部分，并输出它的网名。
var str1='www.baidu.com';
var str2=str1.split('.');
//split分割后原字符串没变,会产生一个新的数组
document.write('<br>您进入的是'+str2[1]+'网');
console.log(str2);30.求学生的出生日期：，要求定义一个生日的字符串'1999-05-01'，需要把出生的日期输出到网页页面。
<script>
var str1='1999-05-01';
var str2=str1.split('-');
//split分割后原字符串没变,会产生一个新的数组
document.write('<br>您的出生日期是'+str2[2]+'日');
</script>31.定义一个JOSN对象，包括姓名、年龄、身高、体重、电话几个属性，并在网页页面中输出这个对象的属性及其对应的属性值。
var men={
"name":"李明",
"age":24,
"height":183,
"weight":"80kg",
"tel":"138412001100"
}
for(var i in men){
console.log(i+':'+men[i]);
document.writeln(i+':'+men[i]);
//i是“属性”也叫名称，men[i]是i对应的属性值
}
document.write('<br>');32.要求定义一个字符串，表示email地址，使用JS代码判断这个字符串是否含有@字符，如果有@字符返回它的位置；没有@ 在页面显示“您的地址中没有@”
var str='1241887@qq.com';//定义了一个字符串
var res=str.indexOf('@');
// document.write(res);
if(res==-1){
document.write('您的地址中没有@');
}
else{
document.write('@的位置是'+res);
}33.判断89是否比数组 [36,22,13.4,81,74]中的所有数据都大，如果是，将89放在数组的末尾，如果不是，保持数组不变。
<script type="text/javascript">
var arr = [36, 22, 13.4, 81, 74];
var max = arr[0]; // 假设第1个元素为最大值
for (var i = 1; i < arr.length; ++i) {
if (arr[i] > max) { // 当前元素比最大值max大，则修改最大值
max = arr[i];
}
}
if (89 > max) {
arr[i] = 89;
}
document.write('这个数组是:' + arr);
</script>34.由用户输入行数，在网页页面中输出一个正三角形。
<script>
document.write('<center>');
var row=parseInt(prompt('请输入行数'));
//外循环控制的是行数,用i控制行数
for(var i=0;i<row;i++){
//内循环控制的星号的输出 用j控制星号的个数
for(var j=0;j<=i;j++){
document.write('*');
}
document.write('<br>');
}
document.write('</center>');
</script>35.要求用户输入员工的工资，如果他输入的不是一个数就弹出一个警告框“您输入的不是一个数”； 如果工资在3000以上，将工资+100；否则将工资+50，并在警告框中输出现在的工资。
<script>
var num=Number(prompt('请输入您的工资：'));
if(isNaN(num)){
alert('您输入的不是一个数');
}else if(num>=3000){
num=num+100;
}else{
num+=50; //num=num+50;
}
alert('您现在的工资是'+num);
</script>36.在页面输出现在的小时和分钟数
<script type="text/javascript">
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
document.write('现在是' + hour + ':'+minute);
</script>37.使用正则表达式获取已知字符串中的电话号码。
<script type="text/javascript">
var str="全国大学生职业规划大赛报名已经开始了，报名详情大家可以电话咨询，电话13898012345，13541278999";
var regMobile=/1\d{10}/g;
var res=str.match(regMobile);
document.write('联系电话：'+res);
</script> 38.随机选号页面。
var timer; //给定时器起个名字
function startScroll() { //开始产生随机数的函数
var num = Math.floor(Math.random() * 30 + 1);
console.log(Math.random());//Math.random()产生一个0到1之间一个随机小数
document.getElementById('myText').value=num;
timer = setTimeout("startScroll()", 60);
}
function stopScroll() { //结束按钮（停止运行）
clearTimeout(timer);//清除定时器，也就是让上面产生的随机数停止
}39.实现猜数游戏
var go_on = false;
//产生一个随机数 1-100
//Math.random() 0-1 小数
var num = Math.floor((Math.random() * 100 + 1));
do {
var guess = prompt("下面进行猜数游戏，请输入1-100之间的整数", "");
if (guess > num) {
alert("你猜的数偏大了");
//confirm方法 提示框 有确定和取消按钮
go_on = window.confirm("是否继续游戏？");
} else if (guess < num) {
alert("你猜的数偏小了");
//confirm方法 提示框 有确定和取消按钮
go_on = window.confirm("是否继续游戏？");
} else {
alert("恭喜你，猜中了！");
break;
}
} while (go_on)
alert("谢谢参与");40.在id为show的div中显示：现在距离2030年10月1日还有多少天，如果已经过了，显示"好象已经过了吧！"。
<script type="text/javascript">
var urodz = new Date("10/1/2030");
var s = "今天离2030年<font color=blue>元旦节</font>";
var now = new Date();
var ile = urodz.getTime() - now.getTime();
var dni = Math.floor(ile / (1000 * 60 * 60 * 24));
if (dni > 0)
document.getElementById("show").innerHTML = s + "还有<font color=blue>" + dni + "</font>天";
else
document.getElementById("show").innerHTML = "好象已经过了吧！";
</script>- 感谢你赐予我前进的力量
-
微信 
支付宝
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章，采用 CC BY-NC-ND 4.0 协议，完整转载请注明来自 野似o温柔猫
评论
匿名评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果