学习基础HTML、CCS、JavaScript 知识实现抽奖页面

最新推荐文章于 2024-02-23 11:25:58 发布
最新推荐文章于 2024-02-23 11:25:58 发布
阅读量1.1k 收藏 22
点赞数 7
文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shangxingya/article/details/107496496
版权

文章目录

三剑客

  • ⽹⻚最主要由3部分组成：结构（内容）、表现（样式）和⾏为（动态交互）。⽹⻚现在新的标准是W3C，这三部分所对应的也就是是HTML、CSS和JavaScript。

HTML ：内容层，全称“Hyper Text Markup Language（超⽂本标记语⾔）”，简单来说，⽹⻚就是⽤HTML语⾔制作的。html⽂档就类似于word⽂档，html⽂档中写的内容就是要显示⽂本内容，当然有⼀定的格式，这样浏览器知道怎么显示出来。
CSS ：样式层，全称“（层叠样式表）”，⽤来修饰HTML⽂本内容的，它的作⽤是表示⼀块内容以什么样的样式（字体、⼤⼩、颜⾊、宽⾼等）显示。
JavaScript ：⾏为层，对⽹⻚添加⼀些动态的交互操作，⽐如⿏标放置哪边会变⼤，可以点击操作等

内容层HTML

  • HTML全称是 Hyper Text Markup Language（超⽂本标记语⾔），它就是制作⽹⻚⻚⾯的标准语⾔。HTML并不是⼀⻔编程语⾔，它没有逻辑，只是⼀⻔描述性的标记语⾔

HTML最基本的语法就是如此：
<标签名>内容</标签名>
例如，⽤标签来表示⽂字显示为粗体，⽤标签对来定义⽂字为斜体字。当浏览器读取到标签对时，就会将标签中的⽂字⽤斜体显示出来。

  • HTML基本结构
    ⼀个HTML⽂档由4个基本部分组成：
  1. ⼀个⽂档声明：
    声明这是⼀个HTML⽂档，当然很多是好可不写
  2. ⼀个html标签对：
    标签的作⽤相当于设计者在告诉浏览器，整个⽹⻚是从这⾥开始的，然后到结束。
  3. ⼀个head标签对：
    ⻚⾯的“头部”，⻚⾯的相关信息，⽐如标题，作者等等就写在这，这⾥内容是不会显示在浏览器的
  4. ⼀个body标签对：
    ⻚⾯的“身体”，⼀般⽹⻚绝⼤多数的标签代码都是在这⾥编写。主要显示在浏览器屏幕中的内容
<html>
 <head>
 <title>第⼀个⻚⾯</title>
 </head>
 <body>
 <h1>标题</h1>
 <h2>标题</h2>
 <p>段落标签</p>
 <p>段落标签</p>
 <span>⽂本标签</span>
 <span>⽂本标签</span>
 <span>⽂本标签</span>
 <div>
 <span>⽂本标签</span>
 <span>⽂本标签</span>
 </div>
  <img src="images/t.png">
 <table border="1" >
 <tr>
 <td>123</td>
 <td colspan="2">234</td>
 </tr>
 <tr>
 <td rowspan="2">123</td>
 <td>234</td>
 <td>345</td>
 </tr>
 <tr>
 <td>123</td>
 <td>234</td>
 <td>345</td>
 </tr>
 </table>
 </body>
</html>

在这里插入图片描述

样式层CSS

  • 我们可以使⽤style属性，为标签添加样式，如：
<h1 style="color: red;font-size: 16px;background: blue;">标题</h1> <h2 style="color: red;font-size: 16px;background: blue;">标题</h2> <p style="color: red;font-size: 16px;background: blue;">段落标签</p>
  • 我们可以把这⼀类的样式，提出来包起来，并给它⼀个名字test。之后我们就⽤这个test为我们的标签添加样式
<style type="text/css">
 .test{
 color: red;
 font-size: 16px;
 background: blue;
 }
</style>

<h1 class="test">标题</h1> 
<p class="test">段落标签</p>

这个也就叫类选择器，选择出⼀类的标签添加样式。
选择器
顾名思义，就是选择到相应的标签进⾏修饰，其中主要的选择器有：

  1. 标签选择器（根据标签名称获取标签） 对⻚⾯中的所有该标签都有效
  2. ID选择器（获取标签id=xxx的标签）对⻚⾯中指定id的标签进⾏修饰，⼀般都是修饰唯⼀的标签
  3. 类选择器（获取标签class=xxx的标签）可以选择⻚⾯中的⼀组标签，class=”xxx”的⼀组标签进⾏
    修饰
  4. 包含选择器（获取某类标签中的所有的⼦标签）
  5. …
	<style type="text/css">
      p {
      	color: blue;
      	background: red;
      }
      #idChance {
      	color: orange;
      	font-size: 18px;
      }
      #idChance span {
      	font-size: 28px;
      	background: blue;

      }
	</style>
  • CSS⽂字属性

font-family 字体类型 font-family：微软雅⿊,Arial,Times New Roman;
font-size 字体⼤⼩ font-size：16px;
font-weight 字体粗细 font-weight: normal/lighter/bold/bolder;
font-style 字体斜体 font-style: italic;
color 颜⾊ color: red;

  • 边框的三个属性

border-width 边框的宽度
border-style 边框的外观
border-color 边框的颜⾊

  • CSS背景图像属性

background-image 定义背景图像的路径，这样图⽚才能显示嘛
background-repeat 定义背景图像显示⽅式，例如纵向平铺、横向平铺
background-position 定义背景图像在元素哪个位置
background-attachment 定义背景图像是否随内容⽽滚动
background:url(images/11.jpg) no-repeat;定义背景图像不重复出现

  • 盒⼦模型
    外边距margin，边框border，内边距padding
    对于child块标签，边框到⽗标签之间的距离是外边距margin，边框是border，⽽child的内容到边框的距离就叫做内边距padding，他们都是有上下左右之分。
    在这里插入图片描述

⾏为层JavaScript

  • avaScript是⼀⻔编程语⾔，有很多的内容，⽐如变量、操作符、分⽀循环语句、函数⽅法等等，再深⼊还有⾯向对象、原型、闭包、作⽤域等等内容
  1. 动态改变⻚⾯内容
    HTML⻚⾯是静态的，⼀旦编写，内容是⽆法改变的。JavaScript可以弥补这个不⾜，可以将内容动态地显示在⽹⻚中。
  2. 动态改变⽹⻚的外观
    JavaScript通过修改⽹⻚元素的CSS样式，达到动态地改变⽹⻚的外观。
  3. 验证表单数据
    我们常⻅的在各⼤⽹站中的注册中的验证功能，就是JavaScript实现的。
  4. 响应事件
    JavaScript是基于事件的语⾔。例如点击⼀个按钮弹出⼀个对话框，就是⿏标点击触发的事件
    ⻚⾯中试试看
  • 实现点击改变子颜色和点击显示倒计时
<!DOCTYPE html>
<html>
<head>
	<title>第一个页面</title>

	<style type="text/css">
      .test{
      	color: green;
      	font-size: 25px;
      	background: yellow;
      }
      .test2{
      	color: green;
      }
      p {
      	color: blue;
      	background: red;
      }
      #idChance {
      	color: orange;
      	font-size: 18px;
      }
      #idChance span {
      	font-size: 28px;
      	background: blue;

      }
	</style>
</head>
<body>
<h1 style="color: red; font-size: 30px; background: blue">标题一</h1>
<h2 style="color: red; font-size: 25px; background: blue">标题二</h2>
 <p style="color: red; font-size: 15px; background: blue">段落内容</p>
 <p class="test">段落内容</p>
 <p class="test" id="countDwon" οnclick="count()">段落内容3</p>
 <p>段落内容</p>
 <p>段落内容</p>
  <span class="test2">文本标签1也叫做文本行标签</span>
  <span class="test2" id="content">文本标签2也叫做文本行标签</span>
  <span class="test2" id="content2" οnclick="clickme()">文本标签3也叫做文本行标签</span>
   
   <div id="idChance">
     <span>块标签</span>
     <span>块标签</span>
   </div>
  
   <div>
     <span>块标签</span>
   </div>
   
   <img src="images\1.png">
   <img src="D:\books\images\1.png">

    <table border="1">
     <tr>
      <td>我是列</td>
      <td colspan="2">我跨越俩列</td>
      <td>我是列</td>
     </tr>
     <tr>
      <td>我是列</td>
      <td rowspan="2">我跨越俩行</td>
      <td>我是列</td>
     </tr>
     <tr>
      <td>我是列</td>
      <td>我是列</td>
      <td>我是列</td>
     </tr>
    </table>

<script type="text/javascript">
  document.getElementById("content").innerHTML = "javascript";
  document.getElementById("content").style.background = "red";
//实现改变子和颜色
  function clickme(argument) {
  	// body...
  	   document.getElementById("content2").innerHTML = "javascript";
       document.getElementById("content2").style.background = "red";
  }

  	var times = 3;
	var timer;
	//实现倒计时
function count() {
	// body...

	document.getElementById("countDwon").innerHTML = times;
	times--;
	if (times >= 0) {
	  timer = setTimeout(count, 1000);	
	} else {
		clearTimeout(timer);
	}
	
}

</script>

</body>
</html>

实现抽奖页面

  • 效果展示
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

源代码

<!DOCTYPE html>
<html>
<head>
	<title>转盘抽奖游戏</title>

	<style type="text/css">
	.kind{
		background: url(images/bg.jpg);
		height: 684px;
		width: 684px;
		margin: auto;

	}
	.begin{
		cursor: pointer;
	}
	.allneed{
		background: url(images/bb.jpg);
	}
	</style>

</head>
<body class="allneed">

<div class="kind">
<!-- 以表格的形式添加奖项图片 -->
<table style="margin-left: 47px; padding-top: 35px">
<tr>
<td id="count0"><img src="images/3.png"></td>
<td id="count1"><img src="images/2.png"></td>
<td id="count2"><img src="images/3.png"></td>
<td id="count3"><img src="images/4.png"></td>
</tr>

<tr>
<td id="count4"><img src="images/8.png"></td>

<!-- onclick是一个监听器 只要得到动作 就执行JavaScript的方法 -->
<td colspan="2" rowspan="2" class="begin" οnclick="changeColor()"></td>
<td id="count5"><img src="images/3.png"></td>
</tr>

<tr>
<td id="count6"><img src="images/3.png"></td>
<td id="count7"><img src="images/7.png"></td>
</tr>

<tr>
<td id="count8"><img src="images/5.png"></td>
<td id="count9"><img src="images/3.png"></td>
<td id="count10"><img src="images/1.png"></td>
<td id="count11"><img src="images/6.png"></td>
</tr>
</table>

</div>

<script type="text/javascript">

var count = 0;
var allTimes = 0;
var prize = 0;
var timer;
function changeColor(argument) {
	// body...
	document.getElementById("count" + count).style.background = "none";
	//每次都让count++ 让下一个变红 并且判断如果大于12就让其变为0
	count++;
	if (count == 12) {
		count = 0;
	}
	document.getElementById("count" + count).style.background = "red";
	
	//循环的次数
	if (allTimes < 36 + prize) {
		allTimes++;
		//prize决定了到底哪个奖项最终获奖
		if (allTimes == 36) {
			prize = Math.floor(Math.random() * 12);
		}
		timer = setTimeout(changeColor, 80 + (allTimes * 10));
	} else {
		//结束循环 但是不要忘了让allTimes和ount置为0 保证下次抽奖正常可以进入循环
		clearTimeout(timer);
		allTimes = 0;
		//提示中奖结果
		if(prize == 1 || prize == 3 ||prize == 4 || prize == 7 || prize == 8 || prize == 10 || prize == 11) {
		  alert("恭喜你中奖了");
		} else {
			alert("很遗憾你未中奖");
		}
		document.getElementById("count" + count).style.background = "none";
		count = 0;
	}
	
}
</script>

</body>
</html>
Listen-Y
关注
  • 7
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 抽奖网页源码
04-06
HTML 抽奖网页源码
【抽奖平台开发（1）HTML+JS+CSS】抽奖功能的前端实现.html
08-22
配套文章地址：https://dengxj.blog.csdn.net/article/details/99699427 ；文章通过使用HTML+JS+CSS，记录了一次抽奖功能的前端实现方法，这里上传一份整合后的源码。
HTML实例（一）——本地存储&抽奖
最新发布
Tang961216的博客
02-23 447
HTML实例（一）——本地存储&抽奖
js+css+html 抽奖页面
weixin_43876005的博客
03-12 1131
<div class="container"> <div class="block1 block">小米笔记本</div> <div class="block2 block">iPhoneX</div> <div class="block3 block">PS4游戏机</div> <div class="block4 block">谢谢参与<.
利用html css JavaScript做个简单的抽奖系统
weiyuyang250的博客
10-14 1621
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
日常练习-html+js+css制作一个抽奖网页
Liubingzhe
05-07 5428
html <html> <head> <meta charset="utf-8"> <title>抽奖web</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">...
html+抽奖游戏,网页版抽奖&HTML+CSS+javaScript
weixin_39758953的博客
05-30 669
s> 前言 对以前做的demo整理这是一个用原生的js编写的简单的网页抽奖页面。效果图：Paste_Image.png详细代码：*{margin: 0;padding: 0;}ul li{list-style: none;}#lis{height: 568px;width: 426px;border: 10px solid #2386ff;margin: 30px auto;}#lis li...
html+ccs+JavaScript的网页课程大作业
12-16
JavaScript可以响应用户交互，如点击按钮、滚动页面等，还可以与服务器进行异步通信（AJAX），实现数据的实时更新。在这个项目中，JavaScript可能被用来处理表单提交、动画效果、或者实现某些特定的用户交互功能。 ...
Java学习笔记CCS AJAX DMS JSP servlet JavaScript等中文笔记整理.rar
11-23
AJAX（Asynchronous JavaScript and XML）是一种创建交互式网页应用的技术，通过在后台与服务器异步交换数据并局部更新页面，实现页面无刷新更新。笔记可能涵盖了XMLHttpRequest对象的使用、JSON数据格式、DOM操作和...
HTML、XHTML、CSS与JavaScript入门经典_html_javascript_CCS_xhtml_
10-04
HTML（HyperText Markup Language）是网页内容的基础，用于定义页面的结构和布局。它通过一系列的标记（tags）来组织页面元素，如标题、段落、图像和链接等。HTML5是当前广泛使用的版本，增加了许多新特性，如音频、...
html编写抽奖程序
08-04
教你如何制作一个简单的网页，此程序写的就是抽奖的小程序
html网页大转盘抽奖页面代码
12-19
html网页大转盘抽奖页面代码，转盘抽奖，希望年终抽奖用的上；
html js jquery 写的一个抽奖小程序
11-25
使用HTML CSS JS JQUERY写的一个简单的小程序，画面精良，大家可是适当修改就可以成为自己的抽奖程序。
公司年会抽奖软件（静态html）
01-02
自助研发的一个抽奖小软件，不支持非程序员修改，页面属于静态html页面，仅供参考，需要自行修改里面的规则和数据。(不懂代码的请勿下载)
ccs，html，javascript，jqury手册
07-12
通过深入学习和实践这些文档，开发者能够更有效地掌握CSS来美化网页，使用HTML构建网页结构，利用JavaScript实现动态功能，以及借助jQuery简化代码并提升开发效率。这四个技术是Web开发的基础，对于任何前端开发者来...
html+CCS跨年烟花代码
12-31
HTML和CSS是网页设计的基础，本主题聚焦于利用这两者创建一个跨年烟花效果的代码实现。HTML（HyperText Markup Language）负责构建网页结构，而CSS（Cascading Style Sheets）则用来美化这些结构，赋予网页色彩、...
html代码写抽奖网页_html餐厅网页代码，秀一波
weixin_39824020的博客
12-01 1159
首页美味选择配送说明关于我们联系我们首页美味选择配送说明关于我们联系我们打印电子优惠券加入俱乐部配送范围餐厅信息 版权所有css*{ padding:0它; marginal:0它;}body{ background:url(../img/bg.jpg); background-repeat}.container{ width:900px; height:600px; background-col...
html+js+css做一个抽奖
qq_47997447的博客
10-20 259
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; padding: 0; position: relative; } #baoguo { width: 310px; .
【小河今学 | html+css+js】制作一个简单的抽奖小模块
LB_laber的博客
07-29 1266
制作一个简单的抽奖小模块
html+ccs+js 登录注册页面
07-14
### 回答1： HTML、CSS和JS是构建登录注册页面的常用技术。...通过HTML创建页面的结构和内容，通过CSS设置页面的样式和布局，通过JavaScript实现页面的交互和动态效果，可以创建出一个功能完善的登录注册页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值