我正在尝试使用JSFiddle上的AngularJS.
我已经将其他类似的项目复制到了T,但是当我自己尝试时,JSFiddle给了我各种各样的错误.目前,它告诉我,是不识别我的控制器.
我真的很感激,如果有人能看看我真正简单的小提琴并告诉我为什么它不起作用.
https://jsfiddle.net/ke10sq2v/
这是代码:
angular.module('App', ['ngAnimate'])
.controller("Ctlr", ['$scope', function($Scope){
$scope.hi = "yolo";
}]);
HTML
<div ng-controller="Ctrl" ng-init="showBoxes=false">
<div class="block" ng-show="showBoxes">Block 1</div>
<div class="block" ng-show="showBoxes">Block 2</div>
<button ng-click="showBoxes=!showBoxes">Toggle</button>
<p>Show Boxes: {{showBoxes}} {{hi}}</p>
</div>
CSS
.block {
height: 100px;
width: 100px;
background-color: blue;
margin: 15px 10px;
}
我的目标是创建一个带有交互式视频的网页,在这里搜索时,我发现了一个指向适合我需要的jsFiddle的链接.
由于代码在jsFiddle上工作得很好,当我试图将它复制到DreamWeaver时它崩溃了(似乎JavaScript已停止工作).
我把它们全部放在一起:
<html>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="sgrub.js"></script>
<script>
$('#video_1, #video_2').hide();
$('.icon_1').click(function() {
$('#video_2').fadeOut(function() {
$('#video_1').fadeIn();
});
});
$('.icon_2').click(function() {
$('#video_1').fadeOut(function() {
$('#video_2').fadeIn();
});
});
$('.icon_1').click(function() {
$('.video_2').get(0).pause();
$('.video_2').get(0).currentTime = 0;
$('.video_1').get(0).play();
});
$('.icon_2').click(function() {
$('.video_1').get(0).pause();
$('.video_1').get(0).currentTime = 0;
$('.video_2').get(0).play();
});
</script>
<head></head>
<body>
<div class="icon_1" id="mediaplayer">
cadillac
</div>
<div class="icon_2" id="mediaplayer2">
nike
</div>
<div id="video_1">
<video class="video_1" width="50%" height="50%" controls="controls"
poster="http://www.birds.com/wp-content/uploads/home/bird.jpg">
<source src="http://video-js.zencoder.com/oceans-clip.mp4"
type="video/mp4" />
</video>
</div>
<div id="video_2">
<video class="video_2" width="50%" height="50%" …以下是HTML代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('done');
}
}, false);
</script>
</head>
<body>
<ul>
<li>Buy milk</li>
<li>Take the dog for a walk</li>
<li>Exercise</li>
<li>Write code</li>
<li>Play music</li>
<li>Relax</li>
</ul>
</body>
</html>
下面是CSS代码:
li {
list-style-type: none;
position: relative;
margin: 2px;
padding: 0.5em 0.5em 0.5em 2em;
background: lightgrey;
font-family: sans-serif;
}
li.done {
background: #CCFF99;
}
li.done::before {
content: '';
position: absolute;
border-color: #009933; …有人知道对CKEditor 4.0的url/cdn(外部公共)库引用吗？我需要用它来重现一个问题.
我一直试图让这个代码工作(http://jsfiddle.net/2DY8M/9/),该文件是在我的桌面上的文件夹在一个单一的HTML文档.我尝试将脚本放在关闭头标记的上方和下方,并尝试链接到同一文件夹中的本地jquery文件,但我得到了相同的结果.
在浏览器中,单击链接时目标框中没有任何内容.
这是代码
<DOCTYPE html>
<html>
<head>
<style media="screen" type="text/css">
.contentleft{
border:1px solid green;
width:30%;
float:left;
}
.contentright{
border:1px solid red;
width:64%;
float:right;
height:400px;
}
.selectboxcontent{
width:100%;
height:100px;
background:#ccc;
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.selectBox').click(function() {
$('selectBoxContent').toggle("slide");
return false;
});
});
</script>
</head>
<body>
<div class="contentleft">
<ul>
<li><a class="selectBox" href="">sample</a></li>
<li><a class="selectBox" href="">sample1</a></li>
<li><a class="selectBox" href="">sample2</a></li>
</ul>
</div>
<div class="contentright">
<div class="selectBoxContent">its</div>
<div class="selectBoxContent">my</div>
<div class="selectBoxContent">way</div>
</div>
</body>
</html>
我正在尝试将Word Doc表单转换为在线表单,以便我们可以保证结果并方便用户.当我在jsfiddle上测试javascript时它工作得很完美,但是当我将它上传到我们的服务器并访问它时,它不起作用.
这是jsfiddle:http://jsfiddle.net/b4avkn9q/8/
这是页面背后的代码:
<!doctype html>
<html>
<head>
<title>BUILDER Building Add Request (DHA)</title>
<!-- JavaScript -->
<style>
function Org1Pick() {
var Org1 = document.getElementById("OrgDHA").value;
document.getElementById("OrgDHA2").style.visibility = "visible";
document.getElementById("OrgChoice").innerHTML = Org1+" selected";
switch (Org1) {
case "AFMS":
alert(Org1);
document.getElementById("OrgDHA2").list = "ORG-DHA-AFMS";
document.getElementById("OrgDHA2").placeholder = "DHA-AFMS";
break;
case "BUMED":
alert(Org1);
document.getElementById("OrgDHA2").list = "ORG-DHA-BUMED";
document.getElementById("OrgDHA2").placeholder = "DHA-BUMED";
break;
case "MEDCOM":
alert(Org1);
document.getElementById("OrgDHA2").list = "ORG-DHA-MEDCOM";
document.getElementById("OrgDHA2").placeholder = "DHA-MEDCOM";
break;
case "NCR":
alert(Org1);
document.getElementById("OrgDHA2").list = "ORG-DHA-NCR";
document.getElementById("OrgDHA2").placeholder = "DHA-NCR";
break;
default:
alert(Org1);
document.getElementById("OrgDHA2").style.visibility …这是我在jsFiddle中的代码:
HTML
Run Code Online (Sandbox Code Playgroud)<html> <body> <a href="abc.com", id="a">aa</a> </body> </html>JavaScript的
Run Code Online (Sandbox Code Playgroud)$('#a').click(function(){ alert ('aa'); })跑
onLoad使用MooTools 1.3.2
为什么我的click回调函数没有被调用？
如何在JSFiddle中为不支持ES6的浏览器（如IE）启用ES6？
jsfiddle ×8
javascript ×7
html ×4
jquery ×3
angularjs ×1
ckeditor ×1
css ×1
dreamweaver ×1
ecmascript-6 ×1
html5 ×1