前端网页设计（笔记内容十）

前端网页设计

本项目展示内容。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 外链式便于管理文件的内容 -->        <link rel="stylesheet"  href="css/注册.css" type="text/css" /><!-- 外链式便于管理文件的内容 -->  <script src="js/gVerify.js"></script><title>注册页面<</title>
</head>
<body><!-- <marquee> 很好用的  --><h1><marquee><h2>自己定义一个标准注册页面 以后使用只需ctrl+A ctrl+X ctrl+V  ctrl+C ctrl+Z ctrl+/走上快键之路</h2></marquee></h1><h1> 房屋设计页面</h1><article style="align-content: center; text-align: center;" class="a-b-c"><!-- 编写完成后跳转到登录页面 --><form  action="登录.html" method="get"><!-- <input>一些属性 -->房屋户主用户名A：<input type="text" autofocus="autofocus" placeholder="请输入用户名" name="usename" multiple="multiple"><br>房屋户主用户名B：<input type="text" autofocus="autofocus" value="请输入用户名" name="usename" multiple="multiple"><br></label>房屋户主手机号：<input type="text" placeholder="请输入用户手机号" autocomplete="off" autofocus="autofocus" name="teleponenum"/><br>房屋户主QQ号：<input type="text" placeholder="请输入用户QQ号" multiple="multiple" autofocus="autofocus"/><br>房屋户主微信号：<input type="text" placeholder="请输入用户微信号" autofocus="autofocus"/><br>房屋户主身份证：<input type="text" placeholder="请输入用户身份证号"/><br><!--text的属性  --><!-- password 的属性 -->房屋户主设置密码：<input type="password" placeholder="请输入密码"/><br>再次输入密码:<input type="password" placeholder="请再次输入密码"/><br><!-- password 的属性 --><!-- 性别的选择标签 radio  -->房屋户主性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br><!-- 多选的标签  type="checkbox  -->房屋户主爱好：<input type="checkbox" checked="checked">HTML CSS JAVASCRIPT JQUERY <input type="checkbox">阅读书籍<input type="checkbox">看电视<br><!-- 行内式 --><div id="v_container" style="width: 200px;height: 50px; background: cyan;text-align: center; margin: auto; "></div><input type="text" id="code_input" value="" placeholder="请输入图形验证码" height="100"/><!-- button标签--><button id="my_button">验证</button><!-- 提交按钮 submit  --><input type="submit" value="提交按钮"/><input type="reset" autocomplete="off"/><br></form><br><select style="width: 800px; background: lightskyblue;"><option>本页面的学习要点</option><section><option>1 如何使用表格</option><option>2 如何自定义字体</option><option>3 如何灵活运用CSS</option><option>4 灵活运用Html5 Css3 JavaScript</option><option>5 了解表单的一些属性</option></section></select></article><!--注册时间--><center><script type="text/javascript" class="rty">function test(year,month,day){var end =new Date(year,month-1,day);var leftTime=end.getTime()-Date.now();var day  =Math.floor(leftTime/1000/60/60/24);var h =Math.floor(leftTime/1000/60/60%24);var  m =Math.floor(leftTime/1000/60%60);var s =Math.floor(leftTime/1000/60);var str="距离2022年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒";res.innerHTML=str}/* 调用函数 */setInterval("test(2022,12,31)",1000);</script></center><!-- footer表签 --><footer style="margin: auto;">留言表单：<textarea name="hellow" rows="10" cols="240" placeholder="欢迎各位的留言"></textarea><script type="text/javascript">/* javascript 的入口函数 你还知道吗 */window.onload = function(){var speed = 20;var td1 = document.getElementById("td1");var td2 = document.getElementById("td2");td2.innerHTML = td1.innerHTML;var div1 = document.getElementById("div1");function goLeft(){if (td1.offsetWidth - div1.scrollLeft < 0) {div1.scrollLeft = div1.scrollLeft - td1.offsetWidth;}else {div1.scrollLeft++;}}setInterval(goLeft,speed);}</script><div id="div1" style="overflow:hidden;width:800px;height:50px;"><table style="width: 800px;height: 45px;background-color: silver;"><tr><td id="td1"><table style="width: 1000px;height: 45px;background-color: lightcyan;"><tr><td align="center"><font size="5px" color=red>欢迎来到我的个人注册页面,这里我们用到了一些表单的属性与内容</font></td></tr></table></td><td id="td2"></td></tr></table></div></footer><!--JavaScript语言-->
<!-- 比较密码的对与错 -->
<script>var verifyCode = new GVerify("v_container");document.getElementById("my_button").onclick = function () {var res = verifyCode.validate(document.getElementById("code_input").value);if (res) {alert("验证正确");} else {alert("验证码错误");}}
</script>
</body>
</html>


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>欢迎来到2021-2022学期总结的登录页面</title><style>*{padding: 0px;margin: 0px;/*background-image: linear-gradient(to left, #FFFFFF ,#FF99CC,#00BFFF);*/background-color: aliceblue;font-size: 18px;font-weight: bold;font-family: 方正姚体;}input{width: 200px;height: 30px;cursor: pointer;border-radius: 2%;}form{background-image: linear-gradient(to right, #FF6600, #ECECEC ,#00BFFF);border-radius: 10%;border: 30px solid #CCFFFF;}</style></head><body><h1><marquee>欢迎你进入我的登录页面这里你会学习到一些登录的内容</marquee></h1><h1 style="color:white;background: lightcoral; text-align: center;font-size: 30px; font-weight: bold;">欢迎来到2021-2022学期总结的登录页面</h1><article style="text-align: center;"><div style="text-shadow: #FF0000 1px 1px 2px ; text-align: center;"><form action="创建房屋页面.html" method="get">用户名:<input type="text" name="name"  placeholder="请输入用户名"  maxlength="20"/><br>用账号:<input type="text" name="name"  placeholder="请输入用户账号的内容"  maxlength="20"/><br>密码：<input type="password" name="password" placeholder="请输入用户密码 " maxlength="8"/><br>登录：<input type="submit" value="点击登录按钮" />&nbsp;<input type="reset"  autocomplete="off" /><br></form></div><select style="width: 800px; background: lightskyblue; font-size: 30px"><option>本页面的学习要点</option><section><option>1 基本标签</option><option>2 导航栏</option><option>3 css的外链式</option><option>4 留言</option><option>5 input的其他内容</option></section></select></article><center><h1 id="res" style="background-color: black;
color: red;
font-size: 40px;
text-shadow: 2px 1px 2px ;
font-weight: bold;
font-family: 方正姚体;
font-size: 40px;
text-align: center;
"></h1><script type="text/javascript" class="rty">function test(year,month,day){var end =new Date(year,month-1,day);var leftTime=end.getTime()-Date.now();var day  =Math.floor(leftTime/1000/60/60/24);var h =Math.floor(leftTime/1000/60/60%24);var  m =Math.floor(leftTime/1000/60%60);var s =Math.floor(leftTime/1000/60);var str="距离2022年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒";res.innerHTML=str}setInterval("test(2022,12,31)",1000);</script></center><footer style="margin: auto;"><a href="input.html">点击这里进入input内容的学习</a><br><strong>留言表单：</strong><br><textarea name="hellow" rows="10" cols="240" placeholder="欢迎各位的留言"></textarea><script type="text/javascript">window.onload = function(){var speed = 20;var td1 = document.getElementById("td1");var td2 = document.getElementById("td2");td2.innerHTML = td1.innerHTML;var div1 = document.getElementById("div1");function goLeft(){if (td1.offsetWidth - div1.scrollLeft < 0) {div1.scrollLeft = div1.scrollLeft - td1.offsetWidth;}else {div1.scrollLeft++;}}setInterval(goLeft,speed);}</script><div id="div1" style="overflow:hidden;width:800px;height:50px;"><table style="width: 800px;height: 45px;background-color: silver;"><tr><td id="td1"><table style="width: 1000px;height: 45px;background-color: lightcyan;"><tr><td align="center"><font size="5px" color=red>欢迎来到我的个人登录页面,这里我们用到了一些表单的属性与内容</font></td></tr></table></td><td id="td2"></td></tr></table></div></footer>    </body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head><body><link rel="stylesheet" href="css/创建房屋页面.css" type="text/css" /><header >创建房屋页面</header><!-- contenteditable --><article style="text-align:center;" contenteditable="true"><form  method="get" action="房屋设计页面.html">房屋户主的名称：<!-- spellcheck红色破浪线 --><input type="text" spellcheck="true" placeholder="请输入你的房屋户主名称" required="required"/><span>*</span><br /> <br />房屋的户主的身份证号：<!-- spellcheck红色破浪线 --> <input type="text" spellcheck="true" placeholder="请输入你的房屋户主的身份证号" required="required"/><span>*</span><br /> <br />房屋的名称：<!-- spellcheck红色破浪线 --><input type="text" spellcheck="true" placeholder="请输入你的房屋名称" required="required"/><span>*</span><br /> <br />房屋的面积：<input type="text" spellcheck="true" placeholder="请输入你的房屋站地面积" required="required"/><span>*</span><br /> <br /><select><option value="单房房间">单人房间</option><option value="二人房间">二人房间</option><option value="情侣房间">情侣房间</option><option value="六人房间">六人房间</option><option value="多人房间">多人房间</option></select><span>*</span><br /> <br />房间的数量:<input type="number"  min="2" max="7"/><br /> <br />房间建成时间：<input type="date" /><br /> <br />上转的图片:<input type="file"  accept="image/gif/" multiple="multiple"/><br /> <br /><textarea placeholder="输入房屋信息"></textarea><br /> <br /><input type="submit" value="正在创建房屋"  "/></form></article></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下拉菜单主页面</title><script src="jquery-3.6.js"></script><script>$(function () {/*  $('.nav>li').onmouseenter(function () {$(this).children().show();});*//*   $('.nav>li').mouseleave(function () {$(this).children('ul').hide()});*/$('.nav>li').mouseleave(function () {$(this).children('ul').show();/*  $(this).children('a').css('background-color','red');*/});$('.nav>li').mouseleave(function () {$(this).children('ul').hide();$(this).children('ul.li').css("background-color",'yellow');});});</script><!--鼠标移入已出-->!-- 将文件分类便于管理  --><link rel="stylesheet" type="text/css"  href="css/房屋分类.css" /></head>
</head>
<body><h1><marquee style="font-size: 40px;">欢迎你进入我的下拉菜单页面这里你会看到项目大纲到表单的内容</marquee></h1>
<ul class="nav"><li><a href="Html的内容.html">HTML5的案例</a><ul><li><a href="Html.html">Html基本内容的回顾一</a></li><li><a href="WEB前端作业一.html">WEB前端作业一</a></li><li><a href="WEB前端作业二.html">WEB前端作业二</a></li><li><a href="new.html">案例一新闻网站</a></li><li><a href="goshoping.html" >案例二购物网站</a></li><li><a href="choujiang.html">抽奖游戏</a></li><li><a href="weib.html">案例四微博网站</a></li><li><a href="课程管理系统.html">案例五课程信息管理系统</a></li><li><a href="天气网站.html">案例六天气网站</a></li><li><a href="房屋设计.html">案例七房屋设计网站</a></li><li><a href="myname.html">个人简历表</a></li><li><a href="学院门户网站.html">案例10学院门户网站</a></li><li><a href=" register.html">注册页面</a></li><li><a href="com.html5-2.html">5-2</a></li><li><a href="com.html5-3.html">5-3</a></li><li><a href=" com.html5-5.html">5-5</a></li></ul></li><li><a href="Css的内容.html">CSS的学习</a><ul><li><a href="../WWeb项目/CSS学习文件/CSS学习内容一.html">CSS学习内容第一模块</a></li><li><a href="../WWeb项目/CSS学习文件/CSS学习内容二.html">CSS学习内容第二模块</a></li><li><a href="../WWeb项目/CSS学习文件/圆角边框.html">圆角边框</a></li><li><a href="../WWeb项目/CSS学习文件/圆角属性一.html">圆角属性</a></li><li><a href="../WWeb项目/CSS学习文件/渐变.html">CSS3的渐变</a></li><li><a href="../WWeb项目/CSS学习文件/动画的旋转.html">动画的旋转</a></li><li><a href="../WWeb项目/CSS学习文件/动画打字机.html">Css3的动画打字机</a></li><li><a href="../WWeb项目/CSS学习文件/动画来回循环.html">CSS3动画来回循环</a></li><li><a href="../CSS3/Css/动画的散开.html">Css3的动画的散开</a></li><li><a href="../WWeb项目/CSS学习文件/属性选择器.html">属性选择器</a></li><li><a href="../WWeb项目/CSS学习文件/弹性布局1.html">弹性布局</a></li><a  href="注册.html">注册</a></li></ul></li><li><ul></ul></li><li><a href="Jquery的内容.html">Jquery-选择器</a><ul><li><a href="../WWeb项目/Jquery选择器学习文件/选择器主窗口.html">选择器主窗口</a></li><li><a href="../WWeb项目/Jquery事件文件的学习/Jquery事件主窗口.html">Jquery事件主窗口</a></li><li><a href="../WWeb项目/Jquery效果文件学习/Jquery效果主窗口.html">Jquery效果主窗口</a></li><li><a href="../WWeb项目/jqueryAPL.html">jqueryAPL.html</a></li></ul></li><li><a href="JAVAScript的内容.html">JavaScript</a><ul><li><a href="../WWeb项目/JavaScript案例/2021年倒计时.html">2021年倒计时</a></li><li><a href="../WWeb项目/JavaScript案例/BOM%20与%20ROM.html">BOM%20与%20ROM</a></li><li><a href="../WWeb项目/JavaScript案例/E--7.html">E--7</a></li><li><a href="../WWeb项目/JavaScript案例/function.html">function</a></li><li><a href="../WWeb项目/JavaScript案例/javascript3.html">javascript3</a></li><li><a href="../WWeb项目/JavaScript案例/javascript4.html">javascript4.</a></li><li><a href="../WWeb项目/JavaScript案例/javascript5.html">javascript5</a></li><li><a href="../WWeb项目/JavaScript案例/parseFloat与parseInt.html">parseFloat与parseInt</a></li><li><a href="../WWeb项目/JavaScript案例/String.html">String</a></li><li><a href="../WWeb项目/JavaScript案例/函数.html">函数</a></li><li><a href="../WWeb项目/JavaScript案例/函数二.html">函数二</a></li><li><a href="../WWeb项目/JavaScript案例/动态窗口橱窗.html">动态窗口橱窗</a></li><li><a href="../WWeb项目/JavaScript案例/动态表格.html">动态表格</a></li><li><a href="../WWeb项目/JavaScript案例/图片的效果.html">图片的效果</a></li><li><a href="../WWeb项目/JavaScript案例/圆的计算.html">圆的计算.</a></li><li><a href="../WWeb项目/JavaScript案例/字符串对象.html">字符串对象</a></li><li><a href="../WWeb项目/JavaScript案例/弹窗.html">弹窗</a></li><li><a href="../WWeb项目/JavaScript案例/循环语句.html">循环语句</a></li><li><a href="../WWeb项目/JavaScript案例/成绩管理.html">成绩管理</a></li><li><a href="../WWeb项目/JavaScript案例/数据的练习题.html">数据的练习题</a></li><li><a href="../WWeb项目/JavaScript案例/数组Array.html">数组Array</a></li><li><a href="../WWeb项目/JavaScript案例/数组Array2.html">数组Array2</a></li><li><a href="../WWeb项目/JavaScript案例/日期.html">日期.</a></li><li><a href="../WWeb项目/JavaScript案例/本地存储.html">本地存储</a></li><li><a href="../WWeb项目/JavaScript案例/注册.html">注册</a></li><li><a href="JavaScript案例/五.html">登录居中</a></li><li><a href="../WWeb项目/JavaScript案例/简易选项卡.html">简易选项卡</a></li><li><a href="../WWeb项目/JavaScript案例/表格的删除.html">表格的删除</a></li><li><a href="../WWeb项目/JavaScript案例/5-2.html">5-2</a></li><li><a href="../WWeb项目/JavaScript案例/5-16.html">5-16</a></li><li><a href="../WWeb项目/Jquery效果文件学习/Jquery效果主窗口.html">Jquery效果主窗口</a></li><li><a href="../WWeb项目/Jquery事件文件的学习/Jquery事件主窗口.html">Jquery事件主窗口</a></li></ul></li><li> <a href="register.html">注册页面</a></li></ul><article><center><h1 id="res" style="background-color: black;
color: white;
font-weight: bold;
font-family: 方正姚体;
font-size: 40px;
text-align: center;
"></h1><script type="text/javascript" class="rty">function test(year,month,day){var end =new Date(year,month-1,day);var leftTime=end.getTime()-Date.now();var day  =Math.floor(leftTime/1000/60/60/24);var h =Math.floor(leftTime/1000/60/60%24);var  m =Math.floor(leftTime/1000/60%60);var s =Math.floor(leftTime/1000/60);var str="距离2021年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒";res.innerHTML=str}setInterval("test(2021,12,31)",1000);</script></center><h1><marquee style="font-size: 40px;">欢迎你进入我的下拉菜单页面这里你会看到项目大纲到表单的内容@1本页面灵活运用html的ul  al a &nbsp;@2采用了css3的渐变。&nbsp;@3运用的要点有,CSS3,JAVASCRIPT,JQUERY,HTML5.四课的一部分内容。</marquee></h1>
</article><footer><div id="div1" style="overflow:hidden;width:800px;height:50px;"><table style="width: 800px;height: 45px;background-color: silver;"><tr><td id="td1"><table style="width: 1000px;height: 45px;background-color: lightcyan;"><tr><td align="center"><font size="5px" color=red>欢迎你进入我的下拉菜单页面这里你会看到项目大纲到表单的内容</font></td></tr></table></td><td id="td2"></td></tr></table></div><!--JAVASCRIPT--><script type="text/javascript">window.onload = function(){var speed = 20;var td1 = document.getElementById("td1");var td2 = document.getElementById("td2");td2.innerHTML = td1.innerHTML;var div1 = document.getElementById("div1");function goLeft(){if (td1.offsetWidth - div1.scrollLeft < 0) {div1.scrollLeft = div1.scrollLeft - td1.offsetWidth;}else {div1.scrollLeft++;}}setInterval(goLeft,speed);}</script>
</footer>
<h1><a href="下拉菜单.html">返回顶部</a></h1>
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><!-- 将文件分类便于管理  --><link rel="stylesheet" href="./css/房屋设计页面.css" type="text/css" />
</head><body><h1>房屋与设计网站</h1><header style="height:20%; text-align: center;"><form><input type="text" spellcheck="true" placeholder="请输入关键字"/><input type="submit" value="开始搜素"/></form><a  href="房屋设计页面.html">创建房屋页面</a></header><nav><a href="首页.html">首页</a><a href="房屋分类.html">房屋分类</a><a  href="注册.html">注册</a><a href="登录.html">登录</a></nav><div align="center"><section><figure style="align-content: center;"><img src="img/房屋设计/we1 (1).jpg"/><figcaption>装修设计采用主要应用于色彩的配备，大致分为背景色，主体色，，点数色</figcaption></figure></section></div><div align="center" class="two"><section ><figure><img src="img/房屋设计/we1 (2).jpg"/><figcaption>装修设计采用主要应用于色彩的配备，大致分为背景色，主体色，，点数色</figcaption></figure></section></div><div align="center"><section><figure><img src="img/房屋设计/we1 (3).jpg"/><figcaption>装修设计采用主要应用于色彩的配备，大致分为背景色，主体色，，点数色</figcaption></figure></section></div><div align="center"><section><audio src=""  hidden="hidden" autoplay="true" controls="controls"></audio></section></article><div align="center"><footer style="text-align: center;"><button style="height: 50px;">加载更多内容</button></footer></body>
</html>

CSS

*{background-color: skyblue;font-size: 20px;font-weight: 800;border-radius: 20px;color: red;background-image: linear-gradient(#CCFFFF, #ADD8E6 ,lavender);}header{text-align: center;}*{/*用渐变*/background-image: linear-gradient(#CCFFFF, #ADD8E6 ,lavender);/* display: none;*/font-size: 18px;background-color: whitesmoke;list-style: none;border-radius: 3%;text-shadow: #0099FF 2px 3px 2px ;}li{list-style: none;padding: 3px;/*  padding: 1px;margin: 1px;*/}a{/*text-decoration去除下划线*/text-decoration:none ;padding: 3px;background-image: linear-gradient(#e66465, #9198e5);height: 100px;width: 200px;}.nav{margin: 100px;padding: 3px;text-align: center;align-content: center;display: inline-block;}.nav>li{float: left;padding: 3px;}.nav a {/* padding: 20px;*/padding: 6px;display: block;height: 60px;width: 120px;line-height: 60px;text-align: center;}.nav ul li {border: 2px cornflowerblue solid;border-top: none;border-left: none;padding: 3px;}.nav>li a:hover{background: pink;padding: 3px;width: 200px;height: 100px;}.nav ul a:hover{background-image: linear-gradient(#e66465, red);}.nav ul{display: none;}.nav>li:hover ul {display: block;}*{margin-bottom: 0.625rem;font-size: 24px;font-weight: 600;background-color: #E6E6FA;text-shadow: 1px 1px 8px red;background-image: linear-gradient(#CCFFFF, #ADD8E6 ,lavender);}h1{color: cadetblue; text-align: center;background-color: mintcream;border-radius: 30px;
}
nav{width: 100%;height:50px;text-align: center;background: lightcoral;
}section{border-radius: 5%;border: dotted 4px red;text-shadow: 1px 1px 8px skyblue;background-color: paleturquoise;
}.two{border-radius: 5%;border: solid  navajowhite;text-shadow: 1px 1px 2px chartreuse;background-color: paleturquoise
}* {background-color: lavenderblush;padding: 0px;margin: 0px;/*background-image: linear-gradient(to right, #e66465 ,lavenderblush, lavender);*/font-size: 30px;font-weight: bold;font-family: 楷体;color: black;/*text-shadow: #FF0000 1px 1px 1px ;*/background-image: linear-gradient(#CCFFFF, #ADD8E6 ,lavender);}form{/*background-image: linear-gradient(to right, #FF6600, #ECECEC ,#00BFFF);*//*border: #FF6600 solid 20px;*/border-radius: 2%;}input {border-radius: 4%;width: 200px;height: 30px;cursor: pointer;border: 2px #428bca outset;}.a-b-c {cursor: pointer;}input{border-radius: 20px ;}h1{color:white;background: lightcoral;text-align: center;font-size: 30px;font-weight: bold; text-shadow: #00BFFF 2px 3px ;}#res{background-color: black;color: white;font-weight: bold;font-family: 方正姚体;font-size: 40px;text-align: center;}

JAVASCRIPT

!(function(window, document) {function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数this.options = { //默认options参数值id: "", //容器IdcanvasId: "verifyCanvas", //canvas的IDwidth: "100", //默认canvas宽度height: "30", //默认canvas高度type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母code: ""}if(Object.prototype.toString.call(options) == "[object Object]"){//判断传入参数类型for(var i in options) { //根据传入的参数，修改默认参数值this.options[i] = options[i];}}else{this.options.id = options;}this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");this.options.letterArr = getAllLetter();this._init();this.refresh();}GVerify.prototype = {/**版本号**/version: '1.0.0',/**初始化方法**/_init: function() {var con = document.getElementById(this.options.id);var canvas = document.createElement("canvas");this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";canvas.id = this.options.canvasId;canvas.width = this.options.width;canvas.height = this.options.height;canvas.style.cursor = "pointer";canvas.innerHTML = "您的浏览器版本不支持canvas";con.appendChild(canvas);var parent = this;canvas.onclick = function(){parent.refresh();}},/**生成验证码**/refresh: function() {this.options.code = "";var canvas = document.getElementById(this.options.canvasId);if(canvas.getContext) {var ctx = canvas.getContext('2d');}else{return;}ctx.textBaseline = "middle";ctx.fillStyle = randomColor(180, 240);ctx.fillRect(0, 0, this.options.width, this.options.height);if(this.options.type == "blend") { //判断验证码类型var txtArr = this.options.numArr.concat(this.options.letterArr);} else if(this.options.type == "number") {var txtArr = this.options.numArr;} else {var txtArr = this.options.letterArr;}for(var i = 1; i <= 4; i++) {var txt = txtArr[randomNum(0, txtArr.length)];this.options.code += txt;ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; //随机生成字体大小ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色       ctx.shadowOffsetX = randomNum(-3, 3);ctx.shadowOffsetY = randomNum(-3, 3);ctx.shadowBlur = randomNum(-3, 3);ctx.shadowColor = "rgba(0, 0, 0, 0.3)";var x = this.options.width / 5 * i;var y = this.options.height / 2;var deg = randomNum(-30, 30);/**设置旋转角度和坐标原点**/ctx.translate(x, y);ctx.rotate(deg * Math.PI / 180);ctx.fillText(txt, 0, 0);/**恢复旋转角度和坐标原点**/ctx.rotate(-deg * Math.PI / 180);ctx.translate(-x, -y);}/**绘制干扰线**/for(var i = 0; i < 4; i++) {ctx.strokeStyle = randomColor(40, 180);ctx.beginPath();ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));ctx.stroke();}/**绘制干扰点**/for(var i = 0; i < this.options.width/4; i++) {ctx.fillStyle = randomColor(0, 255);ctx.beginPath();ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);ctx.fill();}},/**验证验证码**/validate: function(code){var code = code.toLowerCase();var v_code = this.options.code.toLowerCase();console.log(v_code);if(code == v_code){return true;}else{this.refresh();return false;}}}/**生成字母数组**/function getAllLetter() {var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";return letterStr.split(",");}/**生成一个随机数**/function randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min);}/**生成一个随机色**/function randomColor(min, max) {var r = randomNum(min, max);var g = randomNum(min, max);var b = randomNum(min, max);return "rgb(" + r + "," + g + "," + b + ")";}window.GVerify = GVerify;
})(window, document);

算法

package Demo8;import java.awt.print.Printable;
import java.util.Arrays;
import java.util.Random;
import java.util.Scanner;public class Test4 {
//  生成2维数组的内容,随机生成而维数组int [] [] nums=null;private void init() {System.out.println("输入二维数组到层数");Scanner scanner =new Scanner(System.in);int n=scanner.nextInt();scanner.close();nums=new int [n][n];
//      两层for循环for (int i = 0; i < nums.length; i++) {//行的定义内容for (int j = 0; j < nums.length; j++) {int m=new Random().nextInt(10);nums[i][j]=(int) m*(Math.random()>0.3?1:-1);System.out.print(nums[i][j]+"\t");}System.out.println();}out();}private void out() {int[]temp=new int[nums.length];//定义变量 的int sum=0;//定义变量用于控制起始的行int row=0;//起始行变化 //4-0=4while(row<nums.length) {//控制行的次数for (int i = row; i < temp.length-row; i++) {System.out.println("控制行数"+row);System.out.println("=================================================");//控制第几行的单元格的内容for (int j = 0; j < temp.length; j++) {temp[j]+=nums[i][j];System.out.println("控制单元格"+j);System.out.println("=================================================");}//将临时的一位数组找到进行累加求和那回顾一维数组的累加和如何求到int max=Print(temp);if(max>sum) {sum=max;}}row++;//没一行都在++//将临时的数组清零Arrays.fill(temp, 0);    }System.out.println("求出二维数组最大累加和"+sum);}//       一维数组求累加和的方案private int Print(int[] temp) {// TODO Auto-generated method stubint result=temp[0];int sum=temp[0];//定义left right 下标int left=0;int right=0;for (int i = 0; i < nums.length; i++) {//判断值if(sum>=0) {//说明值为正数sum+=temp[i];}else {//-数不能要sum=temp[i];left=i;}//当sum加完之后是否比最终的值要大 说明那个数组有用if(sum>result) {result=sum;right=i;}}System.out.println("临时维数组的最大值"+"起点"+left+"终点"+right+"最后结果"+result);return sum;}public static void main(String[] args) {new Test4().init();}}

前端网页设计（笔记内容十）相关推荐

采用HTML,CSS,JAVASCRIPT的前端网页设计的内容展示
最近在收拾电脑文件,发现了一些大一的东西,回过头来看自己那个时候真的好菜,当然现在还是很菜.废话不多说,直接看图.虽然很丑,但是至少能看吧.后来因为做的页面丑特意去学了UI,也有一些作品集,等以后有机 ...
前端网页设计内容二《电商平台网站》
讲重点.展示页面效果.代码编译. 看页面效果: 今天的重点在最后一个页面. 看代码: <!DOCTYPE html> <html lang="zh">&l ...
大鱼海棠国漫主题HTML前端网页设计成品预览与讲解DIV CSS JS
国漫大鱼海棠主题,本套大作业共计10个页面,页面美观度较高,网页在细节设计上花了很大功夫,如边框.阴影,鼠标滑过效果等,运用的知识点有:Div+CSS.JS轮播图.Table.下拉菜单栏.视频.表单. ...
WEB前端网页设计简介
目录 web前端简介什么是HTML? HTML标签 HTML基本结构在head中设置网页标题和字符集编码 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HT ...
WEB前端网页设计-Bootstrap 网格系统
目录 Bootstrap 网格系统什么是网格(Grid)? 什么是 Bootstrap 网格系统(Grid System)? 移动设备优先策略 Bootstrap 网格系统(Grid System) ...
web前端网页设计作业_如何学习网页前端设计培训？
学习网页的前端设计分为几个步骤或者说几个网页设计教程大类. 一个是熟练掌握各种网页设计需要的操作软件,然后就是WEB界面设计与项目设计,最后还有WEB整站设计实训. 如何学习网页的前端设计呢? 许多零 ...
Html前端网页设计
HTML网页设计第一天:初识HTML (标题部分) 主体部分认识HBuilder软件快捷键 ctrl+/ 注释代码 ctrl+y 恢复撤销 ctrl+x 剪切 ctrl+z 撤销 ctrl+c ...
网上花店网页代码 html静态花店网页设计制作 dw静态鲜花网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
html网页设计详细设计内容,网页设计技术构成主页模板（index.html）
html语言超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用.HTML 不是一种编程语言,而是一种标记语言 (markup language),是 ...

前端网页设计（笔记内容十）

前端网页设计（笔记内容十）相关推荐

最新文章

热门文章