IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

在Vue项目中如何监测数组或对象中值的变化呢？

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<template>
  <div class="hello">
    <div>
      请输入姓名： <input type="text" v-model="data.name" style="border: 1px solid black;">
      请输入年龄： <input type="text" v-model="data.age" style="border: 1px solid black;">
    </div>
    <div style="padding: 10px 50px;">
      <div style="margin: 10px;">姓名：{{data.name}}</div>
      <div>年龄：{{data.age}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      data: {
        name: 'zhangsan',
        age: 21
      },
      watch: {
        data: function (newValue, oldValue) {
          console.log(newValue, oldValue);
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

如何保存杀人状态

1

本地储存

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var arr = localStorage.getItem("newArr").split(",");//获取排序数组

vue中解决跨域问题

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

因为截图有最小尺寸限制，所以才这么截图，见谅。

PC端页面数据改变之后跳转页面，再调回来数据消失

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

// 法官日志页面
$('#dialyLog').click(function () {
    location.href = './Task2-6.html';
});
// 法官台本流程状态机
var steps = StateMachine.create({
    initial: 'step1',
    events:[
        {name: 'kill', from: 'step1', to: 'step2'},
        {name: 'dead', from: 'step2', to: 'step3'},
        {name: 'speak', from: 'step3', to: 'step4'},
        {name: 'vote', from: 'step4', to: 'step1'}
    ]});
// 杀人、发言、投票的事件判断
$('.kill').click(function () {
    if (this.style.backgroundColor === "rgb(131, 176, 154)"){    // 判断是否进行过这一步
        alert('请进行游戏下一步活动')
    }else if (steps.is('step1')) {  // 判断是否处在可以执行的状态
        location.href = './Task2-7.html';  //截图中将该页注释掉了
        steps.kill();    // 执行事件
        $(this).next().show();  // 杀人后的提示显示
        $(this).css("background-color","#83b09a").addClass('visited');    // 改变点击过的状态（背景颜色）
    }else {
        alert('请按顺序操作');
    }
});
$('.dead').click(function () {
    if (this.style.backgroundColor === "rgb(131, 176, 154)"){
        alert('请进行游戏下一步活动')
    }else if (steps.is('step2')) {
        alert('请死者亮明身份并且发表遗言');
        steps.dead();
        $(this).css("background-color","#83b09a").addClass('visited');
    }else{
        alert('请按顺序操作');
    }
});
$('.player').click(function () {
    if (this.style.backgroundColor === "rgb(131, 176, 154)"){
        alert('请进行游戏下一步活动')
    }else if (steps.is('step3')) {
        alert('玩家依次发言讨论');
        steps.speak();
        $(this).css("background-color","#83b09a").addClass('visited');
    }else{
        alert('请按顺序操作');
    }
});
$('.vote').click(function () {
    if (this.style.backgroundColor === "rgb(131, 176, 154)"){
        alert('请进行游戏下一步活动')
    }else if (steps.is('step4')) {
        steps.vote();
        location.href = './Task2-8.html';  // 截图中将该页注释掉了
        addDay();  // 是生成新天数的函数
        $(this).css("background-color","#83b09a").addClass('visited').next().show();
        $(this).parent().parent().hide();
    }else{
        alert('请按顺序操作');
    }
});

九宫格颜色不能正常显示

1

变量表达式和运算符操作DOM

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var t;

function start() {
    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
    for (i = 0; i < 3; i++) {
        var a = Math.floor(Math.random() * arr.length);
        var b = Math.floor(Math.random() * arr.length);
        var c = Math.floor(Math.random() * arr.length);
        if (a !== b && a !== c && b !== c) {
            break;
        }
    }

    var square = document.getElementsByClassName("square");
    for (j = 0; j < square.length; j++) {
        square[j].style.background = "orange";
    }

    function color() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb( ' + r + ',' + g + ',' + b + ')";
    }

    square[a].style.background=color();
    square[b].style.background=color();
    square[c].style.background=color();


    t = setTimeout("start()", 500);

}



function stop() {
    console.log(t)
    clearInterval(t);
    var square = document.getElementsByClassName("square");
    for (h = 0; h <square.length; h++) {
        square[h].style.background = "orange";
    }

}

通过server_name怎么设置访问本地项目？如何跨域向网址发起数据请求？

1

跨域 Ajax

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    server {
        listen       12;
# 监听端口
        server_name  localhost;
# 在计算机网络中，localhost（意为“本地主机”，指“这台计算机”）是给回路网络接口（loopback）的一个标准主机名，相对应的IP地址为127.0.0.1（IPv4）和[::1]（IPv6）。
        location / {
# root 指向地址，index相当于文件名
            root   C:\Users\24328\Desktop\start-a-project.github.io\css-js\js-task5\;
            index  js-task5.html;
            try_files $uri $uri/ /index.html =404
        }
#调用ajax刷新的部分？不清楚定义，没百度到，就是ajax调用的部分。
        location /carrots-admin-ajax/{
            proxy_pass http://dev.admin.carrots.ptteng.com/;
        }

// 点击获取value值
$(".btn").eq(0).click(function() {
    var name = $(".name").get(0).value
    var pass = $(".password").eq(0).val()
    console.log(name)
    console.log(pass)
    if (name == '' || pass == '') {
        alert("请输入正确的账号密码")
    }
    var xhr = new XMLHttpRequest(); // 创建一个新的xhr实例
    xhr.open('post', 'http://www.example.com/page.php', true); //使用该实例向网站发起请求，规定请求的类型、URL 以及是否异步处理请求。
    xhr.onreadystatechange = function() { // 若产生变化则指定回调函数
        if (xmlhttp.readyState === 4 || xmlhttp.status === 200) { //判断是否发送成功和判断服务端是否响应成功
            var jsons = JSON.parse(xmlhttp.responseText); //转换
            console.log(jsons);
        }
    }
    xhr.send() //将请求发送到服务器。
}

配置本地现在倒是清楚了，使用的localhost：端口访问，比如我的就是localhost：1000直接输入到网址栏访问。
希望看到的别重复我的错误：若图片名称使用中文会导致使用代理时无法识别，导致图片名称乱码。
server{
        listen      1000;
        server_name localhost;
        location / {
            root   C:\Users\24328\Desktop\start-a-project.github.io\css-js\js-task5;  #指向文件夹
            index   index.html;    
        }
    }

如何在点击登录以后等模态框运行完以后在进行跳转到下一页。。

1

angular 插件

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

如何使用正则表达式验证密码是否有，字母，数字，符号，至少两种以上组成？

0

1

正则表达式

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope) {
			$scope.to = function checkNumber() {
				var a = $scope.firstName;
				console.log(a);
				var reg = /^[0-9]+$/;
				var res = /^[a-zA-Z]+$/;
				var ret = /^[`~!@#$%^&*()_+<>?？，；【】、。:"{},.\/;'[\]]+$/;
				if (reg.test($scope.firstName) || res.test($scope.firstName )|| ret.test($scope.firstName)) {
					$scope.test="请输入数字，字母，字符两种组合以上";
				}else{
					$scope.test="输入正确";
				}
				
			};
  
		});
	</script>

使用better-scroll时无法使用点击事件

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

无

登陆密码账户正确后跳转路由

0

1

angular基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

if(res.code === 0){
      alert("登陆成功");
      this.route.navigate(['/list']);
       console.log(res);
     } else{
       alert(res.message);
     }

   });

{
        path:'',component: LogComponent
      },
    {
        path:'list',loadChildren:'../../pages/list/list.module#ListModule'
      } ,
    
];