JavaScript基础概念与经典前端案例解析

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript">
    var alldata = "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"
    var alldataarr = alldata.split(",");
    var num = alldataarr.length - 1;
    var timer;   
    function start() {
      clearInterval(timer);h
      timer = setInterval('change()', 10);
    }
    function change() {
      document.getElementById("oknum").innerHTML = alldataarr[GetRnd(0, num)];
    }
    function GetRnd(min, max) {
      return parseInt(Math.random() * (max - min + 1));
    }   
    function ok() {
      clearInterval(timer);
      document.getElementById("showresult").value = document.getElementById("oknum").innerText;
    }   
</script> 
</head>
<body>
 
<div id="oknum" name="oknum" >请单击开始</div> 
  <button onclick="start()" accesskey="s">开始</button>  <!--//accesskey 属性规定激活（使元素获得焦点）元素的快捷键。-->
<button onclick="ok()" accesskey="o">停止</button> 
您的选择是： 
<input type="text" id="showresult" value=""/>
</body>
</html

<script type="text/javascript">
        window.onload = function () {
      
      setInterval(step, 1000);
    }
    var num = 1;
    function step() {
      if (num < 5) {
        num++;
      } else {
        num = 1;
      }
      var dom = document.getElementById("imgId");
      //更改它images的src属性
      dom.src = 'images/' + num + '.jpg';
    }
   
  </script>
</head>
<body>
  <img src="images/1.jpg" width="500" height="500" id="imgId"/>
</body>
</html>

<script src="js/jquery-1.8.3.min.js"></script>
  <script type="text/JavaScript">     
    ( function ($) {
      $.fn.extend({
        RollTitle: function (opt, callback) {
          if (!opt) var opt = {};
          var _this = this;
          _this.timer = null;
          _this.lineH = _this.find("li:first").height();
          _this.line = opt.line ? parseInt(opt.line, 15) : parseInt(_this.height() / _this.lineH, 10);
          _this.speed = opt.speed ? parseInt(opt.speed, 10) : 3000, 
          _this.timespan = opt.timespan ? parseInt(opt.timespan, 13) : 5000; 
          if (_this.line == 0) this.line = 1;
          _this.upHeight = 0 - _this.line * _this.lineH;
          _this.scrollUp = function () {
            _this.animate({
              marginTop: _this.upHeight
            }, _this.speed, function () {
              for (i = 1; i <= _this.line; i++) {
                _this.find("li:first").appendTo(_this);
              }
              _this.css({ marginTop: 0 });
            });
          }
          _this.hover(function () {
            clearInterval(_this.timer);
          }, function () {
            _this.timer = setInterval(function () { _this.scrollUp(); }, _this.timespan);
          }).mouseout();
        }
      })})(jQuery);
</script>
</head>
<body>
  <ul id="RunTopic" style="list-style:none ;background:#0ff ;border:2px dashed blue;width:100px;" >
<li style="color:red">i love you</li>
<li style="color:pink">I LOVE YOU</li>
<li style="color:blue">I LOVE you</li>
<li style="color:green">i LOVE YOU</li>
<li style="color:yellowgreen">I love YOU</li>
</ul>
<br/>
<input  type="button" onclick="test();" value="跑马灯" >
   <script type="text/javascript">
     function test()
     {
       $("#RunTopic").find("li:first").appendTo($("#RunTopic"));
     }    
</script> 
</body>
</html>