PHP一阶段 html+css+js 练习题汇总
2024-06-13 08:24:10
一、动态时钟
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>动态时钟</title>
6 <script type="text/javascript"></script>
7 </head>
8
9 <body>
10 <h3 onClick="showtime(this)" id="as1"></h3>
11 </body>
12 </html>
13
14
15 <script>
16 var weq=document.getElementById('as1');
17 function showtime(){
18 var dy=new Date();
19 var year=dy.getFullYear(),
20 month=dy.getMonth(),
21 date=dy.getDate();
22
23 var hours=dy.getHours(),
24 mients=dy.getMinutes(),
25 semiao=dy.getSeconds();
26 if(month<10){
27 var jia="0"+(month+1);
28 }else{
29 jia=+(month+1);
30 }
31 if(date<10){
32 var jian="0"+(date+1);
33 }else{
34 jian=+(date+1);
35 }
36 var time=year+"-"+jia+"-"+jian+" "+hours+":"+mients+":"+semiao;
37 weq.innerHTML=time;
38 }
39 window.onload=function(){
40 time = setInterval("showtime()",1000);
41 }
42
43 </script>View Code
二、实现简单计算器，分别输入两个数和一个运算符号，计算结果。计算过程使用一个带参数和带返回值得函数封装实现
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>计算器</title>
6 <script type="text/javascript"></script>
7 </head>
8
9
10 <body>
11 <!--1、实现简单计算器，分别输入两个数和一个运算符号，计算结果。计算过程使用一个带参数和带返回值得函数封装实现（10分）-->
12 <p>请输入数1:<input type="text" id="numone" value=""></p>
13 <p>请输入数2:<input type="text" id="numtwo" value=""></p>
14 <p>请选择符号:<select>
15 <option >+</option>
16 <option>-</option>
17 <option>*</option>
18 <option>/</option>
19 </select></p>
20
21 <span><input type="button" value="计算" onClick="jisuan()"></span>
22 <input type="text" id="numhe" value="">
23
24 </body>
25 </html>
26 <script>
27
28 var sum='';
29 function jisuan(){
30 var one=document.getElementById('numone').value,
31 two=document.getElementById('numtwo').value,
32 num=document.getElementById('numhe');
33 console.log(one); console.log(two);
34 var shuxing=document.getElementsByTagName('select')[0].value;
35
36 if(shuxing == '+'){
37 sum=parseInt(one) + parseInt(two);
38 }else if(shuxing == '-'){
39 sum=parseInt(one) - parseInt(two);
40 }else if(shuxing == '*'){
41 sum=parseInt(one) * parseInt(two);
42 }else if(shuxing == '/'){
43 sum=parseInt(one) / parseInt(two);
44 }
45 num.value=sum;
46 }
47
48 </script>View Code
三、彩票36选7 不重
1 var arr=[];
2 var sum="";
3 var flag=1
4 for(i=0;i<7;i++){
5 sum=parentInt(Math.random()*35+1);
6 for(var j in arr){
7 if(sum=arr[j]){
8 flag=0;
9 break;
10 }
11 }
12 if(flag==0){
13 i--;
14 }else{
15 arr[i]=sum;
16 }
17
18 console.log(arr[i]);
19 }View Code
四、生成4个随机数当做验证码
1 利用DOM进行表单验证
2
3 例：生成4个随机数当做验证码
4
5 //HTML输出程序
6
7 验证码：<div id="yzm" onClick="huanyizhang"></div><br>
8
9 请输入验证码：<input type="text" id="shuru"><br>
10
11 <button onClick="yz">验证</button><span id="sp"></span>
12
13 var arr=[0，2,1,3,5,4,8,6]; //定义一个数组，用于存放随机数
14
15 var yzm1=document.getElementById("yzm"); //获取yzm的元素
16
17 var str=""; //定义一个空的变量用于情空以前赋值的验证码
18
19 function huanyizhang(){ //定义一个方法用于重新生成验证码
20
21 for(var i=0;i<4;i++){ //定义循环次数
22
23 var xb=Math.random()*arr.length; //定义一个变量用于存放随机生成的验证码
24
25 str=str+arr[xb]; // 将验证码存放到变量中
26
27 }
28
29 yzm1.innerHTML=str; //将变量输出到表单中
30
31 }
32
33 var shuru1=document.getElementById("shuru").value; //获取用户输入的验证码的值
34
35 var trueorfalse=document.getElementById("sp").innerHTML //获取最终判断结果span标签的值
36
37 function yz(){ //定义一个方法用来验证输入的结果是否正确
38
39 if(shuru1==str){ //当正确时输出
40
41 trueorfalse="验证码输入正确";
42
43 }else{ //当错误时输出
44
45 trueorfalse="验证码输入错误";
46
47 }
48
49
50
51 }
52
53
54
55 思路：
56
57 1.先建立HTML
58
59 2.观察需要获取的值，和想要输入的值
60
61 3.定义变量获取想要的元素并添加js事件
62
63 注意及易错
64
65 1.注意要输入的值是不是表单元素，表单元素需要用.value来获值，非表单元素需要用innerHTML来获取
66
67 2.注意定义空值，清空每次赋值的View Code
五、水仙花数
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>水仙花数</title>
6 <script type="text/javascript" src="shuixianhuashu.js"></script>
7 <script>
8 for(var i=100;i<1000;i++)
9 {
10 var a=parseInt(i/100);
11 var b=parseInt(i/10%10);
12 var c=parseInt(i%10);
13 if(a*a*a+b*b*b+c*c*c==i)
14 {
15 console.log(i);
16 }
17 }
18 </script>
19 </head>
20
21 <body>
22
23 </body>
24 </html>View Code
六、用*号做一个菱形
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>*号菱形</title>
6 <script type="text/javascript"></script>
7 </head>
8 <body>
9 </body>
10 </html>
11 <script>
12 var line=7;
13 for(var i=0;i<line;i++) {
14 if(i<=3) {
15 for(var j=0;j<=line-i-4;j++) {
16 document.write(' ');
17 }
18 for(var j=0;j<i*2+1;j++) {
19 document.write('*');
20 }
21 } else {
22 for(var j=0;j<=i-line+4;j++) {
23 document.write(' ');
24 }
25 for(var j=(line-i)*2-1;j>0;j--) {
26 document.write('*');
27 }
28 }
29 document.write('<br />');
30 }
31 </script>View Code
七、100元购物卡，牙刷5元，香皂2元、洗发水15元 有几种组合每个的个数
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>购物卡</title>
6 <script type="text/javascript" src="gouwukati.js"></script>
7 <script>
8 var num = 0;
9 for(var i = 0; i<=20;i++){
10 for(var j = 0; j<=50;j++){
11 for(var k = 0; k<=6;k++){
12 if(i*5+j*2+k*15 == 100){
13 num++;
14 console.log("第"+num+"种：牙刷"+i+"个,香皂"+j+"个,洗发水"+k);
15 }
16 }
17 }
18 }
19 console.log("总共有"+num+"种情况");
20 </script>
21 </head>
22
23 <body>
24 </body>
25 </html>View Code
八、斐波那契数列 第20个数是什么
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>斐波那契数列 第20个数是什么</title>
6 <script type="text/javascript" src="yibaishudehe.js"></script>
7 <script>
8 var n=prompt("请输入第几个数");
9 var a=0;
10 var b=0;
11 for(var a=0;a<n;a++){
12 b=a+b;
13 if(a<100){
14 console.log(b);
15 }
16 }
17 </script>
18 </head>
19 <body>
20 </body>
21 </html>View Code
九、男士身高与体重的关系是：身高－１００＝体重； 女士：身高－１１０＝体重。
上下浮动３公斤属正常。
输入性别，身高，体重，输出：正常？偏胖？偏瘦？
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title> 输入性别，身高，体重，输出：正常？偏胖？偏瘦？</title>
6 <script type="text/javascript" src="shuzu.js"></script>
7 <script>
8 var six=prompt("性别");
9 var h=prompt("身高");
10 var w=prompt("体重");
11 var i="正常";
12 var j="偏胖";
13 var k="偏瘦";
14 switch(six){
15 case "男":
16 var cha=w-h-100;
17 if(cha>=-3&&cha<=3){
18 console.log(i);
19 }
20 else if(cha>3){
21 console.log(j);
22 }
23 else{
24 console.log(k);
25 }
26 break;
27 case "女":
28 var cha=w-h-110;
29 if(cha>=-3&&cha<=3){
30 console.log(i);
31 }
32 else if(cha>3){
33 console.log(j);
34 }
35 else{
36 console.log(k);
37 }
38 break;
39 }
40 </script>
41 </head>
42
43 <body>
44 </body>
45 </html>View Code
十、青歌赛打分、20位评委给一个选手打分、去掉一个最高分、去掉一个最低分，求平均得分、去掉两个分？
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <script type="text/javascript" src="dafen.js"></script>
7 <script>
8 //青歌赛打分、20位评委给一个选手打分、
9 //去掉一个最高分、去掉一个最低分
10 //求平均得分、去掉两个分
11 //
12 //1、定义一个数组
13 //2、循环20次 prompt
14 //3、循环比较得出最高分，最低分
15 //4、求和减去最高分，最低分
16 var arr=[];
17 var sun=0;
18 for(var a=0;a<4;a++){
19 arr[a]=parseInt(prompt("请输入分数"));
20 }
21 var max=arr[0];
22 var min=arr[0];
23 for(var b=0;b<4;b++){
24 if(max < arr[b]){
25 max = arr[b];
26 }
27 if(min > arr[b]){
28 min = arr[b];
29 }
30 sun=sun+arr[b];
31 }
32 console.log(((sun-max-min)/2));
33 </script>
34 </head>
35 <body>
36 </body>
37 </html>View Code
十一、实现轮播图_鼠标放上和移开 关联自动轮播
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>轮播图</title>
6 <style></style>
7 </head>
8 <!--三张图片，每张图片，鼠标放上去之后出现左右箭头houver，点击左滑，右滑--离开时箭头消失-->
9 <!--
10 1.三张图片重叠
11 2.点击之后自动跳转
12 3.循环次数为arr.length
13 右循环为arr.length 左循环为arr.length-1
14 -->
15 <body>
16 <div>
17 <button onClick="ttp()">上一张</button>
18 <img src="imge/1.jpg" onMouseOver="stopSetin()" onMouseOut="zaikaishi()" alt="" id="imge1" >
19 <button onClick="xia()">下一张</button>
20 </div>
21 </body>
22 </html>
23 <script type="text/javascript">
24 window.onload=function(){
25
26 }
27 var n=1;
28 var arr=["imge/1.jpg",'imge/2.jpg','imge/3.jpg'];
29 var imclass=document.getElementById('imge1');
30 function xia(){
31 imclass.setAttribute("src",arr[n]);
32 n++;
33 if(n >= arr.length){
34 n=0;
35 }
36 }
37 function ttp(){
38 imclass.setAttribute("src",arr[n]);
39 n--;
40 if(n < 0){
41 n=arr.length-1;
42 }
43 }
44 stre=setInterval("xia()",1000);
45 function stopSetin(){
46 clearInterval(stre);
47 }
48 function zaikaishi(){
49 stre=setInterval("xia()",1000);
50 }
51 </script>View Code
转载于:https://www.cnblogs.com/1301694f/p/8331406.html
PHP一阶段 html+css+js 练习题汇总相关推荐
- html面试题(一)--html css js
前端面试题汇总 一.HTML和CSS 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
- 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
- 开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面
NanUI是什么 NanUI基于ChromiumFX项目进行开发,它能让你在你的Winform应用程序中使用HTML5/CSS3/Javascript等网页技术来呈现用户界面(类似Electron). ...
- 前端面试宝典 html css js ajax es6
面试宝典 一.HTML和CSS 1 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 1 2. 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 1 3. ...
- 前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- HTML5,CSS,JS前端常见知识面试题
css中单位px,em,rem的区别 (1)px 是长度单位,它是相对于显示器屏幕分辨率而言的.比较稳定和精确,但在浏览器中放大或缩放浏览器页面时会出现页面混乱的情况. (2)em 是相对长度单位.e ...
- JS事件汇总,addEventListener添加事件监听
JS事件汇总 JavaScript 事件 JS事件汇总 鼠标事件 键盘事件 表单事件 读取事件 onload与onpageshow事件区别 其它事件 addEventListener()添加事件监听 ...
- 前端HTML+CSS面试题汇总一
目录 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? Quirks模式是什么?它和Standards模式有什么区别 Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有 ...
- 七天学会Node.js（汇总）
七天学会Node.js(汇总) 文章目录 七天学会Node.js(汇总) 1. NodeJS基础 什么是NodeJS 有啥用处 如何安装 安装程序 编译安装 如何运行 权限问题 模块 require ...
最新文章
- 实用手册：11种常见滤镜及使用效果
- VTK：PolyData之ExtractSelectionOriginalId
- SpringMVC表单验证器的使用
- 初中数学知识点总结_初中物理 | 最全知识点总结
- pycharm常用的快捷方式及设置
- 工具系列——COMSOL Multiphysics 5.5安装教程
- 为程序员准备的英语学习资料
- 电脑重置,win10怎么重置此电脑 重置电脑的方法和后果
- csv是什么意思中文_CSV 文件是什么意思？
- 东原仁知服务招股书失效：主营业务严重依赖迪马集团，曾多次更名
- 冬天别忘晒太阳[整理]
- 初识C语言，一起迈入编程世界的大门
- 搭建pixhawk飞控无人小车--前期准备
- equals和==的区别
- js中转换json对象方法详解及使用案例
- 频率、波长、传输距离、传输速率之间的关系总结
- Linux---scp、cp命令
- SAP VL02N 交货单过账函数 WS_DELIVERY_UPDATE
- java+python+nodejs设备配件采购报修进销存管理系统
- 什么是std::string...?怎么用
热门文章
- mysql 内置存储过程_mysql 内置存储过程
- 信签纸有虚线怎么写_edm邮件营销，专注解决你的开发信难题
- mysql8.0连接错误_MySql 8.0连接失败
- tis红石生存服务器后勤系统,我的世界红石生存服务器TIS，真正的大神团队，惊叹世界的杰作...
- java中处理异常怎么越过,java – Spring Batch – 异常不可跳过
- 壁式框架内力计算_新手怎样做好框架剪力墙设计，怎样用pkpm出图
- Python的Lock对象和Condition对象对比
- ssh 连接linux 乱码问题,SSH 连接 Ubuntu 时的中文乱码问题
- linux 发生变更的文件夹,【Linux常识篇(3)】文件及文件夹的ctimeatimemtime的含义详解...
- 计算机维修 主板 打印机,一台电脑带电拨打印机接口 ，烧坏主板，不能开机