suiferq-CSDN博客

原创 JS 案例飘浮广告

飘浮广告要求：页面两侧有广告，广告上下来回滚动，点击关闭，广告被关闭。HTML代码片:<div id="adv_left" class="adv adv_left"> <span id="left_close">×</span> </div> <div id="adv_right" class="adv adv_right"> <span id="right_close">&t

2021-06-07 14:49:23 382

仿QQ新闻广告要求：打开页面，广告向上展开，点击“关闭”按钮，关闭广告HTML和CSS代码片:// CSS 代码<style type="text/css"> .adv{ width: 400px; height: 300px; background: url(../img/tx.jpg); position: absolute; bottom: -200px; right: 0; } .adv>span{ position: absolu

2021-06-07 14:48:33 125

原创 JS 案例幕布广告

幕布广告要求：（1）点击关闭按钮，广告向上拉关，并显示向下箭头（2）点击向下箭头，广告向下拉开HTML代码片：<div id="adv" class="adv"> <img src="../img/close.png" id="close"/> </div> <div id="arr" class="arr"> <img src="../img/arr.png"/> </div>CSS代码片：

2021-05-24 08:03:22 286

原创 JS 案例表格的操作

表格的操作对表格完成如下操作：1、表格隔行变色2、鼠标移动上去变色3、增加行4、删除行5、修改行HTML代码片:<table id="tab"> <tr> <td>编号</td> <td>姓名</td> <td>操作</td> </tr> <tr> <td>001</td> <td&gt

2021-05-24 08:02:46 293

原创 JS 案例 Tab切换效果

Tab切换效果需求说明 编写函数，实现当鼠标指针移到“第一课”上时，显示第一课对应的界面；当鼠标指针移动到“第二课”上时，显示第二课对应的界面；当鼠标指针移到“第三课”上时，显示第三课对应的界面。HTML 代码片:<div class="dropdown"> <button class="one" onmouseover="change(1)">第一课</button> <div class="oneTxt" id="oneT

2021-05-14 11:48:39 502

原创 JS 案例树形菜单

制作树形菜单需求说明使用项目列表制作一个完整的树形菜单，可通过单击一级菜单来显示和隐藏二级菜单，完成效果如图所示：使用带参数的函数，通过参数来控制显示或隐藏某个列表。HTML代码片：<div class="menu"> <ul id="menu"> <li class="menuList"> 职能部门 <ul> <li>学工部</li> <li>后勤&l

2021-05-14 10:32:52 1565

原创 JS 案例跳水比赛评分系统

跳水比赛评分系统要求：跳水比赛，8个评委打分。运动员的成绩是8个成绩取掉一个最高分，去掉一个最低分，剩下的6个分数的平均分就是最后得分。使用一维数组实现打分功能。请把打最高分的评委和最低分的评委找出来。HTML代码片：<h1>评分系统</h1> <div>评委1：<input type="text" /></div> <div>评委2：<input type="text" /></di

2021-04-30 08:04:58 1681

原创 JS 案例简单的省市联动

标题制作简单的省市联动步骤分析：第一步：创建一个二维数组用于存储省份和城市：var cityList=new Array();cityList[‘四川省’]=[‘成都市’,’泸州市’,’宜宾市’,’内江市’,’绵阳市’]cityList[‘北京’]=[‘朝阳区’,’东城区’,’西城区’,’丰台区’]第二步：创建省份的option元素节点pro.add(new Option(‘四川省’,’四川省’))第三步：确定事件（onchange）并为其绑定一个函数，如addCity()第四步：编写

2021-04-30 08:04:23 531

原创 JS 案例复选框操作

复选框操作实现复选框的全选、反选、全不选。代码片：<body> <input type="checkbox" />足球<br/> <input type="checkbox" />篮球<br/> <input type="checkbox" />电子<br/> <input type="checkbox" />排球<br/> <hr/> <button

2021-04-19 18:44:08 115

原创 JS 案例随机生成验证码

随机生成验证码要求： 1、位数：四位 2、由数字、大写字母、小写字母组成代码片：<body> <div id="but"> <button type="button">验证码：</button> </div> <div id="code"><input type="text" /></div> <script type="text/javascript">

2021-04-19 18:42:26 96

原创 JS 案例文字变大变小

变化文字大小的文本持效文本字体由大变小再由小变大。代码片<body> <div id="txt">欢迎来到我的世界！！</div> <script type="text/javascript"> var mytxt=document.getElementById("txt"); var mystr=mytxt.innerText; var i=1; function addSize(){ var res=mystr

2021-04-17 20:35:43 995

原创 JS 案例渐隐渐显的文本特效

渐隐渐显的文本特效文本颜色由白色（#FFFFFF）逐渐变成紫色（#FF00FF）,再由紫色逐渐变成白色。代码片.<body > <div id="mydiv" onclick="fadeIn()">欢迎来到JavaScript世界！！</div> <script type="text/javascript"> var colorList=["ffffff","ffe1ff","ffb3ff","ff79ff","ff3dff","ff00f

2021-04-17 20:30:54 366

原创 JS 案例绚丽多彩的文本特效

绚丽多彩的文本特效：文本颜色自动交替显示“红色”、“黄色”、“绿色”，形成绚丽多彩的文本特效。代码片：// An highlighted block<style type="text/css"> #mytxt{ font-size: 38px; text-align: center; font-family:"仿宋"; border: 3px dotted yellow; background-color:#000 ; color:

2020-11-26 19:46:47 238 1

原创 JS 案例大小写转换

大小写转换代码片：// An highlighted block<title></title> <script type="text/javascript"> function deal(opt){ var str = document.getElementById("old").value; switch(opt){ case 'upper': str=str.toUpperCase(); break;

2020-11-04 20:17:13 862

原创 JS 案例当前日期处理

根据当前日期进行处理(1)在网页上显示带自动刷新的日期和时间，并显示是星期几。(2）根据日期的不同时间段，做问候语：早上8:00-12:00：“早上好！”；中午12:00-14:00：“中午好！”下午14:00-18:00：“下午好！”晚上18:00-00:00：“晚上好！”注：你若觉得分的不够细，可以将时间段划分的更细一些。（3）显示当天到下次元旦之间的天数效果如下所示：代码片// An highlighted block<div id="mytime"></di

2020-11-04 20:16:09 351

原创 JS 案例改变网页背景颜色

改变网页背景颜色代码片：// An highlighted block<title></title> <script type="text/javascript"> function color(str) { document.body.style.backgroundColor = str; } </script> </head> <body> <input type="button"

2020-10-23 08:14:12 3095

原创 JS 案例计时器

计时器代码片// An highlighted block<script type="text/javascript"> // 设时间为一个小时，1小时=60分钟，1分钟=60秒，1秒=1000毫秒 var t=1*60*60; var h,m,s; function start(){ var nowtime = document.getElementById("time") h=parseInt(t/3600); //代表小时 m=p

2020-10-23 08:12:45 220

原创 JS 案例个人所得税计算器

个人所得税计算器：代码片与计算器的代码相识，CSS同计算器样式// An highlighted block<form > <div class="da"> <div> <div class="col1"><label >请输入税前工资:</label></div> <div class="col2"><input type="text" id="num1"/&g

2020-10-20 09:26:35 3442

原创 JS 案例四则混合计算器

四则混合计算器：HTML代码部分：// An highlighted block<form > <div class="da"> <div> <div class="col1"><label >请输入num1:</label></div> <div class="col2"><input type="text" id="num1"/></div>

2020-10-18 17:04:06 368

原创 JS 案例企业利润

企业发放的奖金根据利润提成利润：低于或等于10万元时，奖金可提10%；利润高于10万元，低于20万元时，低于10万元的部分按10%提成，高于10万元的部分，可提成7.5%；20万到40万之间时，高于20万元的部分，可提成5%；40万到60万之间时高于40万元的部分，可提成3%；60万到100万之间时，高于60万元的部分，可提成1.5%，高于100万元时，超过100万元的部分按1%提成，从键盘输入当月利润，求应发放奖金总数代码片// An highlighted block<sc

2020-10-18 16:35:14 424

原创 JS 案例打印倒正金字塔形

打印倒正金字塔形使用prompt()方法输入打印的行数，在页面上输出一个倒正金字塔形。代码片// An highlighted block<script type="text/javascript"> var n=prompt("请输入要打印的行数：",""); for(var i=n;i>0;i--){ for(var k=1;k<=n-i;k++){ document.write("   

2020-10-12 22:45:17 3096

原创 JS 案例打印菱形

打印菱形使用prompt()方法输入打印的行数，在页面上输出一个菱形。代码片// An highlighted block<script type="text/javascript"> var n=prompt("请输入要打印的行数：",""); for (var i=1;i<=n;i++) { for(var k=1;k<=n-i;k++){ document.write("   ");

2020-10-12 22:43:56 1644 1

原创 JS 案例鸡兔同笼

鸡兔同笼今有雉兔同笼，上有三十五头，下有九十四足，问雉兔各几何？代码片// An highlighted block<script type="text/javascript"> var j,t; //定义变量鸡、兔 for(var i=1;i<=35;i++){ j=i; //兔的头=35-鸡，兔有四支脚=4*（35-鸡），鸡有两支脚=2*鸡 if((j+(35-j)==35)&&(2*j+4*(35-j)=

2020-10-10 22:10:23 3514

原创 JS 案例输入年份和月份，输出对应月份的天数

输入年份和月份，输出对应月份的天数提示：2月份比较特殊，平年28天，闰年29天。闰年的判断条件：能被4整除但不能被100整除的是闰年；或者能被400整的是闰年整除可用取模运算，与的关系或用逻辑与&&，或的关系可用逻辑||下面展示一些内联代码片。// An highlighted block<script type="text/javascript"> var year=prompt("请输入年份：","") var yue=prompt("请输入月份：

2020-10-10 21:42:15 7079 2

原创 JS 案例打印九九乘法表

打印九九乘法表下面展示一些内联代码片。// An highlighted blockvar foo = 'bar';

2020-10-09 09:28:32 113

原创 JS 案例计算：1+2+3+...+n的和

计算：1+2+3+…+n的和n是一个大于0的自然数，由用户输入。下面展示一些内联代码片。// An highlighted block<script type="text/javascript"> var a=prompt("请输入一个大于0的数：",""); var sum=0; for(var i=0;i<=a;i++){ sum=sum+i } alert(sum); </script>解析知识点for特性

2020-09-30 18:32:10 4152

原创 JS 案例显示安排计划

显示安排计划使用prompt()方法输入1-7的数字，显示您的安排计划，否则将提示错误。提示： 定义变量var a=prompt(“请输入今天星期几”,”1”)。 使用if……else语句判断是否是1-7之间的数字。 如是是1-7之间的数字，则使用switch语句显示当天计划安排。代码片。// An highlighted block<script type="text/javascript"> var a=prompt("请输入今天星期几：",""); if(a&gt

2020-09-30 17:24:53 397

原创 JS 案例制作密码检测程序

制作密码检测程序密码输入正确，显示 “ 欢迎访问 ” ，不正确显示 “ 密码不正确，好好想哟 ”提示：1、先定义一个变量password，初始化值为：123456；2、再定义一个变量answer,值为prompt（）接收用户输入的密码；3、利用条件运算符?检测输入的是否是密码并返回相应的值。代码片：// An highlighted block<script> var password=123456; var answer=prompt("请输入密码：","");

2020-09-29 10:11:44 1210

原创 JS 案例制作简易的加法计算器

制作简易的加法计算器1、用prompt()方法接收两个数；2、用alert()方法返回两个数的和。展示代码片.// An highlighted block<script type="text/javascript"> var a=prompt("请输入第一个数：","") var b=prompt("请输入第二个数：","") a=parseInt(a) b=parseInt(b) alert(a+b) </script>解析知识

2020-09-28 21:01:12 2974

suiferq的博客