【HTML5学习笔记】HTML5:生活要对我下手了吗

序。
点击跳转到末。

目的:把我们学校的主页网站个性化,为了方便自我,为了学习。

2018年11月28日版本:
在这里插入图片描述

最简单的html5文档:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

HTML 标题 段落 链接 图片的语法:段落应该是一行为一个段落吧

<!DOCTYPE HTML>
<html>
<head>
<meta?charset="utf-8">
<title>吾本虚无演示</title>
</head>
<body>

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p><a href="https://blog.csdn.net/qq_42807924">这是一个链接</a><p>
<p><img src="file:///D:/wubenstu/stulip_files/wuben.jpg" width="80" height="50" /><p>
<p><a href="https://blog.csdn.net/qq_42807924"><img src="file:///D:/wubenstu/stulip_files/wuben.jpg" width="80" height="50" /></a><p>

</body>
</html>

浏览器运行结果:
在这里插入图片描述

开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。

<a>这是一个无属性的链接</a>
<a href="https://blog.csdn.net/qq_42807924">这是一个链接</a>
<p href="https://blog.csdn.net/qq_42807924">这是一个段落。</p>

超文本链接
这是一个超文本链接
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
<hr>分割线
在这里插入图片描述

<a>这是一个无属性的链接</a>
<a href="https://blog.csdn.net/qq_42807924">这是一个链接</a>
<p href="https://blog.csdn.net/qq_42807924">这是一个段落。</p>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<!-- 这是一个注释 -->

在这里插入图片描述
标题大小与字体大小的关系
1到6号标题与1到6号字体逆序对应,比如1号字体对应6号标题,2号字体对应5号标题。

<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>

<h2>这是2号标题</h2>
<font size="5">这是5号字体文本</font>

<h3>这是3号标题</h3>
<font size="4">这是4号字体文本</font>

<h4>这是4号标题</h4>
<font size="3">这是3号字体文本</font>

<h5>这是5号标题</h5>
<font size="2">这是2号字体文本</font>

<h6>这是6号标题</h6>
<font size="1">这是1号字体文本</font>

在这里插入图片描述
<p>这个<br>段落<br>演示了分行的效果</p>

这个
段落
演示了分行的效果


在这里插入图片描述
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub><sup> 上标</sup>

在这里插入图片描述
跳转:

<a id="tips">第一点</a>

<a href="#tips">访问到第一点</a>

HTML 元素

元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

<meta> 标签- 使用实例
为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为
在 或者 的JavaScript
您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 或 部分中,或者同时存在于两个部分中。

通常的做法是把函数放入 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。


末。
点击回到序。


使用JavaScript写猜数字游戏:
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>猜数字游戏</title> 
</head>
<body>
	
<h1>欢迎来到猜数字游戏!</h1>
<p>输入1-10的数字</p>
<input id="demo" type="text">
<script>
function randomFrom(lowerValue,upperValue)
{
    return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
}
y=randomFrom(1,10);
function myFunction()
{
	var x=document.getElementById("demo").value;	
	if(x==""||isNaN(x))
	{
		alert("请输入阿拉伯数字哦");
	}
	else
	{
		if(x<y)
		{
			alert("输入的数字小了");
		}
		else if(x>y)
		{
			alert("输入的数字大了");
		}
		else
		{
			alert("呀呀呀居然猜对了,再来,我就不信了,嘤嘤嘤")
			y=randomFrom(1,10);
		}
	}
}
</script>
<button type="button" onclick="myFunction()">确定</button>
	
</body>
</html>

在这里插入图片描述

猜数字2.0版本:
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>猜数字游戏</title> 
</head>
<body>
	
<h1>欢迎来到猜数字游戏!</h1>
<p>输入1-10的数字</p>
<input id="demo" type="text">
<script>
function randomFrom(lowerValue,upperValue)
{
    return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
}
y=randomFrom(1,10);//开启网页就产生了随机数
function restart()
{
	y=randomFrom(1,10);//肯定要重新产生随机数
	alert("游戏重启成功")
	document.getElementById("demo").value='';//清空输入框
	
	
}
function showout()
{
	alert("这就放弃了?弱爆了!数字是:" +y + "呀")//传递变量,合并文本输出
}
function myFunction()//判断
{
	var x=document.getElementById("demo").value;	
	if(x==""||isNaN(x))
	{
		alert("请输入阿拉伯数字哦");
	}
	else
	{
		if(x<y)
		{
			alert("输入的数字小了");
		}
		else if(x>y)
		{
			alert("输入的数字大了");
		}
		else
		{
			alert("呀呀呀居然猜对了,再来,我就不信了,嘤嘤嘤")
			y=randomFrom(1,10);//猜对了再来呗
		}
	}
}
</script>
<button type="button" onclick="myFunction()">确定</button><br><br>
 <button type="button" onclick="restart()">重启</button>  <button type="button" onclick="showout()">放弃</button> 
	
</body>
</html>

在这里插入图片描述
可以复制代码到菜鸟教程提供的在线网页测试哟(帮忙打广告吧)
http://www.runoob.com/try/try.php?filename=tryjs_oper_add
在这里插入图片描述

显示时间:
<!--@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
function getTime() {

    var dateObj = new Date();

    var year = dateObj.getFullYear();//年
    var month = dateObj.getMonth()+1;//月  (注意:月份+1)
    var date = dateObj.getDate();//日
    var day = dateObj.getDay();
    var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    var week = weeks[day];//根据day值,获取星期数组中的星期数。
    var hours = dateObj.getHours();//小时
    var minutes = dateObj.getMinutes();//分钟
    var seconds = dateObj.getSeconds();//秒

    if(month<10){
        month = "0"+month;
    }
    if(date<10){
        date = "0"+date;
    }
    if(hours<10){
        hours = "0"+hours;
    }
    if(minutes<10){
        minutes = "0"+minutes;
    }
    if(seconds<10){
        seconds = "0"+seconds;
    }

    var newDate = year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds+"&nbsp &nbsp"+week;
    document.getElementById("date1").innerHTML = "时间显示:" + newDate;//在div中写入时间
    setTimeout('getTime()', 500);//每隔500ms执行一次getTime()
}
</script>

<title>实时显示时间</title>
</head>
<body onload="getTime()">
    <div id="date1"></div>
</body>
</html>

在这里插入图片描述

加上CSS渲染:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body
{
	background-color:#d0e4fe;
}
h1
{
	color:orange;
	text-align:center;
}
p
{
	font-family:"Times New Roman";
	font-size:20px;
}
</style>
</head>

<body>

<h1>CSS 实例!</h1>
<p>这是一个段落。</p>

</body>
</html>

在这里插入图片描述

外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

猜数字游戏3.0:
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>猜数字游戏</title> 
<script>
function getTime() {

    var dateObj = new Date();

    var year = dateObj.getFullYear();//年
    var month = dateObj.getMonth()+1;//月  (注意:月份+1)
    var date = dateObj.getDate();//日
    var day = dateObj.getDay();
    var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    var week = weeks[day];//根据day值,获取星期数组中的星期数。
    var hours = dateObj.getHours();//小时
    var minutes = dateObj.getMinutes();//分钟
    var seconds = dateObj.getSeconds();//秒

    if(month<10){
        month = "0"+month;
    }
    if(date<10){
        date = "0"+date;
    }
    if(hours<10){
        hours = "0"+hours;
    }
    if(minutes<10){
        minutes = "0"+minutes;
    }
    if(seconds<10){
        seconds = "0"+seconds;
    }

    var newDate = year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds+"&nbsp &nbsp"+week;
    document.getElementById("date2").innerHTML = "" + newDate;//在div中写入时间
    setTimeout('getTime()', 500);//每隔500ms执行一次getTime()
}</script>
<script>
function randomFrom(lowerValue,upperValue)
{
    return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
}
y=randomFrom(1,10);//开启网页就产生了随机数
function restart()
{
	y=randomFrom(1,10);//肯定要重新产生随机数
	alert("游戏重启成功")
	document.getElementById("demo").value='';//清空输入框
	
	
}
function showout()
{
	alert("这就放弃了?弱爆了!数字是:" +y + "呀")//传递变量,合并文本输出
}
function myFunction()//判断
{
	var x=document.getElementById("demo").value;	
	if(x==""||isNaN(x))
	{
		alert("请输入阿拉伯数字哦");
	}
	else
	{
		if(x<y)
		{
			alert("输入的数字小了");
		}
		else if(x>y)
		{
			alert("输入的数字大了");
		}
		else
		{
			alert("呀呀呀居然猜对了,再来,我就不信了,嘤嘤嘤")
			y=randomFrom(1,10);//猜对了再来呗
			document.getElementById("demo").value='';//清空输入框
		}
	}
}
</script>
<style>

body
{
background-image:url('./stulip_files/ironback.jpg');
background-repeat:no-repeat;
background-position:top;
background-attachment:scroll;

}
h1
{
	color:orange;
	text-align:center;
}
p
{
	font-family:"Times New Roman";
	font-size:20px;
	font-family:arial;/*字体*/
	text-align:center;
	color:#74b49b;
}
div {
    background-color: #ffffd2;
    width: 250px;
    border-left: 14px;
    padding: 10px;
    margin: 10px;	
	border-left-style:solid;
	border-color:#98bf21
}

button {
	background-color: #ffffff;
	border:0px solid #add2c9;
	width:60px;
	font-size:28px;
	color:#343434;
}
#rcorners1 {
    border-radius: 5px;
    background: #add2c9;
    padding: 0px; 
    width:80px;

	
}
#rcorners2 {
    border-radius: 5px;
    background: #c56868;
    padding: 0px; 
    width:80px;

	
}
</style>
<body onload="getTime()"><!--网页打开的时候调用时间 -->
<div id="date2"></div>  <!--时间显示 -->
<h1>欢迎来到猜数字游戏!</h1>
<p>输入1-10的数字</p>
<p><input id="demo" type="text">
<button id="rcorners1" type="button" onclick="myFunction()">确定</button></p><br><br>
<p><button id="rcorners1"  type="button" onclick="restart()">重启</button>  <button id="rcorners2"  type="button" onclick="showout()">放弃</button> </p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>aaaaaaaaa</p>	
</body>
</html>

运行结果。
在这里插入图片描述
在这里插入图片描述

猜数字4.0:
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>猜数字游戏</title> 
<script>
function getTime() {

    var dateObj = new Date();

    var year = dateObj.getFullYear();//年
    var month = dateObj.getMonth()+1;//月  (注意:月份+1)
    var date = dateObj.getDate();//日
    var day = dateObj.getDay();
    var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    var week = weeks[day];//根据day值,获取星期数组中的星期数。
    var hours = dateObj.getHours();//小时
    var minutes = dateObj.getMinutes();//分钟
    var seconds = dateObj.getSeconds();//秒

    if(month<10){
        month = "0"+month;
    }
    if(date<10){
        date = "0"+date;
    }
    if(hours<10){
        hours = "0"+hours;
    }
    if(minutes<10){
        minutes = "0"+minutes;
    }
    if(seconds<10){
        seconds = "0"+seconds;
    }

    var newDate = year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds+"&nbsp &nbsp"+week;
    document.getElementById("date2").innerHTML = "" + newDate;//在div中写入时间
    setTimeout('getTime()', 500);//每隔500ms执行一次getTime()
}</script>
<script>
function randomFrom(lowerValue,upperValue)
{
    return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
}
y=randomFrom(1,10);//开启网页就产生了随机数
function restart()
{
	y=randomFrom(1,10);//肯定要重新产生随机数
	alert("游戏重启成功")
	document.getElementById("demo").value='';//清空输入框
	
	
}
function showout()
{
	alert("这就放弃了?弱爆了!数字是:" +y + "呀")//传递变量,合并文本输出
}
function myFunction()//判断
{
	var x=document.getElementById("demo").value;	
	if(x==""||isNaN(x))
	{
		alert("请输入阿拉伯数字哦");
	}
	else
	{
		if(x<y)
		{
			alert("输入的数字小了");
		}
		else if(x>y)
		{
			alert("输入的数字大了");
		}
		else
		{
			alert("呀呀呀居然猜对了,再来,我就不信了,嘤嘤嘤")
			y=randomFrom(1,10);//猜对了再来呗
			document.getElementById("demo").value='';//清空输入框
		}
	}
}
</script>
<script type="text/jscript">

function airport(c){

    c.style.color="#ffffff";    

}

function airporthover(c){

    c.style.color="#666666";

    

}

</script>

<style>






body
{
background-image:url('./stulip_files/ironback.jpg');
background-repeat:no-repeat;
background-position:top;
background-attachment:scroll;

}
h1
{
	color:orange;
	text-align:center;
}
p
{
	font-family:"Times New Roman";
	font-size:20px;
	font-family:arial;/*字体*/
	text-align:center;
	color:#74b49b;
}
div {
    background-color: #ffffd2;
    width: 250px;
    border-left: 14px;
    padding: 10px;
    margin: 10px;	
	border-left-style:solid;
	border-color:#98bf21
	
}

button {
	background-color: #ffffff;
	border:0px solid #add2c9;
	width:60px;
	font-size:28px;
	color:#343434;
}
#rcorners1 {
    border-radius: 5px;
    background: #add2c9;
    padding: 0px; 
    width:80px;

	
}
#rcorners2 {
    border-radius: 5px;
    background: #c56868;
    padding: 0px; 
    width:80px;
	hover background:#ffffff;
	
}
#showspace  button:hover{ background:#c56868;}


</style>
<body onload="getTime()"><!--网页打开的时候调用时间 -->
<div id="date2"></div>  <!--时间显示 -->
<h1>欢迎来到猜数字游戏!</h1>
<p>输入1-10的数字</p>
<p><input id="demo" type="text">
<button id="rcorners1" type="button" onclick="myFunction()" onmouseover="airport(this)" onmouseout="airporthover(this)">确定</button></p><br><br>
<p><button id="rcorners1"  type="button" onclick="restart()" onmouseover="airport(this)" onmouseout="airporthover(this)">重启</button>  
<button id="rcorners2"  type="button" onclick="showout()" onmouseover="airport(this)" onmouseout="airporthover(this)">放弃</button></p>


         
</body>
</html>

在这里插入图片描述

加入js实现鼠标点击文本框自动选中内容的方法,记录得分。参考:https://www.jb51.net/article/71317.htm

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>猜数字游戏</title> 
<script>
function getTime() {

    var dateObj = new Date();

    var year = dateObj.getFullYear();//年
    var month = dateObj.getMonth()+1;//月  (注意:月份+1)
    var date = dateObj.getDate();//日
    var day = dateObj.getDay();
    var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    var week = weeks[day];//根据day值,获取星期数组中的星期数。
    var hours = dateObj.getHours();//小时
    var minutes = dateObj.getMinutes();//分钟
    var seconds = dateObj.getSeconds();//秒

    if(month<10){
        month = "0"+month;
    }
    if(date<10){
        date = "0"+date;
    }
    if(hours<10){
        hours = "0"+hours;
    }
    if(minutes<10){
        minutes = "0"+minutes;
    }
    if(seconds<10){
        seconds = "0"+seconds;
    }

    var newDate = year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds+"&nbsp &nbsp"+week;
    document.getElementById("date2").innerHTML = "" + newDate;//在div中写入时间
    setTimeout('getTime()', 500);//每隔500ms执行一次getTime()
}</script>
<script>
function randomFrom(lowerValue,upperValue)
{
    return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
}
y=randomFrom(1,10);//开启网页就产生了随机数
cout=1;
function restart()
{
	y=randomFrom(1,10);//肯定要重新产生随机数
	alert("游戏重启成功")
	document.getElementById("demo").value='';//清空输入框
	cout=0
	document.getElementById("couter").innerHTML="得分:"+cout;
	
}
function showout()
{
	alert("这就放弃了?弱爆了!数字是:" +y + "呀")//传递变量,合并文本输出
	cout=0
	document.getElementById("couter").innerHTML="得分:"+cout;
}
function myFunction()//判断
{
	var x=document.getElementById("demo").value;	
	if(x==""||isNaN(x))
	{
		alert("请输入阿拉伯数字哦");
	}
	else
	{
		if(x<y)
		{
			alert("输入的数字小了");
		}
		else if(x>y)
		{
			alert("输入的数字大了");
		}
		else
		{
			alert("呀呀呀居然猜对了,再来,我就不信了,嘤嘤嘤")
			y=randomFrom(1,10);//猜对了再来呗
			document.getElementById("demo").value='';//清空输入框
			cout=cout+1;
			document.getElementById("couter").innerHTML="得分:"+cout;
		}
	}
}
</script>
<script type="text/jscript">

function airport(c){

    c.style.color="#ffffff";    

}

function airporthover(c){

    c.style.color="#666666";

    

}

</script>

<script type="text/javascript">
function Myselect_txt(){
 if (document.form1.title.focus){
 document.form1.title.select();}
}
function Myselect_txtarea(){
 if (document.form1.content.focus){
 document.form1.content.select();}
}
</script>


<style>






body
{
background-image:url('./stulip_files/ironback.jpg');
background-repeat:no-repeat;
background-position:top;
background-attachment:scroll;

}
h1
{
	color:orange;
	text-align:center;
}
p
{
	font-family:"Times New Roman";
	font-size:20px;
	font-family:arial;/*字体*/
	text-align:center;
	color:#74b49b;
}
#div1 {
    background-color: #ffffd2;
    width: 250px;
    border-left: 14px;
    padding: 10px;
    margin: 10px;	
	border-left-style:solid;
	border-color:#98bf21
	
}

button {
	background-color: #ffffff;
	border:0px solid #add2c9;
	width:60px;
	font-size:28px;
	color:#343434;
}
#rcorners1 {
    border-radius: 5px;
    background: #add2c9;
    padding: 0px; 
    width:80px;

	
}
#rcorners2 {
    border-radius: 5px;
    background: #c56868;
    padding: 0px; 
    width:80px;
	hover background:#ffffff;
	
}
#showspace  button:hover{ background:#c56868;}


</style>
<body onload="getTime()"><!--网页打开的时候调用时间 -->
<ol>
<li id="div1"><div id="date2"></div></li> 
<li id="div1"><div id="couter">得分:0</div></li>

</ol>
<h1>欢迎来到猜数字游戏!</h1>
<p>输入1-10的数字</p>
 <form name="form1">
<p><input name="title" id="demo" type="text" onClick="Myselect_txt()">
<button id="rcorners1" type="button" onclick="myFunction()" onmouseover="airport(this)" onmouseout="airporthover(this)">确定</button></p><br><br>
<p><button id="rcorners1"  type="button" onclick="restart()" onmouseover="airport(this)" onmouseout="airporthover(this)">重启</button>  
<button id="rcorners2"  type="button" onclick="showout()" onmouseover="airport(this)" onmouseout="airporthover(this)">放弃</button></p>
</form>

         
</body>
</html>

在这里插入图片描述

最后版本5.0,不改了。
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>猜数字游戏</title> 
<script>
function getTime() {

    var dateObj = new Date();

    var year = dateObj.getFullYear();//年
    var month = dateObj.getMonth()+1;//月  (注意:月份+1)
    var date = dateObj.getDate();//日
    var day = dateObj.getDay();
    var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    var week = weeks[day];//根据day值,获取星期数组中的星期数。
    var hours = dateObj.getHours();//小时
    var minutes = dateObj.getMinutes();//分钟
    var seconds = dateObj.getSeconds();//秒

    if(month<10){
        month = "0"+month;
    }
    if(date<10){
        date = "0"+date;
    }
    if(hours<10){
        hours = "0"+hours;
    }
    if(minutes<10){
        minutes = "0"+minutes;
    }
    if(seconds<10){
        seconds = "0"+seconds;
    }

    var newDate = year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds+"&nbsp &nbsp"+week;
    document.getElementById("date2").innerHTML = "" + newDate;//在div中写入时间
    setTimeout('getTime()', 500);//每隔500ms执行一次getTime()
}</script>
<script>
function randomFrom(lowerValue,upperValue)
{
    return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
}
y=randomFrom(1,10);//开启网页就产生了随机数
cout=1;
times=0
function restart()
{
	y=randomFrom(1,10);//肯定要重新产生随机数
	alert("游戏重启成功")
	document.getElementById("demo").value='';//清空输入框
	cout=0
	times=0
	document.getElementById("couter").innerHTML="得分:"+cout;
	
}
function showout()
{
	alert("这就放弃了?弱爆了!数字是:" +y + "呀")//传递变量,合并文本输出
	cout=0;
	times=0;
	times=0
	document.getElementById("couter").innerHTML="得分:"+cout;
}
function myFunction()//判断
{
	var x=document.getElementById("demo").value;	
	if(x==""||isNaN(x))
	{
		//alert("请输入阿拉伯数字哦");
		document.getElementById("torf").innerHTML="请输入阿拉伯数字哦";
	}
	else
	{
		if(x<y)
		{
			//alert("输入的数字小了");
			times=times+1
			document.getElementById("torf").innerHTML="输入的数字小了,您输入了"+times+"次";
			
		}
		else if(x>y)
		{
			//alert("输入的数字大了");
			times=times+1
			document.getElementById("torf").innerHTML="输入的数字大了,您输入了"+times+"次";
		}
		else
		{
			//alert("呀呀呀居然猜对了,再来,我就不信了,嘤嘤嘤")
			y=randomFrom(1,10);//猜对了再来呗
			document.getElementById("demo").value='';//清空输入框
			cout=cout+1;
			times=0
			document.getElementById("couter").innerHTML="得分:"+cout;
			document.getElementById("torf").innerHTML="呀呀呀居然猜对了,再来,我就不信了,嘤嘤嘤";
		}
	}
}
</script>
<script type="text/jscript">

function airport(c){

    c.style.color="#ffffff";    

}

function airporthover(c){

    c.style.color="#666666";

    

}

</script>

<script type="text/javascript">
function Myselect_txt(){
 if (document.form1.title.focus){
 document.form1.title.select();}
}
function Myselect_txtarea(){
 if (document.form1.content.focus){
 document.form1.content.select();}
}
</script>


<style>






body
{
background-image:url('./stulip_files/ironback.jpg');
background-repeat:no-repeat;
background-position:top;
background-attachment:scroll;

}
h1
{
	color:orange;
	text-align:center;
}
p
{
	font-family:"Times New Roman";
	font-size:20px;
	font-family:arial;/*字体*/
	text-align:center;
	color:#74b49b;
}
#div1 {
    background-color: #ffffd2;
    width: 250px;
    border-left: 14px;
    padding: 10px;
    margin: 10px;	
	border-left-style:solid;
	border-color:#98bf21
	
}
#div2
{	

	background-color: #ffffd2;
}
button {
	background-color: #ffffff;
	border:0px solid #add2c9;
	width:60px;
	font-size:28px;
	color:#343434;
}
#rcorners1 {
    border-radius: 5px;
    background: #add2c9;
    padding: 0px; 
    width:80px;

	
}
#rcorners2 {
    border-radius: 5px;
    background: #c56868;
    padding: 0px; 
    width:80px;
	hover background:#ffffff;
	
}
#showspace  button:hover{ background:#c56868;}


</style>
<body onload="getTime()"><!--网页打开的时候调用时间 -->
<ol>
<li id="div1"><div id="date2"></div></li> 
<li id="div1"><div id="couter">得分:0</div></li>
</ol>

<h1>欢迎来到猜数字游戏!</h1>
<p>输入1-10的数字</p>
 <form name="form1">
<p><input name="title" id="demo" type="text" onClick="Myselect_txt()">
<button id="rcorners1" type="button" onclick="myFunction()" onmouseover="airport(this)" onmouseout="airporthover(this)">确定</button></p>
<ol><div id="div2"><p id="torf">加油</p></div></ol>
<p><button id="rcorners1"  type="button" onclick="restart()" onmouseover="airport(this)" onmouseout="airporthover(this)">重启</button>  
<button id="rcorners2"  type="button" onclick="showout()" onmouseover="airport(this)" onmouseout="airporthover(this)">放弃</button></p>
</form>

         
</body>
</html>

在这里插入图片描述

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值