进阶新手代码，HTML代码在线实时编辑、实时预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

            
            <!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>江枫的直播教程(Xr江枫)</title>
    <style type="text/css">
      #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
      function allowDrop(ev)
{
  ev.preventDefault();
}
      
      function drag(ev)
{
  ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
  <body>
    
    <div style="width: 370px; height: 30px; overflow: hidden;">
  <marquee direction="left" scrollamount="3" style="height: 100%;">
    吧图片拖放到方框里吧
  </marquee>
   </div>
    
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <img id="drag1" src="./assets/R-C.gif" draggable="true" ondragstart="drag(event)" width="320" height="70">

</body>
</html>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

            
            body {
  background-color: #fefefe;
}

.title {
  margin-top: 95px;
  text-align: center;
}

.desc {
  color: #777;
  text-align: center;
}

.icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 30px auto;
}

            
                1

            
            console.log(["Hello 笔.COOL 控制台"])

            
                1

            
            {"md5":"c5d4fcf6b4a709a0ab031d36c69db4d5.gif","size":229543,"width":1600,"height":799}