Página Inicial>Tutorial de web design>Tutorial HTML

Um exemplo usando o carregamento de imitação de tela HTML5

Autor：Eve Cole Data da Última Atualização：2025-03-28 11:48:02

Este exemplo é uma instância de carregamento de carregamento da Web de simulação HTML5 de tela. As renderizações são as seguintes:

O código de exemplo: (endereço de visualização: http://html5demos.com/canvas)

  1.  <! Doctypehtml>
  2.  <htmllang = enxmlns = http: //www.w3.org/1999/xhtml>
  3.  <head>
  4.  <metahttp-equiv = content-typeContent = text/html; charset = utf-8/>
  5.  <title> html5Demo: Canvas </ititle>
  6.  <estilo>
  7.  corpo{
  8.  Fonte: Normal16px/20pxhelvetica, sem serrif;
  9.  Antecedentes: RGB (237.237.236);
  10.  margem: 0;
  11.  Margin-top: 40px;
  12.  preenchimento: 0;
  13.  }
  15.  Artigo, seção, cabeçalho, rodapé {
  16.  exibição: bloco;
  17.  }
  19.  #wrapper {
  20.  Largura: 600px;
  21.  margem: 0auto;
  22.  Antecedentes: #fffurl (imagens/shade.jpg) repetir-xcenterbottom;
  23.  -Moz-Border-Radius: 10px;
  24.  -Webkit-Border-Radius: 10px;
  25.  TOP da borda: 1PXSolid#ffff;
  26.  Botting-Bottom: 76px;
  27.  }
  29.  H1 {
  30.  Top-top: 10px;
  31.  }
  33.  H2 {
  34.  tamanho de fonte: 100%;
  35.  estilo de fonte: itálico;
  36.  }
  38.  cabeçalho,
  39.  Artigo>*,
  40.  Fofera,
  41.  Footerp {
  42.  margem: 20px;
  43.  }
  45.  ROONO>*{
  46.  margem: 20px;
  47.  Cor:#999;
  48.  }
  50.  artigo{
  51.  Posição: relativa;
  52.  }
  53.  </style>
  54.  <Cript>
  55.  //Fordiscussionandcomments,see:http://remysharp.com/2009/01/07/html5-enabling-script/
  56.  (function () {if (!/*@cc_on!@*/0) return; vare = abbr, artigo, de lado, áudio, bb, tela, datagrid, dados de dados, detalhes, diálogo, eventos e figura, foo ter, cabeçalho, marca, menu, medidor, navegação, saída, progresso, seção, tempo, vídeo.split (','), i = e.length; while (i-) {document.createElement (e [i])}}) ()
  57.  </script>
  58.  </head>
  59.  <Body>
  60.  <Seção (Wrapper>
  61.  <header>
  62.  <H1> Canvas </h1>
  64.  </header>
  65.  <Artigo> </Artigo>
  66.  <Footer> <ahref =/> html5demo </a> </dower>
  67.  </seção>
  68.  <scriptsrc = h5utils.js> </sCript>
  69.  <Cript>
  71.  BuildSpinner ({x: 50, y: 50, tamanho: 20, graus: 30});
  73.  FunctionBuildSpinner (Data) {
  75.  varcanvas = document.createElement ('canvas');
  76.  canvas.Height = 100;
  77.  canvas.width = 300;
  78.  document.getElementsByTagName ('Artigo') [0] .AppendChild (Canvas);
  79.  Varctx = Canvas.getContext (2d),
  80.  i = 0, graus = data.degrees, loops = 0, grausList = [];
  82.  para (i = 0; i <graus; i ++) {
  83.  grauslist.push (i);
  84.  }
  86.  //reiniciar
  87.  i = 0;
  89.  // Soicankillitlater
  90.  window.CanVastIMer = setInterval (desenho, 1000/graus);
  92.  functionReset () {
  93.  ctx.clearrect (0,0,100.100); // clearCanvas
  95.  varleft = grausList.slice (0,1);
  96.  Varright = grausList.slice (1, grausList.Length);
  97.  grausList = Right.Concat (esquerda);
  98.  }
  100.  functionDraw () {
  101.  Varc, S, E;
  103.  vard = 0;
  105.  if (i == 0) {
  106.  reiniciar();
  107.  }
  109.  ctx.save ();
  111.  d = grausList [i];
  112.  c = math.floor (255/graus*i);
  113.  ctx.strokestyle = 'rgb ('+c+','+c+','+c+')';
  114.  ctx.linewidth = data.size;
  115.  ctx.BeginPath ();
  116.  s = math.floor (360/graus*(d));
  117.  e = math.floor (360/graus*(d+1))-1;
  119.  ctx.arc (data.x, data.y, data.size, (math.pi/180)*s, (math.pi/180)*e, false);
  120.  ctx.stroke ();
  122.  ctx.restore ();
  124.  i ++;
  125.  if (i> = graus) {
  126.  i = 0;
  127.  }
  128.  }
  129.  }
  132.  </script>
  133.  <Cript>
  134.  vargajShost = ((https: == document.Location.protocol)? https: // ssl .: http: // www.);
  135.  Document.Write (UNESCAPE (%3CScriptsrc = '+GajShost+Google-Analytics.com/ga.js'type =' text/javascript '%3e%3c/script%3e));
  136.  </script>
  137.  <Cript>
  138.  tentar{
  139.  VarPageTracker = _GAT._GetTracker (UA-1656750-18);
  140.  pageTracker._trackPageView ();
  141.  } catch (err) {} </sCript>
  142.  </body>
  144.  </html>
Artigos Relacionados