如何导出JSFiddle中的CSS代码片段？附相关JavaScript代码

我是JavaScript和JSFiddle的新手，和一位热心人士一起通过JSFiddle编写了以下代码，项目的完整代码如下：

项目代码 #

JavaScript代码

var canvas = document.querySelector('canvas'); var c = canvas.getContext('2d'); var height = window.innerHeight; var width = window.innerWidth; canvas.width = width; canvas.height = height; var letter = ['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 currentLetters = []; var px = height / 20; var y = []; var x = []; var speed; var acceleration; var score; var newIntervalKey = 0; var letternumber = 0; var score = 0; // This part will detect the clicks of your buttons. It's the preferred method for // handling events in JS as opposed to using the onClick attribute of HTML elements. var startButton = document.getElementById('startButton'); startButton.addEventListener('click', function() { start(); }, false); var stopButton = document.getElementById('stopButton'); stopButton.addEventListener('click', function() { stop(); }, false); // This will get the key code of the keyboard key that the user pressed. // Each letter corresponds to such a code, so that's how you can check // if the user pressed the correct key. Obviously you will need to have // some soft of a map of codes to letters. document.addEventListener('keydown', function(e) { // Getting a letter from a code. We have a function that does that. var currentlyPressedKey = getKeyFromCode(e.keyCode); // If the user pressed one of the letters currently in play, we // remove it from our currentLetters array. We are using a bad // way of doing it (using a for loop) because I don't know if // you have covered array methods yet. for (var i = 0; i < currentLetters.length; i++) { var letterObj = currentLetters[i]; if (letterObj.l == currentlyPressedKey) { currentLetters.splice(i, 1); score += 1; } } }, false); function getKeyFromCode(code) { switch (code) { case 65: return 'A'; case 66: return 'B'; case 67: return 'C'; case 68: return 'D'; case 69: return 'E'; case 70: return 'F'; case 71: return 'G'; case 72: return 'H'; case 73: return 'I'; case 74: return 'J'; case 75: return 'K'; case 76: return 'L' case 77: return 'M'; case 78: return 'N'; case 79: return 'O'; case 80: return 'P'; case 81: return 'Q'; case 82: return 'R'; case 83: return 'S' case 84: return 'T'; case 85: return 'U'; case 86: return 'V'; case 87: return 'W' case 88: return 'X'; case 89: return 'Y'; case 90: return 'Z'; //case 50: // return 'W'; default: return null; } } function addRandomLetter() { var letternumber = Math.floor(Math.random() * 26); // This will pick the x and y coordinated for each letter. It will need to be // updated later, because right now it's technically possible to place a // letter all the way on the bottom or on the right, where the user won't be // able to see it. var positionX = Math.floor(Math.random() * width); var positionY = Math.floor(Math.random() * height); // This saves an object to our array of current letters. The object contains // the letter itself, but also its x and y coordinates that we generated above. currentLetters.push({l: letter[letternumber], x: positionX, y: positionY}); } function start() { c.clearRect(0, 0, width, height); letternumber = 0; currentLetters = [] score = 0; if(newIntervalKey != 0) { clearInterval(newIntervalKey) } newIntervalKey = setInterval(where, 1000); } function stop() { px = width / 20; if (currentLetters.length == 11) { clearInterval(newIntervalKey); c.clearRect(0, 0, width, height); c.font = 'bold italic ' + px + 'px Verdana'; c.globalAlpha = 1; c.fillStyle = 'Red'; c.fillText('GAME OVER', (width / 2 - width / 5.5), height / 2); c.font = 'bold italic' + px/2 + 'px Verdana' c.fillStyle = 'Black' c.globalAlpha = 0.1; c.fillText('Final Score:' + ' ' + score, (width / 2), (height / 2 + height / 10)); } } function where() { x = Math.floor(Math.random() * (width - width / 20)); y = Math.floor(Math.random() * (height - width / 20)); addRandomLetter(); drawletters(); letternumber += 1; stop(); } function drawletters() { c.clearRect(0, 0, width, height); c.font = 'bold italic ' + px + 'px Verdana'; c.globalAlpha = 1; c.fillStyle = 'Black'; // This will loop through the array of our current letters and draw them // each on the specified coordinates. We get all that info from the objects // that we've stored in the array. currentLetters.forEach(function(char) { c.fillText(char.l, char.x, char.y); }); c.font = 'bold italic ' + height / 1.5 + 'px Verdana'; c.globalAlpha = 0.1; c.fillText(score, width / 3, height / 1.5); }

CSS代码

canvas { border: 2px solid blue; } body { margin: 0; }

请问如何导出该JSFiddle项目中的CSS代码片段？

别担心，导出JSFiddle里的CSS代码超简单，跟着下面几步操作就行：

• 打开你的JSFiddle项目页面
• 在页面下方的代码面板里，找到标有CSS的标签（通常和HTML、JS标签并排显示）
• 用快捷键Ctrl+A（Windows）或Cmd+A（Mac）选中标签里的所有CSS代码
• 按下Ctrl+C/Cmd+C复制选中的内容
• 把复制的代码粘贴到本地的.css文件或者你需要的地方就完成啦

另外，如果你想一次性导出整个项目的所有文件，还可以点击JSFiddle页面右上角的Export按钮，选择ZIP格式下载，解压后就能看到单独的CSS文件了~

内容的提问来源于stack exchange，提问作者Lucas