HTML+CSS+JS实现的简单应用小案例分享
目录
- 1.猜数字
- 2.表白墙
- 3.切换日夜间模式
- 4.待办事项
1.猜数字
<!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>猜数字游戏</title>
</head>
<body>
<input type="button" id="reset" value="重新开始一局游戏">
<div>
<span>请输入要猜的数字:</span>
<input type="text" id="num">
<input type="button" value="猜" id="guess">
</div>
<div>
<span>已经猜的次数: </span>
<span id="count"> 0 </span>
</div>
<div>
<span>猜的结果: </span>
<span id="result"></span>
</div>
<script>
// 先获取要用到的 JS 的 DOM 对象
let resetButton = document.querySelector("#reset") /* 参数时选择器，所以要通过特殊符号指定是哪种选择器*/
let numInput = document.querySelector('#num');
let guessButton = document.querySelector('#guess');
let countSpan = document.querySelector('#count');
let resultSpan = document.querySelector('#result');
//生成一个1~100之间的随机整数
let toGuess = Math.floor(Math.random()*100) + 1;
let count = 0;
console.log("toGuess: " + toGuess);
guessButton.onclick = function(){
// 用户点击 [猜] 这个按钮, 首先先更新点击次数的显示.
count++;
countSpan.innerHTML = count;
// 读取到输入框的内容, 进行判定
/* parseInt() 函数解析字符串并返回整数 */
let num = parseInt(numInput.value);
console.log("num: " + num);
if(num < toGuess){
resultSpan.innerHTML = '猜低了';
resultSpan.style.color = 'red';
}else if(num > toGuess){
resultSpan.innerHTML = '猜高了';
resultSpan.style.color = 'green';
}else{
resultSpan.innerHTML = '猜对了';
resultSpan.style.color = 'orange';
}
}
resetButton.onclick = function(){
// 把 toGuess 和 count 清空, 同时重新生成一个随机的整数
toGuess = Math.floor(Math.random() * 100) + 1;
count = 0;
resultSpan.innerHTML = '';
countSpan.innerHTML = '';
numInput.value = '';
}
</script>
</body>
</html>
2.表白墙
<!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>messageWall</title>
</head>
<body>
<style>
*{
margin:0;
padding:0;
}
.container {
width: 100%;
height:100%;
}
h1{
text-align:center;
padding:20px 0;
}
p{
font-size: 15px;
color:grey;
padding:10px 0;
text-align: center;
}
.row{
display:flex;
height:50px;
justify-content: center;
align-items: center;
}
.row span{
width:100px;
}
.row .edit{
width: 200px;
height: 36px;
}
.row .submit{
width:300px;
height:30px;
background-color: orange;
color:#fff;
border: none; /* 去掉按钮边框*/
}
.row .submit:active{
background-color: grey;
}
</style>
<div class="container">
<h1>表白墙</h1>
<p>输入后点击提交, 将会把消息显示在墙上</p>
<div class="row">
<span>谁:</span>
<input type="text" class="edit">
</div>
<div class="row">
<span>对谁:</span>
<input type="text" class="edit">
</div>
<div class="row">
<span>说什么:</span>
<input type="text" class="edit">
</div>
<div class="row">
<input type="button" value="提交" class="submit">
</div>
</div>
<script>
let submitButton = document.querySelector('.submit');
submitButton.onclick = function() {
// 1. 获取到输入框里面的内容
let edits = document.querySelectorAll('.edit');
let from = edits[0].value;
let to = edits[1].value;
let message = edits[2].value;
console.log(from + ", " + to + ", " + message);
if (from == '' || to == '' || message == '') {
return;
}
//2. 创建一个新的元素节点，即获取到的输入框信息
//将其添加到DOM树中
let row = document.createElement('div');/* 创建出新的idv节点*/
row.className = 'row';/* 设置属性名 */
row.innerHTML = from + '对' + to + '说: ' + message;
let container = document.querySelector('.container');
container.appendChild(row);
//3. 把上次输入的内容清空
for(let i = 0; i < edits.length; i++){
edits[i].value = '';
}
}
</script>
</body>
</html>
3.切换日夜间模式
<!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>切换日夜间模式</title>
</head>
<body>
<style>
/* 清除浏览器默认格式 */
*{
margin:0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.light{
background-color: #fff;
color: #000;
font-size: 40px;;
}
.dark{
background-color: #666;
color: #eee;
font-size: 40px;;
}
</style>
<div class="light">
代码案例:切换日夜间模式;
</div>
<script>
/*获取元素*/
let div = document.querySelector('div');
div.onclick = function(){
console.log(div.className); /* 获取属性值:content*/
if (div.className.indexOf('light') != -1) {
div.className = 'dark';
}else{
div.className = 'light';
}
}
</script>
</body>
</html>
4.待办事项
<!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>todoList</title>
</head>
<body>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.nav {
width: 600px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.nav input {
width: 450px;
height: 50px;
font-size: 25px;
padding-left: 10px;
}
.nav button {
width: 150px;
height: 50px;
border: none;
color: white;
background-color: orange;
font-size: 18px;
}
.nav button:active {
background-color: grey;
}
.container {
width: 600px;
margin: 0 auto;
display: flex;
justify-content: center;
/* padding-top: 10px; */
margin-top: 10px;
/* background-color: green; */
}
.container .left,
.container .right {
width: 50%;
}
.container .left h3,
.container .right h3 {
text-align: center;
height: 50px;
line-height: 50px;
background-color: black;
color: white;
}
.container .row {
height: 50px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.container .row span {
width: 240px;
}
.container .row button {
width: 40px;
height: 30px;
}
.container .row input {
margin-right: 5px;
}
</style>
<!-- 表示上方的 div, 里面放输入框和按钮 -->
<div class="nav">
<input type="text">
<button>新建任务</button>
</div>
<!-- 这个是下方的 div, 里面分成左右两栏 -->
<div class="container">
<div class="left">
<h3>未完成</h3>
<!-- <div class="row">
<input type="checkbox">
<span>吃饭</span>
<button>删除</button>
</div> -->
</div>
<div class="right">
<h3>已完成</h3>
</div>
</div>
<script>
let addTaskBtn = document.querySelector(".nav button");
addTaskBtn.onclick = function() {
// 1. 获取到输入框的内容
let input = document.querySelector(".nav input");
let taskContent = input.value;
// 2. 创建一个 div.row, 里面设置上需要的 复选框, 文本, 删除按钮
let row = document.createElement('div');
row.className = 'row';
let checkBox = document.createElement('input');
checkBox.type = 'checkbox';
let span = document.createElement('span');
span.innerHTML = taskContent;
let deleteBtn = document.createElement('button');
deleteBtn.innerHTML = '删除';
row.appendChild(checkBox);
row.appendChild(span);
row.appendChild(deleteBtn);
// 3. 把 div.row 添加到 .left 中~
let left = document.querySelector('.left');
left.appendChild(row);
// 4. 给 checkBox 增加一个点击处理函数. 点击之后就能够移动任务
checkBox.onclick = function() {
// 当用户点击的时候, 就获取到当前的这个 row 这个元素
// 把这 row 给添加到另外一侧.
// 也可以根据 checkBox 的选中状态决定是在 left 还是 right
let target = null;
if (checkBox.checked) {
// 已经是选中的状态
// 就把这个元素放到右边
target = document.querySelector('.right');
} else {
// 是未选中的状态
// 就把这个元素放到左边
target = document.querySelector('.left');
}
target.appendChild(row);
}
// 5. 实现删除效果, 给删除按钮新增一个删除操作
deleteBtn.onclick = function() {
// 要想删除 row, 就需要知道 row 的父元素
let parent = row.parentNode;
parent.removeChild(row);
}
}
</script>
</body>
</html>
到此这篇关于HTML+CSS+JS实现的简单应用小案例分享的文章就介绍到这了,更多相关HTML CSS JS应用案例内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS猜数字游戏实例讲解
本文实例为大家分享了JS实现猜数字游戏的具体代码,供大家参考,具体内容如下 猜数字游戏: 1)利用JS的Math内置对象,实现在1-50内选取一个整数随机数作为游戏答案 2)输入数字进行判断,共有10次输入机会 3)若大于答案数字,则提示猜大了,若小于答案数字,则提示猜小了 4)直至10次机会用完或者猜对答案了,则结束游戏 <script type="text/javascript"> // 猜数字案例 function guessTip(min, max) { min =
-
HTML+CSS+JavaScript创建一个简单的井字游戏
目录 实现 HTML 添加 CSS 实现 Javascript 部分 演示地址 实现 HTML 首先在 head 部分,我将包含我们稍后创建的 css 和 javascript 文件.我还添加了名为 Itim 的 Google 字体. <link rel="stylesheet" href="style.css" rel="external nofollow" > <link rel="preconnect"
-
html+css+js实现别踩白板小游戏
目录 背景简介 一.思路分析 二.页面搭建 2.1 HTML层 2.2 CSS层 2.3 JS层 2.3.1获取元素 2.3.2创建每一行div元素 2.3.3点击事件函数封装 2.3.4 方块移动函数封装 2.3.5 游戏开始 三.总结 背景简介 别踩白板这个游戏相信大家都玩过,这个是基于HTML5打造的简单小游戏,在PC端和移动端都能够运行,适应多种平台,今天我们使用原生JS搭配JQuery构建这个小游戏--别踩白板. 一.思路分析 整体页面是一个大的矩形,长宽比例大概是3:2,然后游戏开始
-
js+html+css实现手动轮播和自动轮播
本文实例为大家分享了js+html+css实现手动轮播和自动轮播的具体代码,供大家参考,具体内容如下 原理:设置图片层的总长=单张图片长度*张数:在轮播层中利用overflow只留出一张图片的显示: 通过图片层的left来显示轮播的每一张图,第一张为0,为了后面的图片显示,left的值左移为负数. 原理图 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&
-
JS、CSS和HTML实现注册页面
一个用HTML和CSS实现的注册页面模板,废话不多说了,上代码! 更新:使用JavaScript实现用户名和密码表单校验功能. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding: 0px; bo
-
用js实现猜数字小游戏
上周老师留的小作业,做一个猜数字的小游戏,个人感觉挺有意思的,就随便写了写,有些地方逻辑并不是很合理(学生小白勿喷).主要内容是随机生成0-100的正整数,猜六次每次提示猜的大了还是小了,错误一次小心心就会变黑,完成后弹出提示框是否继续,继续则刷新页面(原理和内容很简单,仅纪念一下) 示例图和代码附上(提前在控制台打印出正确答案) 原理和内容很简单就不再赘述了(图片是iconfont下载,可自行下载) 代码: <!DOCTYPE html> <html lang="en&quo
-
基于Html+CSS+JS实现手动放烟花效果
目录 效果展示 实现代码 Html Css JavaScript 雷迪森安的乡亲们,欢迎来到老实人的前端课堂,上次写了一个新春小盲盒,这大过年的,我把烟花都给你们准备好了,今天我们来写个小烟花吧. 效果展示 注意看有两种模式哦,可以自由切换,鼠标点哪里哪里有烟花,还可以自动放烟花 视频演示:html+css写一个烟花,源码请你直接拿走! 实现代码 Html <div id="tips"> <a id="manual" href="java
-
HTML+CSS+JS实现的简单应用小案例分享
目录 1.猜数字 2.表白墙 3.切换日夜间模式 4.待办事项 1.猜数字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&q
-
JS学习笔记之闭包小案例分析
本文实例讲述了JS学习笔记之闭包小案例.分享给大家供大家参考,具体如下: 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> *{ list-style
-
JS实现轮播图小案例
本文实例为大家分享了JS实现轮播图小案例的具体代码,供大家参考,具体内容如下 分析: 点击左右箭头 滑动轮播图 鼠标不在轮播图内时 每隔2秒自动滑动轮播图 鼠标移入时 停止自动滑动轮播图 点击小圆圈 显示对应的轮播图 1.鼠标移入.移出显示或隐藏左右箭头: // 获取左右箭头的元素 let arrow_l = this.document.querySelector('.arrow-l'); let arrow_r = this.document.querySelector('.arrow-r')
-
node.js做一个简单的爬虫案例教程
准备工作 首先,你需要下载 nodejs,这个应该没啥问题吧 原文要求下载 webstrom,我电脑上本来就有,但其实不用下载,完全在命令行里面操作就行 创建工程 准备工作做完了,下面就开始创建工程了 首先,在你想要放资源的地方创建文件夹,比如我在 E 盘里面创建了一个 myStudyNodejs 的文件夹 在命令行里面进入你创建的文件夹 如图 进入 e 盘:E: 进入文件夹:cd myStudyNodejs(你创建的文件夹的名字) 注意全是英文符号 初始化项目,在你创建的文件夹下面运行 npm
-
Android组件WebView编写有道词典小案例分享
最近学习了WebView组件,写了一个有道词典的小案例,分享给大家,供大家参考,具体内容如下 效果图: 源码下载:https://coding.net/u/gxs1225/p/YouDaoDictionary/git 代码如下: 布局 activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schema
-
js事件委托和事件代理案例分享
什么是事件委托/事件代理 利用事件的冒泡传播机制(触发当前元素的某一个行为,它父级所有元素的相关行为都会被触发),如果一个容器中有很多元素都要绑定点击事件,我们没有必要一个个的绑定了,只需要给最外层容器绑定一个点击事件即可,在这个方法执行的时候,通过事件源的区分来进行不同的操作. 具体小案例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
-
js+canvas实现简单扫雷小游戏
扫雷小游戏作为windows自带的一个小游戏,受到很多人的喜爱,今天我们就来尝试使用h5的canvas结合js来实现这个小游戏. 要写游戏,首先要明确游戏的规则,扫雷游戏是一个用鼠标操作的游戏,通过点击方块,根据方块的数字推算雷的位置,标记出所有的雷,打开所有的方块,即游戏成功,若点错雷的位置或标记雷错误,则游戏失败. 具体的游戏操作如下 1.可以通过鼠标左键打开隐藏的方块,打开后若不是雷,则会向四个方向扩展 2.可以通过鼠标右键点击未打开的方块来标记雷,第二次点击取消标记 3.可以通过鼠标右键
-
Vue实现简单购物车小案例
本文实例为大家分享了Vue实现简单购物车的具体代码,供大家参考,具体内容如下 HTML首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
-
使用js操作cookie的一点小收获分享
为了说清楚这个问题,必须从头说起. 首先从后台配置一个参数,放到一个字段里,该字段叫做keywords,这个参数的值叫做efmis://|efmfj|username|2200|0||2014|http://10.20.1.54:7001/cssServerportal222012/|||||02,姑且不去管这个值有什么含义,相信很多人都遇到过比这个更复杂的字符串.后台配置以后,前台可以这么来显示:${tag_bean.keywords},可以肯定,无论后台配置成什么,前台一定会原定不变的显示出