zoukankan      html  css  js  c++  java
  • html5 表单

        最近学了html5,才发现,这个建立在js之上的一个跨平台网页设计,确实不错!下面利用canvas画了一个画布,然后点击进去就可以看到一个浮动的表单了!

     

    <!DOCTYPE html>

      <html xmlns="http://www.w3.org/1999/html">
     

    <head>

    这是html5中的设计字节编码格式

      <meta charset="utf-8">
      <title></title>
      <style type="text/css">
      a {
      color: #000;
      font-size: 12px;
      text-decoration: none;
      }
       
      a:hover {
      color: #f00;
      text-decoration: underline;
      }
       
      body {
      overflow: hidden;
      }
       
      #massage_box {
      position: absolute;
      350px;
      height: 400px;
      z-index: 2;
      display: none;
      /*visibility: hidden; visible*/
      /* display: none; hidden*/
      }
       
      #mask {
      position: absolute;
      top: 0;
      left: 0;
      background: #000;
      z-index: 1;
      display: none;
      /*visibility: hidden;*/
      }
       
      .massage {
      border: #00f solid;
      border- 1 1 3 1;
      95%;
      height: 95%;
      background: #fff;
      color: #000;
      font-size: 12px;
       
      line-height: 150%;
      }
       
      .header {
      background: #00f;
     

    height: 9%;

    设置字体,这样在多个浏览器中就可以进行五限制的选择

      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      padding: 3 5 0 5;
      color: #fff;
       
      }
      /*#myHref{*/
       
      /*text-align: center;*/
      /*padding-left: 500px;*/
       
      /*padding-bottom: 300px;*/
      /*}*/
      #btnDiv{
      margin-left: 70px;
       
      }
      /*#dotDiv{*/
      /*text-align: center;*/
      /**/
      /*overflow: hidden;*/
      /*background: #00f;*/
      /*}*/
      #myCan{
      1370px;
      height: 800px;
     

    background: #00f;

    设置超出部分隐藏

      overflow: hidden;
      }
      #mySecDiv{
       
      margin-left: 40px;
      }
       
      </style>
      <script type="text/javascript">
       
       
       
       
       
       
       
       
      function exit(){
       
      alert(email);
      email="";
      psw="";
      }
       
      function allSel(){
      var allsel=document.getElementById("allSelect");
      var array=document.getElementsByName("inputhobby");
      if(allsel.checked){
       
      for(var i=0;i<array.length;i++){
      if(array[i].type=="checkbox"){
       
      array[i].checked=allsel.checked;
       
      //alert("this is checked!");
       
       
      }
       
       
      }
      }
      else
      {
      for(var i=0;i<array.length;i++){
      if(array[i].type=="checkbox"){
       
      array[i].checked=allsel.checked;
       
      //alert("this is checked!");
       
       
      }
       
       
      }
       
      }
       
       
       
      }
      var gentle=document.getElementById("gentle");
      function F(){
       
      for(var i=0;i<gentle.length;i++){
      if(gentle[i].type=="radio"){
       
      alert("i'm dot the female");
      gentle[i].checked=!gentle[i].checked;
      }
       
      }
       
       
       
      function chkSubmit(){
       
      if(document.getElementById("inputOne").value==""){
      alert(email);
      return false;
       
      }
      if(document.getElementById("inputTwo").value==""){
       
      alert(psw);
      return false;
      }
      return true;
      }
       
       
      }
      </script>
      <script type="text/javascript">
       
      function myload() {
      document.getElementById("massage_box").style.left = (document.body.clientWidth - 350) / 2 + "px";
      document.getElementById("massage_box").style.top = (document.documentElement.clientHeight - 200) / 2 + "px";
      document.getElementById("mask").style.width = document.body.scrollWidth + "px";
      document.getElementById("mask").style.height = document.documentElement.clientHeight + "px";
       
       
      document.getElementById("mydown").onmousedown = MDown;
       
      var canvas=document.getElementById("myCan");
      var context=canvas.getContext("2d");
      // var fillColor=context.createLinearGradient(
      // 0,0,15,50
      // );
      // fillColor.addColorStop(0.15,"red");
      // fillColor.addColorStop(0.35,"black");
      // fillColor.addColorStop(0.65,"green");
      // fillColor.addColorStop(0.87,"yellow");
      // context.fillStyle=fillColor;
      // context.fillRect(0,0,10,10);
      var fillcolortext=context.createLinearGradient(10,10,30,20);
      fillcolortext.addColorStop(0.2,"red");
      fillcolortext.addColorStop(0.4,"black");
      fillcolortext.addColorStop(0.6,"green");
      fillcolortext.addColorStop(0.8,"black");
      context.fillStyle=fillcolortext;
      context.font="20px verdana";
      context.textBaseline="top";
      context.fillText("Wlcome to APKBUS!",40,20);
      // var fillcolordiagonal=context.createLinearGradient(50,200,100,450);
      // fillcolordiagonal.addColorStop(0.2,"red");
      // fillcolordiagonal.addColorStop(0.4,"black");
      // fillcolordiagonal.addColorStop(0.6,"green");
      // fillcolordiagonal.addColorStop(0.8,"yellow");
      // context.fillStyle=fillcolordiagonal;
      // context.fillRect(50,25,100,2500);
      var fillcolorradial=context.createRadialGradient(150,60,0,150,60,100);
      fillcolorradial.addColorStop(0,"blue");
      fillcolorradial.addColorStop(0.2,"black");
       
      fillcolorradial.addColorStop(0.4,"blue");
       
       
      fillcolorradial.addColorStop(0.5,"black");
       
      fillcolorradial.addColorStop(0.7,"blue");
      context.fillStyle=fillcolorradial;
      context.rect(60,60,200,200);
      context.fill();
       
      }
       
      var Obj = "";
      document.onmouseup = MUp;
      document.onmousemove = MMove;
       
      function MDown(e) {
      Obj = "massage_box";
      var oldleft = document.getElementById(Obj).style.left;
      var oldtop = document.getElementById(Obj).style.top;
      if (window.navigator.userAgent.indexOf("Firefox") > 0 || window.navigator.userAgent.indexOf("Chrome") > 0)
      {
      pX = e.pageX - parseInt(oldleft.substring(0,oldleft.indexOf("px")));
      pY = e.pageY - parseInt(oldtop.substring(0,oldtop.indexOf("px")));
      }
      else
      {
      pX = window.event.x - parseInt(oldleft.substring(0,oldleft.indexOf("px")));
      pY = window.event.y - parseInt(oldtop.substring(0,oldtop.indexOf("px")));
      }
      }
       
      function MMove(e) {
      if (Obj != "") {
      if (window.navigator.userAgent.indexOf("Firefox") > 0 || window.navigator.userAgent.indexOf("Chrome") > 0)
      {
      document.getElementById(Obj).style.left = (e.pageX - pX)+"px";
      document.getElementById(Obj).style.top = (e.pageY - pY) + "px";
      }
      else
      {
      document.getElementById(Obj).style.left = window.event.x - pX;
      document.getElementById(Obj).style.top = window.event.y - pY;
      }
      }
      }
       
      function MUp() {
      if (Obj != "") {
      Obj = "";
      }
      }
      </script>
      </head>
      <body onload="myload();">
      <form name="myForm" onsubmit="return chkSubmit()" action="Canvas.html">
      <div id="massage_box">
      <div class="massage">
      <!--<header>-->
       
      <div class="header" id="mydown">
      <div style="display: inline; 150px; position: absolute">
      <h3>Dot me to move!</h3>
      </div>
      <span onclick="massage_box.style.display='none'; mask.style.display='none'"
      style="float: right; display: block; cursor: hand"><h3>**</h3></span></div>
      <header> <h3>Please input this message:</h3></header>
      <ul id="myULOne">
      <!--<p class="help-block">please input the email</p>-->
      <li>Email: <input type="email" style=" 200px" id="inputOne" placeholder="please input the email..."/></li>
      <li>Passd: <input type="password" style=" 200px" id="inputTwo" placeholder="please input the password..."/></li>
      </ul>
      <section id="mySec">
      <div id="mySecDiv">
      <h3>Gentle:</h3>
       
      <input type="radio" id="female" onclick="F()" name="gentle"/>Female
      <input type="radio" id="male" onclick="F()" name="gentle"/>male
      </div>
       
      </section>
      <ul id="myULThree"><h3>Hobby:</h3><input type="checkbox" id="allSelect" onclick="allSel()"/>SelectAll
      <li><input type="checkbox" name="inputhobby" checked="true"/>basketBall</li>
      <li><input type="checkbox" name="inputhobby"/>footBall</li>
      <li><input type="checkbox" name="inputhobby"/>other</li>
       
       
       
      </ul>
      <div id="btnDiv" >
      <input type="submit" value="Sure" id="btnOne" style=" 60px" onclick="sure()" />
      <input type="reset" value="Exit" id="btnTwo" style="margin-left: 65px; 70px" onclick="exit()"/>
      </div>
      </div>
      </div>
       
       
      <div id="mask">
      </div>
       
      <canvas onclick="mask.style.display='block';massage_box.style.display='block'" id="myCan"></canvas>
      <!--<div id="dotDiv" onload="myDiv()">-->
      <!--&lt;!&ndash;<a href="#" style="font-size: 80px;font-style: oblique&ndash;&gt;-->
      <!--&lt;!&ndash;">点我有惊喜哦!</a>&ndash;&gt;-->
      <!--</div>-->
      </form>
      </body>
       
      </html>
     

    一切只是为了充实自己!!stay hungry and stay foolish!!
  • 相关阅读:
    Asp.net2.0 中自定义过滤器对Response内容进行处理 dodo
    自动化测试工具 dodo
    TestDriven.NET 2.0——单元测试的好助手(转) dodo
    JS弹出窗口的运用与技巧 dodo
    ElasticSearch 简介 规格严格
    修改PostgreSQL字段长度导致cached plan must not change result type错误 规格严格
    Linux系统更改时区(转) 规格严格
    mvn编译“Cannot find matching toolchain definitions for the following toolchain types“报错解决方法 规格严格
    ElasticSearch 集群 & 数据备份 & 优化 规格严格
    Elasticsearch黑鸟教程22:索引模板的详细介绍 规格严格
  • 原文地址:https://www.cnblogs.com/Catherine-Brain/p/3434690.html
Copyright © 2011-2022 走看看