如何使脚本工作/响应
How can I make my script work/respond
我在PC上,没有使用本地主机或任何东西,只是做了一个.html并开始尝试。我已经通过"src"和"href"在头上链接了脚本,因为我下载了它们,但它们仍然不起作用。我继续 http://codepen.io/anon/pen/yJogzz,它运行良好。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
<link type="text/css"href="./Style.css" rel="stylesheet">
<link type="text/javascript"href="./Style.js" rel="stylesheet">
</head>
<body>
<span class="about" id="but01">Click on me 1</span>
<span class="about" id="but02">Click on me 2</span>
<div id="s1" class="hidden" id="draggable-element">
<div id="draggable-element">Text here</div>
</div>
<div id="s2" class="hidden">2</div>
</body>
</html>
.CSS:
body{
background-color: #101010;
color: #ff9900;
}
.hidden{
display:none;
}
[draggable=true] {
cursor: move;
}
#draggable-element {
width:100px;
height:100px;
background-color:#ff9900;
color:white;
padding:10px 12px;
cursor:move;
position:relative; /* important (all position that's not `static`) */
}
脚本:
// Makes div dissapear on click on div
$('span[id^="but0"]').click(function(){
var id = $(this).attr('id').substr(4);
if($('#s' + id).is(':visible'))
$('#s' + id).hide();
else
$('#s' + id).show();
});
var selected = null, // Object of the element to be moved
x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer
x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element
// Will be called when user starts dragging an element
function _drag_init(elem) {
// Store the object of the element which needs to be moved
selected = elem;
x_elem = x_pos - selected.offsetLeft;
y_elem = y_pos - selected.offsetTop;
}
// Will be called when user dragging an element
function _move_elem(e) {
x_pos = document.all ? window.event.clientX : e.pageX;
y_pos = document.all ? window.event.clientY : e.pageY;
if (selected !== null) {
selected.style.left = (x_pos - x_elem) + 'px';
selected.style.top = (y_pos - y_elem) + 'px';
}
}
// Destroy the object when we are done
function _destroy() {
selected = null;
}
// Bind the functions...
document.getElementById('draggable-element').onmousedown = function () {
_drag_init(this);
return false;
};
document.onmousemove = _move_elem;
document.onmouseup = _destroy;
尝试在 <body>
标签底部导入脚本。
当你使用jQuery时,我建议将你的代码包装在一个$(document).ready()
函数中(不需要)。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
<link type="text/css"href="./Style.css" rel="stylesheet">
</head>
<body>
<span class="about" id="but01">Click on me 1</span>
<span class="about" id="but02">Click on me 2</span>
<div id="s1" class="hidden" id="draggable-element">
<div id="draggable-element">Text here</div>
</div>
<div id="s2" class="hidden">2</div>
<script type="text/javascript" src="script.js"></script>
</body>
这段代码对我有用。 你肯定不需要JavaScript服务器
您可以使用Python的简单HTTP服务器来托管文件。脚本标记不会加载,因为文件系统不会响应 GET 请求。
确保已安装 Python 2.x,然后运行:
python -m SimpleHTTPServer
在终端中,从目录中保存文件:
cd /path/to/files
然后,您将能够访问以下位置的文件:
http://localhost:8000/
或者,您可以启动Chrome以允许通过以下方式访问本地文件:
chrome --allow-file-access-from-files
在此处阅读更多内容。
如果您想避免这些选项。将 JS 内联到脚本标记中的 HTML 文档上。就像在这个代码笔中一样。
相关文章:
- 响应动画手风琴不工作
- 由于响应中不存在“Access Control Allow Origin”标头,跨域请求停止工作
- 自动完成搜索无法正常工作,请不要迭代$中的所有元素.每个ul-li都会及时显示响应
- ajax响应为空后JQuery无法工作
- 服务工作线程是否可以响应同步 XHR 请求
- Jquery Post与JSON响应工作
- 如何在没有 Web 服务器的情况下做出响应.js工作
- 悬停和焦点上的响应式 jQuery 工具提示无法正常工作
- 如何才能让响应式幻灯片在Internet Explorer中工作
- Ajax关于成功响应不工作的警报c#
- 谷歌表单响应无法从网站上工作
- Wordpress AJAX没有't工作-响应0
- 使用nodeJS和phantomJS返回网络请求和响应,仅在控制台中工作
- 用于循环的xhr响应不工作
- 网站响应能力-Iphone需要双击链接才能工作
- 响应式灯箱无法在iPhone中工作
- jQuery中的调用函数ajax成功响应工作一次,而不是两次
- 可以通过文件//协议响应工作
- 静态响应工作!而异步不起作用
- Angular js的ng-repeat不能为服务器响应工作