<body>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">首页</a>
<input type="search" placeholder="搜索..." result="8">
</li>
</ul>
</nav>
</body>
<br/>
<br/>
<br/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bush game简介</title>
</head>
<body>
<h1>Bush game
<button onclick="displayAlerttt()">刷新</button>
<script>
function displayAlerttt(){
alert('刷新不可用')
}
</script>
</h1>
<p>
一款由王绎霖带领的团队打造出的一款完全免费的游戏
</p>
<button onclick="displayAlert()">下载</button>
<script>
function displayAlert(){
alert('请联系我们的官方邮箱：3584533864@qq.com，来获取Bush game的最新版本')
}
</script>
<button onclick="displayAlertt()">加入我们</button>
<script>
function displayAlertt(){
alert('你可以通过填写你的手机号码和你的职业并点击‘提交’按钮来加入我们')
}
</script>
<p>
手机号码:
<input name="user"type="text"
value=""size="12"
maxlength="1000">
</p>
<p>
职业：
<input name="sex"type="radio"
value="1"checked>Web开发者
<input name="sex"type="radio"
value="1"checked>App开发者
<input name="sex"type="radio"
value="1"checked>终端开发者
<input name="sex"type="radio"
value="1"checked>游戏开发者
<input name="sex"type="radio"
value="0"checked>其他开发者
</p>
<p>
<button onclick="displayAlerttaa()">提交</button>
<script>
function displayAlerttaa(){
alert('服务器已停用,你可以通过添加15266639890的微信或钉钉来加入我们')
}
</script>
</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style>
ul /* 画布调节区样式 */
{
float: left;
list-style: none;
font-size:13px;
border: 1px solid #cccc99;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #cccc99;
padding:10px;
}
hr{ clear: both; }
canvas /* 画布样式 */
{
border:2px solid black;
float:left;
margin:15px; font-family:
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
input[type=color]
{
height: 18px;
width: 20px;
}
.item /* 调节区元素行样式 */
{
padding-left:20px;
}
</style>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<!DOCTYPE html>
<html>
<head>
<title>画布</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="format-detection" content="telephone=no">
<style type="text/css">
</style>
</head>
<body ="1">
<script type="text/javascript">
//Globals
var resize = null,
limitSm = 768,
limitMd = 960,
limitLg = 1280,
loadedSm = false,
loadedMd = false,
loadedLg = false,
loadedXl = false;
function loadSm() {
alert("欢迎来到我们的网站！");
}
function loadMd() {
alert("欢迎来到我们的网站！")
}
function loadLg() {
alert("欢迎来到我们的网站！")
}
function loadXl() {
alert("欢迎来到我们的网站！");
}
function logistics() {
var cw = document.documentElement.clientWidth;
if (cw < limitSm) {
if (!loadedSm) {
loadSm();
loadedSm = true;
}
} else if (cw < limitMd) {
if (!loadedMd) {
loadMd();
loadedMd = true;
}
} else if (cw < limitLg) {
if (!loadedLg) {
loadLg();
loadedLg = true;
}
} else {
if (!loadedXl) {
loadXl();
loadedXl = true;
}
}
}
// Screen sized reloading:
window.onload = logistics();
window.onresize = function(){
if (resize != null) {
clearTimeout(resize);
}
resize = setTimeout(function() {
console.log("屏幕宽度尺寸发生变化");
logistics();
}, 750);
};
</script>
<script type="text/javascript">
function loadjs (scriptFilename, scriptId){
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', scriptFilename);
script.setAttribute('id', scriptId);
scriptElement = document.getElementById(scriptId);
if(scriptElement){
document.getElementsByTagName('head')[0].removeChild(scriptElement);
}
document.getElementsByTagName('head')[0].appendChild(script);
}
var script = 'scripts/alert.js';
loadjs(script,"test");
</script>
<script type="text/javascript">
// slow
function collectionGlobal() {
var coll = document.getElementsByTagName_r('div'),
len = coll.length,
name = '';
for (var count = 0; count < len; count++) {
name = document.getElementsByTagName_r('div')[count].nodeName;
name = document.getElementsByTagName_r('div')[count].nodeType;
name = document.getElementsByTagName_r('div')[count].tagName;
}
return name;
};
// faster
function collectionLocal() {
var coll = document.getElementsByTagName_r('div'),
len = coll.length,
name = '';
for (var count = 0; count < len; count++) {
name = coll[count].nodeName;
name = coll[count].nodeType;
name = coll[count].tagName;
}
return name;
}
// fastest
function collectionNodesLocal() {
var coll = document.getElementsByTagName_r('div'),
len = coll.length,
name = '',
el = null;
for (var count = 0; count < len; count++) {
el = coll[count];
name = el.nodeName;
name = el.nodeType;
name = el.tagName;
}
return name;
};
</script>
<script type="text/javascript">
var el = document.getElementById('mydiv');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';
</script>
<script type="text/javascript">
// 优化
var el = document.getElementById('mydiv');
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';
//如果你打算保持当前的风格，你可以将它附加在cssText 字符串的后面。
el.style.cssText += '; border-left: 1px;';
//或者
var el = document.getElementById('mydiv');
el.className = 'active';
</script>
<script type="text/javascript">
//事件委托
//这里我们创建bind函数，给了四个参数
//obj,需要绑定事件的节点，
//tar,在obj容器中的需要批量绑定事件的目标元素标签名
//evName,需要绑定的事件名称
//fn,需要为目标元素绑定的事件处理函数
var bind = function(obj, tar, evName, fn) {
obj['on' + evName] = function(event) {
var e = event || window.event,
//首先对event做兼容，window.event主要用于兼容IE
target = e.target || e.srcElement,
//对target做兼容，e.srcElement主要用于兼容IE，这里获取的是触发事件的目标元素
bool = true;
//设置一个bool型变量，后面会用到
if (target != obj) {
//这一步比较重要，判断target是否和obj相等，目的在于区别触发事件的元素是否为绑定事件的元素本身，如果是，很明显不符合要求，因为我们要触发事件的对象应该是绑定元素内的某一些元素。
(function() {
//这里做了一个匿名函数，主要用于循环判断我们触发事件的元素（target）是否在我们的目标元素（tar）内
if (target.tagName != tar.toUpperCase()) {
//判断触发事件的元素标签名（tagName）是否和我们提供的目标元素的标签名（tar）相等，
target = target.parentNode;
//如果不是目标元素，则寻找触发事件元素的父元素，并修改target指向这个父元素
if (target != obj) {
//判断修改过后的target是否为我们绑定事件的元素
arguments.callee();
//如果不是我们绑定事件的元素，则重新运行这个匿名函数
} else {
bool = false;
//如果是这个我们绑定事件的元素，则停止重新运行这个匿名函数，因为这代表我们的循环已经达到了绑定事件的元素，再往外查找已经没有必要了，这里将bool设置为false
}
}
})();
//这里的空括号用于执行匿名函数
if (bool) {
fn(target);
}
//判断是bool是否为true,如果为true，表示我们触发事件的元素在目标元素(tar)内，运行事件处理函数，并传入目标元素对象，如果为false，则相反。
}
}
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style>
ul /* 画布调节区样式 */
{
float: left;
list-style: none;
font-size:13px;
border: 1px solid #cccc99;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #cccc99;
padding:10px;
}
hr{ clear: both; }
canvas /* 画布样式 */
{
border:2px solid black;
float:left;
margin:15px; font-family:
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
input[type=color]
{
height: 18px;
width: 20px;
}
.item /* 调节区元素行样式 */
{
padding-left:20px;
}
</style>
</head>
<body>
<header><h2>体验画布：</h2></header>
<section>
<!-- 矩形 Canvas画布 设置区 -->
<ul>
<li><h3>画布</h3></li>
<!-- 画布长宽调节区 -->
<li class="item">宽：<input id="width_canvas" type="range" min="200" max="500" value="300" step="1" /></li>
<li class="item">高：<input id="height_canvas" type="range" min="200" max="500" value="395" step="1" /></li>
<li><h3>图片</h3></li>
<!-- 图片选择区 -->
<li class="item"><input id="file_img" type="file" value="在图形中写字" /></li>
<!-- 文字设置区 -->
<li><h3>文字</h3></li>
<li class="item">字体：
<select id="family_font">
<option value="宋体">宋体</option>
<option value="黑体">黑体</option>
<option value="幼圆">幼圆</option>
<option value="微软雅黑">微软雅黑</option>
<option value="楷体">楷体</option>
<option value="隶书">隶书</option>
<option value="方正姚体">方正姚体</option>
<option value="方正舒体">方正舒体</option>
<option value="华文彩云">华文彩云</option>
</select>
</li>
<li class="item">内容：<input id="text_font" value="在图形中写字" maxlength=16 /></li>
<li class="item">
起点色：<input id="color_font_begin" type="color" value="#ff0000" />
过渡色：<input id="color_font_middle" type="color" value="#00ff00" />
终点色：<input id="color_font_end" type="color" value="#400080" />
</li>
<li class="item">X轴：<input id="x_font" type="range" min="0" max="500" value="90" step="1" /></li>
<li class="item">Y轴：<input id="y_font" type="range" min="0" max="500" value="150" step="1" /></li>
<li class="item">大小：<input id="size_font" type="range" min="1" max="50" value="25" step="1" /></li>
</ul>
<!-- 矩形 Canvas画布 -->
<canvas id="canvas"></canvas>
</section>
</body>
<script>
(function () {
var canvas = document.getElementById('canvas'), // 获取Canvas画布元素
context = canvas.getContext("2d"), // 获取Canvas元素上下文
width_canvas = document.getElementById('width_canvas'), // 画布宽
height_canvas = document.getElementById('height_canvas'), // 画布长
file_img = document.getElementById('file_img'), // 图片选择
text_font = document.getElementById('text_font'), // 文字内容
// 渐变起点颜色
color_font_begin = document.getElementById('color_font_begin'),
// 渐变过渡颜色
color_font_middle = document.getElementById('color_font_middle'),
// 渐变终点颜色
color_font_end = document.getElementById('color_font_end'),
x_font = document.getElementById('x_font'), // 文字x轴坐标
y_font = document.getElementById('y_font'), // 文字y轴坐标
size_font = document.getElementById('size_font'), // 文字大小
family_font = document.getElementById('family_font'), // 文字字体
img = new Image(); // 新建图片元素实例
function draw(e, x, y) { // 绘制图片和文字
// 清空画布指定矩形区域内容
context.clearRect(0, 0, parseInt(canvas.width), parseInt(canvas.height));
canvas.width = parseInt(width_canvas.value); // 设置画布宽
canvas.height = parseInt(height_canvas.value); // 设置画布搞
context.drawImage(img, x || move_x, y || move_y); // 填充图片到画布
// 创建线性渐变
var gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);
//渐变起点添加一个颜色变化
gradient.addColorStop("0.0", color_font_begin.value);
//渐变中间点添加一个颜色变化
gradient.addColorStop("0.5", color_font_middle.value);
//渐变终点添加一个颜色变化
gradient.addColorStop("1.0", color_font_end.value);
context.fillStyle = gradient; // 用渐变填色
context.textAlign = 'left'; // 设置文字水平对齐方式
context.font = size_font.value + "px " + family_font.value; // 设置文字大小和字体
// 填充文字到画布指定区域
context.fillText(text_font.value, parseInt(x_font.value), parseInt(y_font.value));
};
//绑定文字内容文本框keyup事件，当键盘按键释放时触发
text_font.addEventListener('keyup', draw, false);
// 绑定数值区域选择控件change事件，当数值变化时触发draw函数
[color_font_begin, color_font_middle, color_font_end, x_font, y_font,
size_font, width_canvas, height_canvas, family_font].forEach(function (item) {
item.addEventListener('change', draw, false);
});
// 绑定图片load事件，当图片加载完毕后触发
img.addEventListener('load', draw, false);
//绑定长传控件change事件，当路径发生变化时触发
file_img.addEventListener('change', function () {
var files = this.files, // 获取文件列表
reader;
for (var i = 0, length = files.length; i < length; i++) {
if (files[i].type.toLowerCase().match(/image.*/)) { // 正则判断文件类型是否为图片类型
reader = new FileReader(); // 实例化FileReader对象，用于读取文件数据
reader.addEventListener('load', function (e) { // 监听FileReader实例的load事件
img.src = e.target.result; // 设置图片内容
});
reader.readAsDataURL(files[i]); // 读取图片文件为dataURI格式
canvas.style.cursor = 'move'; // 设置光标为移动样式
break;
};
};
}, false);
var move_x = 0, move_y = 0; // 临时存储图片x、y轴偏移量
function canvas_mousemove(e) { // 当鼠标拖动图片时触发
// 计算图片拖动后的x轴位置
move_x = e.clientX - canvas.$mousedown_x + canvas.$mouseup_move_x;
// 计算图片拖动后的y轴位置
move_y = e.clientY - canvas.$mousedown_y + canvas.$mouseup_move_y;
// 按照计算后的坐标位置重新绘制图片和文字
draw(null, move_x, move_y);
};
canvas.addEventListener('mousedown', function (e) { // 当鼠标单击画布区时触发
if (img.src.length) { // 判断画布区内是否已经存在图片
canvas.$mousedown_x = e.clientX; // 缓存当前鼠标x轴坐标
canvas.$mousedown_y = e.clientY; // 缓存当前鼠标y轴坐标
// 监听画布区鼠标拖动事件
canvas.addEventListener('mousemove', canvas_mousemove, false);
};
}, false);
document.addEventListener('mouseup', function (e) { // 当鼠标在文档内释放后触发
canvas.$mouseup_move_x = move_x; // 缓存拖动后图片x轴坐标
canvas.$mouseup_move_y = move_y; // 缓存拖动后图片y轴坐标
// 移除对画布鼠标拖动监听事件
canvas.removeEventListener('mousemove', canvas_mousemove, false);
}, false);
// 阻止文档内容选择事件，避免拖动时触发内容选择照成不便。
document.addEventListener('selectstart', function (e) { e.preventDefault() }, false);
draw(); // 绘制默认内容
})();
</script>
</html>
此代码运行时报错，并且出现8处警告。求解决🙏
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
分享- 邀请回答
-
1条回答 默认 最新
关注【相关推荐】
- 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7514959
- 这篇博客你也可以参考下：产品开发都应该知道的8个网站，增强工作体验
- 您还可以看一下 刘磊老师的项目1——无线自助点餐平台课程中的 第8课：餐厅后台订单详情数据展示小节, 巩固相关知识点
- 除此之外, 这篇博客: 仿淘宝购物车实现功能：滚动页面到【结算操作】不可视时，浏览器底部出现固定栏中的 代码： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
<!--操作按钮--> <div class="cart_operating clearfix"> <div class="cart_operating_style"> <div class="cart_price">商品总价：（不含运费）<b>￥0.00</b></div> <div class="cart_btn"> <a href="javascript:void(0);" class="payment_btn"> <div class="paymentAllowed">马上付款</div></a> <a href="#" class="continue_btn"></a> </div> </div> </div> <!-- 浮现栏 --> <div class="floatTitle" style="border: 1px gainsboro solid;height: 50px;line-height: 50px;display: none;width: 1000px;"> <div style="font-size: 17px;display:inline;float: left"> 已选商品 <span style="color: red;" id="float_count">0</span> 件 </div> <div class="cart_price" style="display:inline;font-size: 17px;float: left;padding-left: 150px;padding-right: 180px;"> 商品总价：（不含运费）<b style="color: red">￥0.00</b> </div> <div class="cart_btn" style="display:inline; "> <a href="javascript:void(0);" class="payment_btn"> <div class="paymentAllowed">马上付款</div> </a> <a href="#" class="continue_btn"></a> </div> </div><script type="text/javascript"> $(function() { $(window).scroll(function () {//鼠标滑动事件 var height = $(".cart_btn").offset().top;//计算该框离浏览器顶部的距离 if (height >= $(window).scrollTop() && height < ($(window).scrollTop() + $(window).height())) { $(".floatTitle").hide(); }else { $(".floatTitle").show(); } }); //跳转到购物车页面加载时候 var height = $(".cart_btn").offset().top;//计算该框离浏览器顶部的距离 if (height >= $(window).scrollTop() && height < ($(window).scrollTop() + $(window).height())) { $(".floatTitle").hide(); }else { $(".floatTitle").show(); } }); </script>
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^解决 无用评论 打赏举报 分享
- 2022-01-14 16:55回答 1 已采纳 看起来 是 scss 语法问题 。 你试试升级 less-loader ,node-less版本 。
- 2022-01-10 16:04回答 2 已采纳 warn不是报错，是警告，已经安装成功了，error才是安装失败有报错
- 2022-11-22 17:17回答 1 已采纳 https://blog.csdn.net/a666666000/article/details/126973229参考这个看看
- 2024-07-20 22:55bug菌¹的博客 本文收录于《CSDN问答解答》专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！...
- 2022-06-21 18:17回答 2 已采纳 这是控制台的警告，其实就是表单验证不通过，显示的提示语而且你可以从提示语看出是 feedbackInfo这一项是必填项，是因为 feedbackInfo 没有填，没有通过表单验证
- 2022-08-04 14:46
export 'default' (imported as 'Vue') was not found in 'vue'，而且浏览器页面一片空白且报错，如何解决？(关键词-main)
elementui
vue.js
前端
回答 2 已采纳 已解决，和一楼方法相似，http://t.csdn.cn/rpqr8 - 2022-06-11 00:19 vue警告 [Vue warn]: Property "item" was accessed during render but is not defined on instance.
node.js
vue.js
前端框架
回答 2 已采纳 你item没定义吧？你是想获取list里面的对象吗?是的话，item改成cate
- 2022-08-29 14:55孙先生213的博客 直接上警告及报错的效果图，图一是在打包过程中出现的警告提示（注意：这个警告可能会在打包过程中一闪而过，被下面的内容覆盖导致忽略此警告），图二是环境上，点击导航栏后，页面打不开，并且控制台报错信息，而且...
- 2022-06-29 08:56回答 1 已采纳 mini-css-extract-plugin 安装一下看看
- 2022-10-11 11:08回答 1 已采纳 这是编辑器的识别问题，不影响代码运行，编辑器把代码识别为html代码，你用的是vue
- 2022-09-03 17:32回答 1 已采纳 看下你是不是这么用，你的这个报错说明你拿到的app.config是个undefined import { createApp } from 'vue' import App from './App.
- 2021-01-12 23:00安幕的博客 对于前端而言，和后端处于同一个监控系统中，前端有自己的监控方案，后端也有自己等监控方案，但两者并不分离，因为一个用户在操作应用过程中如果出现异常，有可能是前端引起，也有可能是后端引起，需要有一个机制，...
- 2022-08-23 13:56回答 5 已采纳 是不是哪里全局样式影响了
- 2023-06-25 01:48X-对勾函数的博客 3.最终效果：重新打开vs后代码最前端会默认加上这一段代码，以后使用scanf函数就不会报错了，这是vs2022的解决方法，其他版本应该也应与此相同。方法一：使用scanf_s函数来代替scanf函数，不推荐这个方法，因为scanf...
- 2024-07-03 09:01XIAO GUOBA的博客 当前端项目能够运行但出现很多错误提示和告警时，这通常意味着项目中存在一些潜在的问题或不一致之处，这些问题可能不会立即阻止项目运行，但可能会在未来导致更严重的问题或影响项目的性能和可维护性。
- 没有解决我的问题, 去提问
问题事件
创建了问题
10月8日
悬赏问题
- ¥15 神经网络模型一直不能上GPU
- ¥15 苍穹外卖拦截器token为null
- ¥15 pyqt怎么把滑块和输入框相互绑定，求解决！
- ¥20 wpf datagrid单元闪烁效果失灵
- ¥15 券商软件上市公司信息获取问题
- ¥100 ensp启动设备蓝屏，代码clock_watchdog_timeout
- ¥15 Android studio AVD启动不了
- ¥15 陆空双模式无人机怎么做
- ¥15 想咨询点问题，与算法转换，负荷预测，数字孪生有关
- ¥15 C#中的编译平台的区别影响